"use client";

import { useState, useEffect } from "react";
import Image from "next/image";
import { cmsApi, Organization, BrandingPayload, getImageUrl } from "@/lib/api";
import FileUpload from "./FileUpload";
import { useRouter } from "next/navigation";

export default function BrandingSettings() {
    const router = useRouter();
    const [org, setOrg] = useState<Organization | null>(null);
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    const [formData, setFormData] = useState<BrandingPayload>({
        name: "",
        primary_color: "#3B82F6",
        secondary_color: "#8B5CF6",
        platform_name: "",
        logo_variant: "standard",
    });

    useEffect(() => {
        fetchOrg();
    }, []);

    const fetchOrg = async () => {
        try {
            const data = await cmsApi.getOrganization();
            setOrg(data);
            setFormData({
                name: data.name || "",
                primary_color: data.primary_color || "#3B82F6",
                secondary_color: data.secondary_color || "#8B5CF6",
                platform_name: data.platform_name || "",
                logo_variant: data.logo_variant || "standard",
            });
        } catch (error) {
            console.error("Failed to fetch organization:", error);
        } finally {
            setLoading(false);
        }
    };

    const handleSave = async () => {
        if (!org) return;
        setSaving(true);
        try {
            await cmsApi.updateOrganizationBranding(org.id, formData);
            fetchOrg();
            alert("Branding updated successfully!");
            router.refresh();
        } catch (error) {
            console.error("Failed to update branding:", error);
            alert("Failed to update branding settings.");
        } finally {
            setSaving(false);
        }
    };

    if (loading) return <div className="p-8 text-center text-gray-400 animate-pulse">Loading settings...</div>;
    if (!org) return <div className="p-8 text-center text-red-400">Failed to load organization settings.</div>;

    return (
        <div className="space-y-8 max-w-4xl mx-auto pb-12">
            <fieldset className="border border-slate-200 dark:border-white/10 rounded-2xl p-6 bg-white dark:bg-white/5 backdrop-blur-sm shadow-sm">
                <legend className="px-2 text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
                    <span aria-hidden="true">🎨</span> Brand Identity
                </legend>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    {/* Organization Name */}
                    <div className="col-span-full">
                        <label htmlFor="org-name" className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-2">Organization Name</label>
                        <input
                            id="org-name"
                            type="text"
                            value={formData.name || ""}
                            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                            className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all"
                            placeholder="My Organization"
                            required
                        />
                        <p className="text-xs text-slate-500 dark:text-gray-500 mt-2">The official name of your organization.</p>
                    </div>
                    {/* Platform Name */}
                    <div className="col-span-full">
                        <label htmlFor="platform-name" className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-2">Platform Name</label>
                        <input
                            id="platform-name"
                            type="text"
                            value={formData.platform_name || ""}
                            onChange={(e) => setFormData({ ...formData, platform_name: e.target.value })}
                            placeholder={org.name}
                            className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all"
                        />
                        <p className="text-xs text-slate-500 dark:text-gray-500 mt-2">Appears in the browser tab and page titles.</p>
                    </div>

                    {/* Logo Section */}
                    <div className="space-y-4">
                        <span className="block text-sm font-medium text-slate-600 dark:text-gray-400">Logo</span>
                        <div className="p-4 bg-slate-50 dark:bg-black/20 rounded-xl border border-slate-200 dark:border-white/5 flex items-center justify-center min-h-[120px] relative overflow-hidden">
                            {org.logo_url ? (
                                <Image
                                    src={getImageUrl(org.logo_url)}
                                    alt="Logo"
                                    fill
                                    className="object-contain p-2"
                                    sizes="100px"
                                />
                            ) : (
                                <span className="text-slate-400 dark:text-gray-600 text-sm">No logo uploaded</span>
                            )}
                        </div>
                        <FileUpload
                            id="logo-upload"
                            accept="image/png,image/jpeg,image/svg+xml"
                            currentUrl={org.logo_url}
                            customUploadFn={async (file) => {
                                const res = await cmsApi.uploadOrganizationLogo(org.id, file);
                                return { url: res.logo_url || "" };
                            }}
                            onUploadComplete={(url) => {
                                setOrg({ ...org, logo_url: url });
                                router.refresh();
                            }}
                        />
                        <p className="text-xs text-gray-500">Recommended: SVG or PNG, max 2MB.</p>
                    </div>

                    {/* Favicon Section */}
                    <div className="space-y-4">
                        <span className="block text-sm font-medium text-slate-600 dark:text-gray-400">Favicon</span>
                        <div className="p-4 bg-slate-50 dark:bg-black/20 rounded-xl border border-slate-200 dark:border-white/5 flex items-center justify-center min-h-[120px] relative overflow-hidden">
                            {org.favicon_url ? (
                                <div className="w-8 h-8 relative">
                                    <Image
                                        src={getImageUrl(org.favicon_url)}
                                        alt="Favicon"
                                        fill
                                        className="object-contain"
                                        sizes="32px"
                                    />
                                </div>
                            ) : (
                                <span className="text-slate-400 dark:text-gray-600 text-sm">No favicon</span>
                            )}
                        </div>
                        <FileUpload
                            id="favicon-upload"
                            accept="image/png,image/x-icon,image/svg+xml,image/jpeg"
                            currentUrl={org.favicon_url}
                            customUploadFn={async (file) => {
                                const res = await cmsApi.uploadOrganizationFavicon(org.id, file);
                                return { url: res.favicon_url || "" };
                            }}
                            onUploadComplete={(url) => {
                                setOrg({ ...org, favicon_url: url });
                                router.refresh();
                            }}
                        />
                        <p className="text-xs text-gray-500">Recommended: ICO or PNG, 32x32px.</p>
                    </div>

                    {/* Logo Variant Selection */}
                    <div className="col-span-full border-t border-slate-100 dark:border-white/5 pt-6 mt-2">
                        <label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-4">Logo Display Style (Header)</label>
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <button
                                type="button"
                                onClick={() => setFormData({ ...formData, logo_variant: "standard" })}
                                className={`flex flex-col gap-3 p-4 rounded-xl border transition-all text-left ${formData.logo_variant === "standard" ? "bg-blue-600/10 border-blue-500/50" : "bg-slate-50 dark:bg-black/20 border-slate-200 dark:border-white/10 hover:border-blue-500/30 dark:hover:border-white/20"}`}
                            >
                                <div className="flex items-center gap-2">
                                    <div className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center font-bold text-xs text-white">O</div>
                                    <span className="text-sm font-bold text-slate-900 dark:text-white">Standard</span>
                                </div>
                                <p className="text-xs text-slate-500 dark:text-gray-500">Small icon next to the organization name. Best for square logos.</p>
                            </button>

                            <button
                                type="button"
                                onClick={() => setFormData({ ...formData, logo_variant: "wide" })}
                                className={`flex flex-col gap-3 p-4 rounded-xl border transition-all text-left ${formData.logo_variant === "wide" ? "bg-blue-600/10 border-blue-500/50" : "bg-slate-50 dark:bg-black/20 border-slate-200 dark:border-white/10 hover:border-blue-500/30 dark:hover:border-white/20"}`}
                            >
                                <div className="flex items-center gap-2">
                                    <div className="w-20 h-6 bg-blue-600/20 rounded-md border border-blue-500/30 flex items-center justify-center">
                                        <div className="w-12 h-2 bg-blue-500 rounded-full" />
                                    </div>
                                    <span className="text-sm font-bold text-slate-900 dark:text-white">Wide / Horizontal</span>
                                </div>
                                <p className="text-xs text-slate-500 dark:text-gray-500">Shows the full logo without text. Best for horizontal images like yours.</p>
                            </button>
                        </div>
                    </div>
                </div>
            </fieldset>

            <fieldset className="border border-slate-200 dark:border-white/10 rounded-2xl p-6 bg-white dark:bg-white/5 backdrop-blur-sm shadow-sm">
                <legend className="px-2 text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
                    <span aria-hidden="true">🌈</span> Brand Colors
                </legend>
                <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-8">
                    {/* Primary Color */}
                    <div>
                        <label htmlFor="primary-color" className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-2">Primary Color</label>
                        <div className="flex items-center gap-4">
                            <input
                                id="primary-color-picker"
                                type="color"
                                value={formData.primary_color}
                                onChange={(e) => setFormData({ ...formData, primary_color: e.target.value })}
                                aria-label="Primary color picker"
                                className="w-12 h-12 rounded-lg cursor-pointer bg-transparent border-none p-0"
                            />
                            <div className="flex-1">
                                <input
                                    id="primary-color"
                                    type="text"
                                    value={formData.primary_color}
                                    onChange={(e) => setFormData({ ...formData, primary_color: e.target.value })}
                                    className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2 text-slate-900 dark:text-white font-mono uppercase focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-bold"
                                    aria-describedby="primary-color-desc"
                                />
                            </div>
                        </div>
                        <p id="primary-color-desc" className="text-xs text-slate-500 dark:text-gray-500 mt-2">Used for main buttons, active states, and highlights.</p>
                    </div>

                    {/* Secondary Color */}
                    <div>
                        <label htmlFor="secondary-color" className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-2">Secondary Color</label>
                        <div className="flex items-center gap-4">
                            <input
                                id="secondary-color-picker"
                                type="color"
                                value={formData.secondary_color}
                                onChange={(e) => setFormData({ ...formData, secondary_color: e.target.value })}
                                aria-label="Secondary color picker"
                                className="w-12 h-12 rounded-lg cursor-pointer bg-transparent border-none p-0"
                            />
                            <div className="flex-1">
                                <input
                                    id="secondary-color"
                                    type="text"
                                    value={formData.secondary_color}
                                    onChange={(e) => setFormData({ ...formData, secondary_color: e.target.value })}
                                    className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2 text-slate-900 dark:text-white font-mono uppercase focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-bold"
                                    aria-describedby="secondary-color-desc"
                                />
                            </div>
                        </div>
                        <p id="secondary-color-desc" className="text-xs text-slate-500 dark:text-gray-500 mt-2">Used for accents and gradients.</p>
                    </div>
                </div>
            </fieldset>

            <div className="flex justify-end">
                <button
                    onClick={handleSave}
                    disabled={saving}
                    className="px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-[0_0_20px_rgba(37,99,235,0.3)] hover:shadow-[0_0_30px_rgba(37,99,235,0.5)]"
                >
                    {saving ? "Saving Changes..." : "Save Branding Settings"}
                </button>
            </div>
        </div >
    );
}