import React, { useState } from 'react';
import { Trash2 } from 'lucide-react';
import { useRevokeApiKey } from '../../utils/queries/apikey-queries';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogFooter,
} from '../ui/dialog';
import { Button } from '../ui/button';
import { Input, Label } from '../ui/input';

const ApiKeyRevokeModal = ({ isOpen, onClose }) => {
    const [apiKey, setApiKey] = useState('');
    const revokeApiKeyMutation = useRevokeApiKey();

    const handleRevoke = async () => {
        if (!apiKey.trim()) {
            alert('Please enter an API key');
            return;
        }

        try {
            await revokeApiKeyMutation.mutateAsync(apiKey);
            alert('API key revoked successfully');
            onClose();
        } catch (error) {
            console.error('Failed to revoke API key:', error);
            alert('Failed to revoke API key');
        }
    };

    return (
        <Dialog open={isOpen} onOpenChange={(o) => { if (!o) onClose(); }}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Revoke API Key</DialogTitle>
                </DialogHeader>
                <div className="space-y-2">
                    <Label htmlFor="revoke-api-key">API Key</Label>
                    <Input
                        id="revoke-api-key"
                        type="text"
                        placeholder="Enter API key to revoke"
                        value={apiKey}
                        onChange={(e) => setApiKey(e.target.value)}
                    />
                </div>
                <DialogFooter>
                    <Button variant="outline" onClick={onClose}>
                        Cancel
                    </Button>
                    <Button
                        variant="destructive"
                        onClick={handleRevoke}
                        disabled={revokeApiKeyMutation.isLoading}
                    >
                        <Trash2 className="h-4 w-4" /> Revoke
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};

export default ApiKeyRevokeModal;