"use client";

import { useEffect, useState } from "react";
import { Save, Info, ShieldCheck, HelpCircle } from "lucide-react";
import { getSettingGroup, updateSetting } from "@/lib/api";
import { useUI } from "@/context/UIContext";

export default function MetadataSettings() {
    const { alert, toast } = useUI();
    const [data, setData] = useState<any>(null);
    const [saving, setSaving] = useState(false);
    const [message, setMessage] = useState("");

    useEffect(() => {
        getSettingGroup('metadata_template').then(setData);
    }, []);

    const handleSave = async () => {
        setSaving(true);
        try {
            await updateSetting('metadata_template', data);
            toast("Metadata templates saved!", "success");
        } catch (err: any) {
            alert({ title: "Save Failed", message: err.message, type: "error" });
        } finally {
            setSaving(false);
        }
    };

    if (!data) {
        return (
            <div className="space-y-6 max-w-3xl animate-pulse">
                <div className="space-y-2">
                    <div className="h-8 w-48 skeleton" />
                    <div className="h-4 w-64 skeleton" />
                </div>
                <div className="card p-8 space-y-8">
                    <div className="grid grid-cols-2 gap-6">
                        {[1, 2, 3, 4].map(i => (
                            <div key={i} className="space-y-2">
                                <div className="h-3 w-24 skeleton" />
                                <div className="h-10 w-full skeleton" />
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="space-y-6 max-w-3xl">
            <div>
                <h1 className="text-2xl font-bold tracking-tight">Metadata <span className="text-white">Templates</span></h1>
                <p className="text-white/40 text-sm mt-1">Configure automated branding for all processed files.</p>
            </div>

            <div className="card p-8 space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <InputGroup
                        label="Video Track Name"
                        value={data.videoTrackName}
                        onChange={(v: string) => setData({ ...data, videoTrackName: v })}
                        placeholder="e.g. Video | {siteName}"
                    />
                    <InputGroup
                        label="Audio Track Name"
                        value={data.audioTrackName}
                        onChange={(v: string) => setData({ ...data, audioTrackName: v })}
                        placeholder="e.g. Audio | {siteName}"
                    />
                    <InputGroup
                        label="Subtitle Track Name"
                        value={data.subTrackName}
                        onChange={(v: string) => setData({ ...data, subTrackName: v })}
                        placeholder="e.g. Subtitle | {siteName}"
                    />
                    <InputGroup
                        label="Global Encoder Tag"
                        value={data.encoderTag}
                        onChange={(v: string) => setData({ ...data, encoderTag: v })}
                        placeholder="e.g. FFmpeg | {siteName}"
                    />
                </div>

                <div className="space-y-4 pt-4 border-t border-white/5">
                    <InputGroup
                        label="Global Title Template"
                        value={data.globalTitle}
                        onChange={(v: string) => setData({ ...data, globalTitle: v })}
                        placeholder="e.g. {fileName} | {siteName}"
                        help="Used as the main title metadata for the file container."
                    />
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <InputGroup
                            label="Global Comment"
                            value={data.globalComment}
                            onChange={(v: string) => setData({ ...data, globalComment: v })}
                            placeholder="e.g. {siteName}.online"
                        />
                        <InputGroup
                            label="Default Language Tag"
                            value={data.language}
                            onChange={(v: string) => setData({ ...data, language: v })}
                            placeholder="e.g. und, eng, ban"
                        />
                    </div>
                </div>

                <div className="p-4 bg-accent-cyan/5 border border-accent-cyan/10 rounded-xl space-y-2">
                    <div className="flex items-center gap-2 text-white font-bold text-[10px] uppercase tracking-widest">
                        <Info className="w-3.5 h-3.5" />
                        Template Variables
                    </div>
                    <p className="text-xs text-white/70 leading-relaxed">
                        You can use keywords: <code className="text-white font-mono">{`{siteName}`}</code>, <code className="text-white font-mono">{`{fileName}`}</code>, <code className="text-white font-mono">{`{resolution}`}</code>, and <code className="text-white font-mono">{`{year}`}</code> inside any field.
                    </p>
                </div>

                <div className="flex items-center justify-between pt-4">
                    <p className="text-emerald-400 text-xs font-bold font-mono">{message}</p>
                    <button onClick={handleSave} disabled={saving} className="btn-primary">
                        <Save className="w-4 h-4" />
                        {saving ? "Saving..." : "Save Template"}
                    </button>
                </div>
            </div>
        </div>
    );
}

function InputGroup({ label, value, onChange, placeholder, help }: { label: string, value: string, onChange: (v: string) => void, placeholder: string, help?: string }) {
    return (
        <div className="space-y-1.5">
            <div className="flex items-center justify-between">
                <label className="text-[10px] font-black uppercase tracking-widest text-white/30">{label}</label>
                {help && (
                    <div className="group relative cursor-help">
                        <HelpCircle className="w-3 h-3 text-white/20 hover:text-white/40" />
                        <div className="absolute bottom-full right-0 mb-2 w-48 p-2 bg-black border border-white/10 text-[10px] text-white/60 rounded invisible group-hover:visible z-10">
                            {help}
                        </div>
                    </div>
                )}
            </div>
            <input
                type="text"
                value={value}
                onChange={(e) => onChange(e.target.value)}
                placeholder={placeholder}
                className="input py-2.5"
            />
        </div>
    );
}