"use client";

import { useEffect, useState } from "react";
import { Save, Settings, Hash, Lock, User, Globe, HardDrive, RefreshCcw } from "lucide-react";
import { getSettingGroup, updateSetting, apiFetch } from "@/lib/api";
import { useUI } from "@/context/UIContext";

export default function GeneralSettings() {
    const { alert, toast } = useUI();
    const [data, setData] = useState<any>(null);
    const [passData, setPassData] = useState({ currentPassword: "", newPassword: "", confirm: "" });
    const [saving, setSaving] = useState(false);
    const [passSaving, setPassSaving] = useState(false);
    const [purging, setPurging] = useState(false);

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

    const handleSaveGeneral = async () => {
        setSaving(true);
        try {
            await updateSetting('general', data);
            toast("General settings updated successfully!", "success");
        } catch (err: any) {
            alert({ title: "Update Failed", message: err.message, type: "error" });
        } finally {
            setSaving(false);
        }
    };

    const handleUpdatePassword = async () => {
        if (passData.newPassword !== passData.confirm) {
            return alert({ title: "Validation Error", message: "New passwords don't match!", type: "error" });
        }
        setPassSaving(true);
        try {
            await apiFetch('/api/settings/password', {
                method: 'POST',
                body: JSON.stringify(passData)
            });
            toast("Password changed successfully!", "success");
            setPassData({ currentPassword: "", newPassword: "", confirm: "" });
        } catch (err: any) {
            alert({ title: "Security Update Failed", message: err.message, type: "error" });
        } finally {
            setPassSaving(false);
        }
    };

    const handlePurgeTemp = async () => {
        if (!window.confirm("This will permanently delete all temporary files. Are you sure?")) return;
        setPurging(true);
        try {
            const result = await apiFetch('/api/settings/maintenance/purge-temp', { method: 'POST' });
            if (result.success) {
                toast(result.message, "success");
            } else {
                throw new Error(result.error || "Purge failed");
            }
        } catch (err: any) {
            alert({ title: "Purge Failed", message: err.message, type: "error" });
        } finally {
            setPurging(false);
        }
    };


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

    return (
        <div className="space-y-8 max-w-4xl">
            <div>
                <h1 className="text-2xl font-bold tracking-tight">General <span className="text-white">Config</span></h1>
                <p className="text-white/40 text-sm mt-1">Global system behavior and admin security.</p>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                {/* Core Settings */}
                <div className="card p-8 space-y-6">
                    <div className="flex items-center gap-2 mb-2">
                        <Globe className="w-4 h-4 text-white" />
                        <h3 className="section-title">Identity & Limits</h3>
                    </div>

                    <InputGroup
                        label="Site Name"
                        value={data.siteName}
                        onChange={(v: string) => setData({ ...data, siteName: v })}
                        placeholder="MovieHubBD"
                    />

                    <div className="space-y-1.5 px-4 py-3 bg-white/5 border border-white/5 rounded-xl">
                        <div className="flex justify-between items-center mb-2">
                            <label className="text-[10px] font-black uppercase tracking-widest text-white/30">Concurrent Job Limit</label>
                            <span className="text-xs font-mono font-black text-white">{data.maxConcurrentJobs || 1} Nodes</span>
                        </div>
                        <input
                            type="range" min="1" max="8" step="1"
                            value={data.maxConcurrentJobs || 1}
                            onChange={(e) => setData({ ...data, maxConcurrentJobs: parseInt(e.target.value) })}
                            className="w-full"
                        />
                    </div>

                    <div className="pt-4 border-t border-white/5 space-y-4">
                        <div className="flex items-center gap-2 mb-2">
                            <HardDrive className="w-4 h-4 text-white" />
                            <h3 className="section-title">Directory Nodes</h3>
                        </div>
                        <InputGroup label="Download Dir" value={data.downloadDir} onChange={(v: string) => setData({ ...data, downloadDir: v })} />
                        <InputGroup label="Output Dir" value={data.outputDir} onChange={(v: string) => setData({ ...data, outputDir: v })} />
                    </div>

                    <div className="pt-4 border-t border-white/5">
                        <div className="flex items-center justify-between p-4 bg-accent-cyan/[0.03] border border-accent-cyan/10 rounded-xl">
                            <div>
                                <p className="text-sm font-bold text-white">Quality Control Review</p>
                                <p className="text-[10px] text-white/40 uppercase tracking-tight">Pause jobs after encoding for manual approval</p>
                            </div>
                            <label className="relative inline-flex items-center cursor-pointer">
                                <input
                                    type="checkbox"
                                    checked={data.quality_control}
                                    onChange={(e) => setData({ ...data, quality_control: e.target.checked })}
                                    className="sr-only peer"
                                />
                                <div className="w-11 h-6 bg-white/10 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent-cyan "></div>
                            </label>
                        </div>
                    </div>

                    <button onClick={handleSaveGeneral} disabled={saving} className="btn-primary w-full justify-center">
                        {saving ? "Updating..." : "Update General Config"}
                    </button>
                </div>

                {/* Security */}
                <div className="card p-8 space-y-6 self-start">
                    <div className="flex items-center gap-2 mb-2">
                        <User className="w-4 h-4 text-white" />
                        <h3 className="section-title">Admin Access</h3>
                    </div>

                    <InputGroup
                        label="Current Admin Password"
                        type="password"
                        value={passData.currentPassword}
                        onChange={(v: string) => setPassData({ ...passData, currentPassword: v })}
                        placeholder="verify existing password"
                    />
                    <div className="border border-white/5 bg-white/[0.02] p-4 rounded-xl space-y-4">
                        <InputGroup
                            label="New Password"
                            type="password"
                            value={passData.newPassword}
                            onChange={(v: string) => setPassData({ ...passData, newPassword: v })}
                            placeholder="new secure key"
                        />
                        <InputGroup
                            label="Confirm New Password"
                            type="password"
                            value={passData.confirm}
                            onChange={(v: string) => setPassData({ ...passData, confirm: v })}
                            placeholder="re-enter secure key"
                        />
                    </div>

                    <button onClick={handleUpdatePassword} disabled={passSaving} className="btn-violet w-full justify-center">
                        {passSaving ? "Securing Node..." : "Change Admin Access Key"}
                    </button>
                </div>

                {/* Maintenance */}
                <div className="card p-8 border-orange-500/10 bg-orange-500/[0.02] lg:col-span-2">
                    <div className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                            <div className="w-10 h-10 rounded-xl bg-orange-500/10 flex items-center justify-center text-orange-500">
                                <RefreshCcw className={purging ? "animate-spin w-5 h-5" : "w-5 h-5"} />
                            </div>
                            <div>
                                <h3 className="text-sm font-bold text-white">Storage Maintenance</h3>
                                <p className="text-[10px] text-white/40 uppercase tracking-tight">Manual safety purge for temporary files</p>
                            </div>
                        </div>
                        <button
                            onClick={handlePurgeTemp}
                            disabled={purging}
                            className="btn-ghost border-orange-500/20 text-orange-500 hover:bg-orange-500/10 px-6"
                        >
                            {purging ? "Purging..." : "Safety Purge Now"}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
}

function InputGroup({ label, value, onChange, placeholder, type = "text" }: { label: string, value: string, onChange: (v: string) => void, placeholder?: string, type?: string }) {
    return (
        <div className="space-y-1.5">
            <label className="text-[10px] font-black uppercase tracking-widest text-white/30">{label}</label>
            <input
                type={type}
                value={value}
                onChange={(e) => onChange(e.target.value)}
                placeholder={placeholder}
                className="input"
            />
        </div>
    );
}