"use client";

import { useState } from "react";
import { Plus, X, Save, AlertCircle } from "lucide-react";
import { createPartnerAdmin } from "../../actions";
import { useRouter } from "next/navigation";

export default function AddPartnerModal() {
    const [isOpen, setIsOpen] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [errorMsg, setErrorMsg] = useState("");
    const [name, setName] = useState("");
    const [logo, setLogo] = useState<File | null>(null);
    const [displayOrder, setDisplayOrder] = useState("0");
    const router = useRouter();

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!logo) {
            setErrorMsg("Lütfen bir logo görseli seçin.");
            return;
        }

        setIsLoading(true);
        setErrorMsg("");

        const formData = new FormData();
        formData.append("name", name);
        formData.append("logo", logo);
        formData.append("display_order", displayOrder);

        const res = await createPartnerAdmin(formData);
        setIsLoading(false);

        if (res.error) {
            setErrorMsg(res.error);
        } else {
            // Success
            setIsOpen(false);
            setName("");
            setLogo(null);
            setDisplayOrder("0");
            router.refresh();
        }
    };

    return (
        <>
            <button
                onClick={() => setIsOpen(true)}
                className="bg-primary text-white px-6 py-2 rounded-xl font-bold hover:bg-primary/80 transition-colors flex items-center gap-2 cursor-pointer"
            >
                <Plus className="w-4 h-4" />
                Yeni Partner Ekle
            </button>

            {isOpen && (
                <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-fadeIn">
                    <div className="relative w-full max-w-md bg-zinc-950 border border-white/10 rounded-3xl p-6 shadow-2xl space-y-6">
                        
                        {/* Header */}
                        <div className="flex justify-between items-center pb-4 border-b border-white/10">
                            <h2 className="text-xl font-black uppercase tracking-widest text-white">Yeni Partner Ekle</h2>
                            <button
                                onClick={() => setIsOpen(false)}
                                className="text-white/40 hover:text-white transition-colors p-1"
                            >
                                <X className="w-5 h-5" />
                            </button>
                        </div>

                        {/* Form */}
                        <form onSubmit={handleSubmit} className="space-y-4">
                            <div className="space-y-2">
                                <label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Marka Adı</label>
                                <input
                                    required
                                    type="text"
                                    value={name}
                                    onChange={(e) => setName(e.target.value)}
                                    placeholder="Örn: ABC A.Ş."
                                    className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none"
                                />
                            </div>

                            <div className="space-y-2">
                                <label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Marka Logosu (Görsel Seçin)</label>
                                <div className="relative flex flex-col items-center justify-center border border-dashed border-white/10 hover:border-primary/50 transition-colors rounded-xl p-4 bg-white/5 cursor-pointer min-h-[100px]">
                                    <input
                                        required={!logo}
                                        type="file"
                                        accept="image/*"
                                        onChange={(e) => {
                                            if (e.target.files && e.target.files[0]) {
                                                setLogo(e.target.files[0]);
                                            }
                                        }}
                                        className="absolute inset-0 opacity-0 cursor-pointer"
                                    />
                                    {logo ? (
                                        <div className="text-center">
                                            <p className="text-xs text-primary font-bold">{logo.name}</p>
                                            <p className="text-[10px] text-white/40">{(logo.size / 1024).toFixed(1)} KB</p>
                                        </div>
                                    ) : (
                                        <div className="text-center space-y-1">
                                            <p className="text-xs text-white/60 font-medium">Görsel seçmek için tıklayın</p>
                                            <p className="text-[9px] text-white/30 uppercase tracking-wider">PNG, JPG veya SVG</p>
                                        </div>
                                    )}
                                </div>
                            </div>

                            <div className="space-y-2">
                                <label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Görünüm Sırası</label>
                                <input
                                    required
                                    type="number"
                                    value={displayOrder}
                                    onChange={(e) => setDisplayOrder(e.target.value)}
                                    placeholder="0"
                                    className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none"
                                />
                            </div>

                            {errorMsg && (
                                <div className="flex items-center gap-2 text-red-500 text-xs font-bold bg-red-500/10 p-4 rounded-xl">
                                    <AlertCircle className="w-4 h-4 shrink-0" />
                                    <span>{errorMsg}</span>
                                </div>
                            )}

                            <div className="pt-4 flex gap-3">
                                <button
                                    type="button"
                                    onClick={() => setIsOpen(false)}
                                    className="flex-1 border border-white/10 text-white font-bold py-3 px-6 rounded-xl hover:bg-white/5 transition-colors"
                                >
                                    İptal
                                </button>
                                <button
                                    type="submit"
                                    disabled={isLoading}
                                    className="flex-1 bg-primary text-white font-bold py-3 px-6 rounded-xl hover:bg-primary/80 transition-colors flex items-center justify-center gap-2 disabled:opacity-50"
                                >
                                    <Save className="w-4 h-4" />
                                    {isLoading ? "Kaydediliyor..." : "Kaydet"}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}
        </>
    );
}