"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Save, ToggleLeft, Loader2, CheckCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { adminApi, type AdminSettings } from "@/lib/api";
import { getAdminToken } from "@/lib/admin-store";

const DEFAULT_SETTINGS: AdminSettings = {
  maintenance_mode: false,
  new_signups: true,
  free_plan_enabled: true,
  email_notifications: true,
  api_access_enabled: true,
  watermark_enabled: true,
  free_daily_limit: 1,
  free_max_minutes: 15,
  free_max_clips: 3,
  pro_daily_limit: 5,
  pro_max_minutes: 20,
  pro_max_clips: 10,
};

export default function AdminSettingsPage() {
  const router = useRouter();
  const [settings, setSettings] = useState<AdminSettings>(DEFAULT_SETTINGS);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    (async () => {
      const token = await getAdminToken();
      if (!token) { router.push("/admin-login"); return; }
      try {
        setSettings(await adminApi.getSettings(token));
      } catch {
        // use defaults on failure
      } finally {
        setLoading(false);
      }
    })();
  }, [router]);

  const handleSave = async () => {
    const token = await getAdminToken();
    if (!token) return;
    setSaving(true);
    setError("");
    setSaved(false);
    try {
      const updated = await adminApi.updateSettings(token, settings);
      setSettings(updated);
      setSaved(true);
      setTimeout(() => setSaved(false), 3000);
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "Save failed");
    } finally {
      setSaving(false);
    }
  };

  const toggle = (key: keyof AdminSettings) =>
    setSettings((prev) => ({ ...prev, [key]: !prev[key] }));

  const setNum = (key: keyof AdminSettings, value: number) =>
    setSettings((prev) => ({ ...prev, [key]: value }));

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20 text-zinc-500">
        <Loader2 className="w-5 h-5 animate-spin mr-2" /> Loading settings...
      </div>
    );
  }

  const toggleItems = [
    {
      key: "maintenance_mode" as const,
      label: "Maintenance Mode",
      desc: "Take site offline for all non-admin users",
      danger: true,
    },
    {
      key: "new_signups" as const,
      label: "Allow New Signups",
      desc: "Enable or disable new user registration",
    },
    {
      key: "free_plan_enabled" as const,
      label: "Free Plan Active",
      desc: "Allow users to sign up on the free tier",
    },
    {
      key: "email_notifications" as const,
      label: "Email Notifications",
      desc: "Send job completion emails to users",
    },
    {
      key: "api_access_enabled" as const,
      label: "API Access",
      desc: "Enable Pro Max API endpoints globally",
    },
    {
      key: "watermark_enabled" as const,
      label: "Watermark on Free",
      desc: "Apply watermark to free plan exports",
    },
  ];

  return (
    <div>
      <div className="mb-8 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Settings</h1>
          <p className="text-zinc-500 text-sm mt-1">Configure platform behavior and plan limits</p>
        </div>
        <div className="flex items-center gap-3">
          {saved && (
            <span className="flex items-center gap-1.5 text-xs text-emerald-400">
              <CheckCircle className="w-3.5 h-3.5" /> Saved
            </span>
          )}
          {error && <span className="text-xs text-red-400">{error}</span>}
          <Button
            className="bg-gradient-to-r from-violet-600 to-violet-500 text-white border-0"
            onClick={handleSave}
            disabled={saving}
          >
            {saving ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Save className="w-4 h-4 mr-2" />}
            Save Changes
          </Button>
        </div>
      </div>

      <div className="grid lg:grid-cols-2 gap-6">
        {/* Plan Limits */}
        <div className="glass-card p-6">
          <h2 className="text-base font-semibold text-white mb-5">Plan Limits Editor</h2>
          <div className="space-y-5">
            <div>
              <div className="flex items-center gap-2 mb-3">
                <Badge className="bg-zinc-800 text-zinc-300 border-zinc-700 text-xs">Free</Badge>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <Label className="text-xs text-zinc-500">Videos/day</Label>
                  <Input
                    type="number"
                    value={settings.free_daily_limit}
                    onChange={(e) => setNum("free_daily_limit", +e.target.value)}
                    className="bg-white/5 border-white/10 text-white h-9 text-sm"
                  />
                </div>
                <div className="space-y-1.5">
                  <Label className="text-xs text-zinc-500">Max duration (min)</Label>
                  <Input
                    type="number"
                    value={settings.free_max_minutes}
                    onChange={(e) => setNum("free_max_minutes", +e.target.value)}
                    className="bg-white/5 border-white/10 text-white h-9 text-sm"
                  />
                </div>
              </div>
            </div>

            <div className="border-t border-white/8 pt-4">
              <div className="flex items-center gap-2 mb-3">
                <Badge className="bg-violet-900/50 text-violet-300 border-violet-700/50 text-xs">Pro</Badge>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <Label className="text-xs text-zinc-500">Videos/day</Label>
                  <Input
                    type="number"
                    value={settings.pro_daily_limit}
                    onChange={(e) => setNum("pro_daily_limit", +e.target.value)}
                    className="bg-white/5 border-white/10 text-white h-9 text-sm"
                  />
                </div>
                <div className="space-y-1.5">
                  <Label className="text-xs text-zinc-500">Max duration (min)</Label>
                  <Input
                    type="number"
                    value={settings.pro_max_minutes}
                    onChange={(e) => setNum("pro_max_minutes", +e.target.value)}
                    className="bg-white/5 border-white/10 text-white h-9 text-sm"
                  />
                </div>
              </div>
            </div>

            <div className="border-t border-white/8 pt-4">
              <div className="flex items-center gap-2 mb-2">
                <Badge className="bg-cyan-900/50 text-cyan-300 border-cyan-700/50 text-xs">Pro Max</Badge>
              </div>
              <p className="text-xs text-zinc-500">Unlimited — no configurable limits</p>
            </div>
          </div>
        </div>

        {/* Site Config Toggles */}
        <div className="glass-card p-6">
          <div className="flex items-center gap-2 mb-5">
            <ToggleLeft className="w-4 h-4 text-violet-400" />
            <h2 className="text-base font-semibold text-white">Site Configuration</h2>
          </div>
          <div className="space-y-4">
            {toggleItems.map(({ key, label, desc, danger }) => (
              <div
                key={key}
                className="flex items-center justify-between py-3 border-b border-white/5 last:border-0"
              >
                <div>
                  <div className={`text-sm font-medium ${danger ? "text-red-400" : "text-white"}`}>
                    {label}
                  </div>
                  <div className="text-xs text-zinc-500">{desc}</div>
                </div>
                <Switch
                  checked={Boolean(settings[key])}
                  onCheckedChange={() => toggle(key)}
                  className="data-[state=checked]:bg-violet-600"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}