import { UpdateApiKeyDialog } from '@bettercone/ui';
import { authClient } from '@/lib/auth-client';

export default function ApiKeyManagement() {
  const [editingKey, setEditingKey] = useState<ApiKey | null>(null);
  
  return (
    <>
      <Button onClick={() => setEditingKey(selectedKey)}>
        Edit Key
      </Button>
      
      <UpdateApiKeyDialog
        authClient={authClient}
        apiKey={editingKey}
        open={!!editingKey}
        onOpenChange={(open) => !open && setEditingKey(null)}
        onSuccess={(updatedKey) => {
          console.log('Updated:', updatedKey);
          setEditingKey(null);
          refetchKeys();
        }}
      />
    </>
  );
}

<UpdateApiKeyDialog
  authClient={authClient}
  apiKey={selectedKey}
  open={isOpen}
  onOpenChange={setIsOpen}
  onSuccess={(key) => {
    toast.success(`API key "${key.name}" updated`);
    refetchKeys();
  }}
/>

const scopes = [
  { id: 'read', name: 'Read', description: 'Read-only access' },
  { id: 'write', name: 'Write', description: 'Create and update' },
  { id: 'delete', name: 'Delete', description: 'Delete resources' },
];

<UpdateApiKeyDialog
  authClient={authClient}
  apiKey={selectedKey}
  open={isOpen}
  onOpenChange={setIsOpen}
  availableScopes={scopes}
  onSuccess={(key) => {
    console.log('Updated scopes:', key.scopes);
  }}
/>

const [editingKey, setEditingKey] = useState<ApiKey | null>(null);

return (
  <>
    {apiKeys.map((key) => (
      <ApiKeyCell
        key={key.id}
        apiKey={key}
        onEdit={setEditingKey}
      />
    ))}
    
    <UpdateApiKeyDialog
      authClient={authClient}
      apiKey={editingKey}
      open={!!editingKey}
      onOpenChange={(open) => !open && setEditingKey(null)}
      onSuccess={() => {
        setEditingKey(null);
        refetchKeys();
      }}
    />
  </>
);