veza/apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx

import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { Input } from '../../ui/input';
import { X, Key, Copy, Check } from 'lucide-react';
import { useToast } from '../../../context/ToastContext';

interface CreateAPIKeyModalProps {
  onClose: () => void;
  onCreate: (keyData: { name: string, scopes: string[] }) => void;
}

const SCOPES = [
    { id: 'user.read', label: 'Read User Data' },
    { id: 'user.write', label: 'Update User Profile' },
    { id: 'tracks.read', label: 'Read Tracks' },
    { id: 'tracks.upload', label: 'Upload Tracks' },
    { id: 'sales.read', label: 'Read Sales Data' },
];

export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({ onClose, onCreate }) => {
  const { addToast } = useToast();
  const [step, setStep] = useState(1);
  const [name, setName] = useState('');
  const [selectedScopes, setSelectedScopes] = useState<string[]>(['user.read']);
  const [generatedKey, setGeneratedKey] = useState('');

  const toggleScope = (id: string) => {
      setSelectedScopes(prev => prev.includes(id) ? prev.filter(s => s !== id) : [...prev, id]);
  };

  const handleGenerate = () => {
      if (!name) {
          addToast("Please name your key", "error");
          return;
      }
      // Mock Key Generation
      const mockKey = `vz_${Math.random().toString(36).substr(2, 8)}_${Math.random().toString(36).substr(2, 16)}`;
      setGeneratedKey(mockKey);
      onCreate({ name, scopes: selectedScopes }); // Notify parent
      setStep(2);
  };

  const copyKey = () => {
      navigator.clipboard.writeText(generatedKey);
      addToast("API Key copied to clipboard", "success");
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm" onClick={onClose}></div>
      <div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
        
        <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
          <h3 className="font-bold text-white flex items-center gap-2">
            <Key className="w-4 h-4 text-kodo-gold" /> {step === 1 ? 'Create API Key' : 'API Key Generated'}
          </h3>
          <button onClick={onClose}><X className="w-5 h-5 text-gray-400 hover:text-white" /></button>
        </div>

        <div className="p-6">
            {step === 1 ? (
                <div className="space-y-6">
                    <Input 
                        label="Key Name" 
                        placeholder="e.g. Production Server, Mobile App" 
                        value={name} 
                        onChange={(e) => setName(e.target.value)} 
                        autoFocus 
                    />
                    
                    <div>
                        <label className="block text-xs font-bold text-gray-400 uppercase mb-3">Permissions (Scopes)</label>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                            {SCOPES.map(scope => (
                                <label key={scope.id} className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500 transition-colors">
                                    <input 
                                        type="checkbox" 
                                        className="rounded border-gray-600 bg-transparent text-kodo-gold focus:ring-0"
                                        checked={selectedScopes.includes(scope.id)}
                                        onChange={() => toggleScope(scope.id)}
                                    />
                                    <span className="text-sm text-gray-300">{scope.label}</span>
                                </label>
                            ))}
                        </div>
                    </div>
                </div>
            ) : (
                <div className="text-center space-y-6">
                    <div className="w-16 h-16 bg-kodo-lime/20 rounded-full flex items-center justify-center mx-auto text-kodo-lime">
                        <Check className="w-8 h-8" />
                    </div>
                    <div>
                        <h4 className="text-xl font-bold text-white mb-2">Key Created Successfully</h4>
                        <p className="text-sm text-gray-400 max-w-xs mx-auto">
                            Please copy your API key now. For security reasons, you won't be able to see it again.
                        </p>
                    </div>
                    
                    <div className="bg-black border border-kodo-steel rounded-lg p-4 flex items-center gap-2 relative group">
                        <code className="text-kodo-gold font-mono text-sm flex-1 break-all">{generatedKey}</code>
                        <Button variant="ghost" size="icon" onClick={copyKey} className="hover:text-white">
                            <Copy className="w-4 h-4" />
                        </Button>
                    </div>
                </div>
            )}
        </div>

        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
            {step === 1 ? (
                <>
                    <Button variant="ghost" onClick={onClose}>Cancel</Button>
                    <Button variant="primary" onClick={handleGenerate}>Generate Key</Button>
                </>
            ) : (
                <Button variant="primary" onClick={onClose}>Done</Button>
            )}
        </div>
      </div>
    </div>
  );
};