"use client";

import { useEffect, useState } from "react";
import { Save, Disc, Cpu, Settings2, Trash2 } from "lucide-react";
import { getSettingGroup, updateSetting } from "@/lib/api";
import { useUI } from "@/context/UIContext";
import { clsx } from "clsx";

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

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

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

    if (!data) return <div className="p-10 text-center animate-pulse text-white/20">Loading presets...</div>;

    return (
        <div className="space-y-6 max-w-4xl">
            <div>
                <h1 className="text-2xl font-bold tracking-tight">Encoding <span className="text-white">Presets</span></h1>
                <p className="text-white/40 text-sm mt-1">Configure resolutions, codecs, and quality levels.</p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <ResCard
                    label="480p SD"
                    enabled={data.enabled480p}
                    onToggle={() => setData({ ...data, enabled480p: !data.enabled480p })}
                    crf={data.crf480}
                    setCrf={(v: number) => setData({ ...data, crf480: v })}
                    recommended={24}
                    hevcCrf={data.crf480p_hevc}
                    setHevcCrf={(v: number) => setData({ ...data, crf480p_hevc: v })}
                    hevcRecommended={28}
                />
                <ResCard
                    label="720p HD"
                    enabled={data.enabled720p}
                    onToggle={() => setData({ ...data, enabled720p: !data.enabled720p })}
                    crf={data.crf720}
                    setCrf={(v: number) => setData({ ...data, crf720: v })}
                    recommended={22}
                    hevcCrf={data.crf720p_hevc}
                    setHevcCrf={(v: number) => setData({ ...data, crf720p_hevc: v })}
                    hevcRecommended={26}
                />
                <ResCard
                    label="1080p FHD"
                    enabled={data.enabled1080p}
                    onToggle={() => setData({ ...data, enabled1080p: !data.enabled1080p })}
                    crf={data.crf1080}
                    setCrf={(v: number) => setData({ ...data, crf1080: v })}
                    recommended={20}
                    hevcCrf={data.crf1080p_hevc}
                    setHevcCrf={(v: number) => setData({ ...data, crf1080p_hevc: v })}
                    hevcRecommended={24}
                />
                <ResCard
                    label="4K UHD"
                    enabled={data.enabled2160p || false}
                    onToggle={() => setData({ ...data, enabled2160p: !data.enabled2160p })}
                    crf={data.crf2160p || 18}
                    setCrf={(v: number) => setData({ ...data, crf2160p: v })}
                    recommended={18}
                    hevcCrf={data.crf2160p_hevc || 22}
                    setHevcCrf={(v: number) => setData({ ...data, crf2160p_hevc: v })}
                    hevcRecommended={22}
                />
            </div>

            <div className="card p-8 space-y-8">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div className="space-y-6">
                        <h3 className="section-title">Video Configuration</h3>
                        <SelectGroup
                            label="Video Codec"
                            value={data.videoCodec}
                            onChange={(v: string) => setData({ ...data, videoCodec: v })}
                            options={[
                                { label: "H.264 (libx264)", value: "libx264" },
                                { label: "H.265 (libx265)", value: "libx265" },
                                { label: "VP9 (libvp9)", value: "libvp9" }
                            ]}
                        />
                        <SelectGroup
                            label="CPU Preset"
                            value={data.preset}
                            onChange={(v: string) => setData({ ...data, preset: v })}
                            options={[
                                { label: "UltraFast (Lowest Quality)", value: "ultrafast" },
                                { label: "Fast (Balanced)", value: "fast" },
                                { label: "Medium (Best Quality)", value: "medium" },
                                { label: "Slow (Max Efficiency)", value: "slow" }
                            ]}
                        />
                    </div>

                    <div className="space-y-6">
                        <h3 className="section-title">Audio & Container</h3>
                        <div className="grid grid-cols-2 gap-4">
                            <SelectGroup
                                label="Audio Codec"
                                value={data.audioCodec}
                                onChange={(v: string) => setData({ ...data, audioCodec: v })}
                                options={[
                                    { label: "AAC (Standard)", value: "aac" },
                                    { label: "Copy (No Change)", value: "copy" },
                                    { label: "AC3", value: "ac3" }
                                ]}
                            />
                            <SelectGroup
                                label="Audio Bitrate"
                                value={data.audioBitrate}
                                onChange={(v: string) => setData({ ...data, audioBitrate: v })}
                                options={[
                                    { label: "128k", value: "128k" },
                                    { label: "192k", value: "192k" },
                                    { label: "256k", value: "256k" },
                                    { label: "320k", value: "320k" }
                                ]}
                            />
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                            <SelectGroup
                                label="Output Format"
                                value={data.outputFormat}
                                onChange={(v: string) => setData({ ...data, outputFormat: v })}
                                options={[
                                    { label: "Matroska (.mkv)", value: "mkv" },
                                    { label: "MPEG-4 (.mp4)", value: "mp4" }
                                ]}
                            />
                        <div className="grid grid-cols-2 gap-4">
                            <div className="space-y-1.5">
                                <label className="text-[10px] font-black uppercase tracking-widest text-white/30">Attachment Clean</label>
                                <button
                                    onClick={() => setData({ ...data, stripAttachments: !data.stripAttachments })}
                                    className={clsx("w-full py-2.5 rounded-lg text-[10px] font-black transition-all border", data.stripAttachments ? "bg-accent-cyan/10 border-accent-cyan/40 text-white" : "bg-white/5 border-white/5 text-white/40")}
                                >
                                    {data.stripAttachments ? "STRIP LOGOS" : "KEEP ATTACH"}
                                </button>
                            </div>
                            <div className="space-y-1.5">
                                <label className="text-[10px] font-black uppercase tracking-widest text-white/30">Audio Mixing</label>
                                <button
                                    onClick={() => setData({ ...data, forceStereo: !data.forceStereo })}
                                    className={clsx("w-full py-2.5 rounded-lg text-[10px] font-black transition-all border", data.forceStereo ? "bg-accent-violet/10 border-accent-violet/40 text-white" : "bg-white/5 border-white/5 text-white/40")}
                                >
                                    {data.forceStereo ? "FORCE STEREO" : "KEEP ORIGINAL"}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="flex items-center justify-between pt-4 border-t border-white/5">
                    <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 Presets"}
                    </button>
                </div>
            </div>
        </div>
    );
}

function ResCard({
    label,
    enabled,
    onToggle,
    crf,
    setCrf,
    recommended,
    hevcCrf,
    setHevcCrf,
    hevcRecommended
}: {
    label: string,
    enabled: boolean,
    onToggle: () => void,
    crf: number,
    setCrf: (v: number) => void,
    recommended: number,
    hevcCrf: number,
    setHevcCrf: (v: number) => void,
    hevcRecommended: number
}) {
    return (
        <div className={clsx("card p-6 transition-all border-2", enabled ? "border-accent-cyan/20 bg-accent-cyan/[0.02]" : "border-transparent opacity-50")}>
            <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-3">
                    <div className={clsx("p-2 rounded-lg", enabled ? "bg-accent-cyan/10 text-white" : "bg-white/5 text-white/20")}>
                        <Disc className="w-5 h-5" />
                    </div>
                    <div>
                        <span className="font-bold text-sm block">{label}</span>
                        <span className="text-[10px] text-white/30 uppercase tracking-tighter">Resolution Control</span>
                    </div>
                </div>
                <button
                    onClick={onToggle}
                    className={clsx("w-10 h-5 rounded-full relative transition-colors", enabled ? "bg-accent-cyan" : "bg-white/10")}
                >
                    <div className={clsx("absolute top-1 w-3 h-3 rounded-full bg-white transition-all", enabled ? "left-6" : "left-1")} />
                </button>
            </div>

            <div className="space-y-6">
                {/* H.264 Slider */}
                <div>
                    <div className="flex justify-between items-center mb-2">
                        <div className="flex items-center gap-2">
                            <label className="text-[10px] font-black uppercase text-white/40">AVC / H.264 Quality</label>
                            {crf === recommended && (
                                <span className="text-[8px] bg-emerald-500/20 text-emerald-400 px-1.5 py-0.5 rounded font-black tracking-widest uppercase">Best Balance</span>
                            )}
                        </div>
                        <span className={clsx("text-xs font-mono font-black", crf === recommended ? "text-emerald-400" : "text-white")}>{crf}</span>
                    </div>
                    <input
                        type="range" min="0" max="51" step="1"
                        value={crf}
                        onChange={(e) => setCrf(parseInt(e.target.value))}
                        disabled={!enabled}
                        className="w-full h-1.5 bg-white/5 rounded-lg appearance-none cursor-pointer accent-accent-cyan"
                    />
                    <div className="flex justify-between text-[8px] text-white/20 mt-1 font-mono uppercase tracking-tighter">
                        <button onClick={() => setCrf(0)} disabled={!enabled}>Lossless (0)</button>
                        <button onClick={() => setCrf(recommended)} disabled={!enabled} className="text-white/40 hover:text-accent-cyan">Auto Rec ({recommended})</button>
                        <button onClick={() => setCrf(51)} disabled={!enabled}>Low (51)</button>
                    </div>
                </div>

                {/* HEVC Slider */}
                <div className="pt-4 border-t border-white/5">
                    <div className="flex justify-between items-center mb-2">
                        <div className="flex items-center gap-2">
                            <label className="text-[10px] font-black uppercase text-accent-cyan/60">HEVC / H.265 Quality</label>
                            {hevcCrf === hevcRecommended && (
                                <span className="text-[8px] bg-accent-cyan/20 text-accent-cyan px-1.5 py-0.5 rounded font-black tracking-widest uppercase">Optimized</span>
                            )}
                        </div>
                        <span className={clsx("text-xs font-mono font-black", hevcCrf === hevcRecommended ? "text-accent-cyan" : "text-white")}>{hevcCrf}</span>
                    </div>
                    <input
                        type="range" min="0" max="51" step="1"
                        value={hevcCrf || hevcRecommended}
                        onChange={(e) => setHevcCrf(parseInt(e.target.value))}
                        disabled={!enabled}
                        className="w-full h-1.5 bg-white/5 rounded-lg appearance-none cursor-pointer accent-accent-cyan"
                    />
                    <div className="flex justify-between text-[8px] text-white/20 mt-1 font-mono uppercase tracking-tighter">
                        <button onClick={() => setHevcCrf(0)} disabled={!enabled}>Max Qual</button>
                        <button onClick={() => setHevcCrf(hevcRecommended)} disabled={!enabled} className="text-white/40 hover:text-accent-cyan">Auto Rec ({hevcRecommended})</button>
                        <button onClick={() => setHevcCrf(51)} disabled={!enabled}>Extreme Small</button>
                    </div>
                </div>
            </div>
        </div>
    );
}

function SelectGroup({ label, value, onChange, options }: { label: string, value: string, onChange: (v: string) => void, options: { label: string, value: string }[] }) {
    return (
        <div className="space-y-1.5 flex-1">
            <label className="text-[10px] font-black uppercase tracking-widest text-white/30">{label}</label>
            <select
                value={value}
                onChange={(e) => onChange(e.target.value)}
                className="input py-2.5 appearance-none cursor-pointer"
            >
                {options.map((o: any) => (
                    <option key={o.value} value={o.value}>{o.label}</option>
                ))}
            </select>
        </div>
    );
}