import { Button } from "@/components/ui/button";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useState, useEffect } from "react";
import { CorsEntry } from "@/lib/features/cors/corsSlice";

interface CorsDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    type: "whitelist" | "blacklist";
    entry: CorsEntry | null;
    onSubmit: (origin: string, note: string) => Promise<void>;
}

export function CorsDialog({ open, onOpenChange, type, entry, onSubmit }: CorsDialogProps) {
    const [origin, setOrigin] = useState("");
    const [note, setNote] = useState(""); // Description or Reason
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if (open) {
            if (entry) {
                setOrigin(entry.origin);
                setNote(type === "whitelist" ? (entry.description || "") : (entry.reason || ""));
            } else {
                setOrigin("");
                setNote("");
            }
        }
    }, [open, entry, type]);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setLoading(true);
        try {
            await onSubmit(origin, note);
            onOpenChange(false);
        } catch (error) {
            console.error(error);
        } finally {
            setLoading(false);
        }
    };

    const isEdit = !!entry;
    const typeLabel = type === "whitelist" ? "Whitelist" : "Blacklist";
    const noteLabel = type === "whitelist" ? "Açıklama" : "Sebep";
    const title = `${typeLabel} ${isEdit ? "Düzenle" : "Ekle"}`;
    const description = isEdit
        ? "Mevcut kaydı düzenleyin."
        : "Listeye yeni bir domain ekleyin.";

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-[425px]">
                <DialogHeader>
                    <DialogTitle>{title}</DialogTitle>
                    <DialogDescription>
                        {description}
                    </DialogDescription>
                </DialogHeader>
                <form onSubmit={handleSubmit}>
                    <div className="grid gap-4 py-4">
                        <div className="grid grid-cols-4 items-center gap-4">
                            <Label htmlFor="origin" className="text-right">
                                Origin
                            </Label>
                            <Input
                                id="origin"
                                placeholder="https://example.com"
                                className="col-span-3"
                                value={origin}
                                onChange={(e) => setOrigin(e.target.value)}
                                required
                            />
                        </div>
                        <div className="grid grid-cols-4 items-center gap-4">
                            <Label htmlFor="note" className="text-right">
                                {noteLabel}
                            </Label>
                            <Input
                                id="note"
                                placeholder={noteLabel}
                                className="col-span-3"
                                value={note}
                                onChange={(e) => setNote(e.target.value)}
                            />
                        </div>
                    </div>
                    <DialogFooter>
                        <Button type="submit" disabled={loading}>
                            {loading ? "Kaydediliyor..." : "Kaydet"}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}