import { Button } from "@/components/ui/button";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Check, Key, Trash } from "lucide-react";
import { checkIfUserHasApiKey, storeUserApiKey, deleteUserApiKey } from "../actions";
import { useState } from "react";
import { useToast } from "@/components/ui/use-toast";

interface AuthTokenModalProps {
    user: IUser;
    userHasApiKey: () => void;
    hasApiKey: boolean;
    setHasApiKey: (hasApiKey: boolean) => void;
}

const AuthTokenModal: React.FC<AuthTokenModalProps> = ({ user, userHasApiKey, hasApiKey, setHasApiKey }) => {
    const { toast } = useToast();
    const [apiKey, setApiKey] = useState<string>("");


    return (
        <Dialog>
            <DialogTrigger asChild>
                <Button
                    size="sm"
                    variant="outline"
                    className="flex flex-row items-center gap-2"
                    onClick={async () => {
                        userHasApiKey();
                    }}
                >
                    <Key size={16} />
                    <span>Set your key</span>
                </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px]">
                <DialogHeader>
                    <DialogTitle>Set your OpenAI API Key</DialogTitle>
                    <DialogDescription>
                        This key is kept encrypted and never stored on our servers as plain text.
                    </DialogDescription>
                </DialogHeader>
                <div className="flex flex-row gap-2 py-4">
                    <Input
                        id="api_key"
                        value={apiKey}
                        disabled={hasApiKey}
                        placeholder={hasApiKey ? "sk-... (OpenAI API Key already set)" : "sk-..."}
                        onChange={(e) => {
                            setApiKey(e.target.value);
                        }}
                    />
                    <Button
                        size="icon"
                        variant="ghost"
                        // disabled={!apiKey || hasApiKey}
                        onClick={async () => {
                            if (!hasApiKey) {
                                await storeUserApiKey(user.user_id, apiKey);
                                setHasApiKey(true);  // Set this immediately
                                userHasApiKey();
                                toast({
                                    description: "OpenAI API Key added",
                                });
                                setApiKey("********************");
                            } else {
                                await deleteUserApiKey(user.user_id);
                                setHasApiKey(false);
                                userHasApiKey();
                                toast({
                                    description: "OpenAI API Key removed",
                                });
                            }
                        }}
                        className="flex-shrink-0"
                    >
                        {!hasApiKey ?<Check className="flex-shrink-0" size={18} /> : <Trash className="flex-shrink-0" size={18} />}
                    </Button>
                </div>
            </DialogContent>
        </Dialog>
    );
};

export default AuthTokenModal;