"use client";

import { useEffect, useState } from "react";
import { Loader2, Save } from "lucide-react";
import { toast } from "sonner";

import { ImageUrlField } from "@/components/admin/image-url-field";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import type { CmsNavigationItem, CmsSiteSettings } from "@/lib/cms/types";

function NavEditor({
  items,
  setItems,
}: {
  items: CmsNavigationItem[];
  setItems: React.Dispatch<React.SetStateAction<CmsNavigationItem[]>>;
}) {
  return (
    <div className="space-y-2">
      {items.map((item) => (
        <div key={item.id} className="grid gap-2 sm:grid-cols-2">
          <Input
            value={item.label}
            placeholder="Label"
            onChange={(e) =>
              setItems((list) => list.map((x) => (x.id === item.id ? { ...x, label: e.target.value } : x)))
            }
          />
          <Input
            value={item.href}
            placeholder="/path"
            onChange={(e) =>
              setItems((list) => list.map((x) => (x.id === item.id ? { ...x, href: e.target.value } : x)))
            }
          />
        </div>
      ))}
    </div>
  );
}

export function CmsSettingsEditor() {
  const [settings, setSettings] = useState<CmsSiteSettings | null>(null);
  const [mainNav, setMainNav] = useState<CmsNavigationItem[]>([]);
  const [footerNav, setFooterNav] = useState<CmsNavigationItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    let cancelled = false;
    async function loadInitial() {
      const [sRes, mRes, fRes] = await Promise.all([
        fetch("/api/admin/cms/settings"),
        fetch("/api/admin/cms/navigation?location=main"),
        fetch("/api/admin/cms/navigation?location=footer"),
      ]);
      if (cancelled) return;
      if (sRes.ok) {
        const d = (await sRes.json()) as { settings: CmsSiteSettings };
        setSettings(d.settings);
      }
      if (mRes.ok) {
        const d = (await mRes.json()) as { items: CmsNavigationItem[] };
        setMainNav(d.items ?? []);
      }
      if (fRes.ok) {
        const d = (await fRes.json()) as { items: CmsNavigationItem[] };
        setFooterNav(d.items ?? []);
      }
      setLoading(false);
    }
    void loadInitial().catch(() => {
      if (!cancelled) setLoading(false);
    });
    return () => {
      cancelled = true;
    };
  }, []);

  async function save() {
    if (!settings) return;
    setSaving(true);
    const [sRes, mRes, fRes] = await Promise.all([
      fetch("/api/admin/cms/settings", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ settings }),
      }),
      fetch("/api/admin/cms/navigation", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ location: "main", items: mainNav }),
      }),
      fetch("/api/admin/cms/navigation", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ location: "footer", items: footerNav }),
      }),
    ]);
    setSaving(false);
    if (!sRes.ok || !mRes.ok || !fRes.ok) {
      toast.error("Save failed.");
      return;
    }
    toast.success("Settings saved.");
  }

  if (loading || !settings) {
    return (
      <div className="text-muted-foreground flex items-center gap-2 py-12">
        <Loader2 className="size-5 animate-spin text-primary" /> Loading…
      </div>
    );
  }

  function patch(partial: Partial<CmsSiteSettings>) {
    setSettings((s) => (s ? { ...s, ...partial } : s));
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div>
          <h1 className="font-display text-2xl font-semibold">Settings</h1>
          <p className="text-muted-foreground mt-1 text-sm">Brand, contact, images, and menus.</p>
        </div>
        <Button type="button" className="gap-2" disabled={saving} onClick={() => void save()}>
          {saving ? <Loader2 className="size-4 animate-spin" /> : <Save className="size-4" />}
          Save all
        </Button>
      </div>

      <Tabs defaultValue="images">
        <TabsList>
          <TabsTrigger value="images">Images</TabsTrigger>
          <TabsTrigger value="brand">Brand</TabsTrigger>
          <TabsTrigger value="contact">Contact</TabsTrigger>
          <TabsTrigger value="nav">Menus</TabsTrigger>
        </TabsList>

        <TabsContent value="images" className="mt-6 space-y-6 rounded-xl border border-white/10 bg-white/[0.02] p-6">
          <ImageUrlField
            label="Home hero background"
            value={settings.heroBackgroundImage}
            onChange={(url) => patch({ heroBackgroundImage: url })}
            hint="Upload here or pick a URL from Media. Saved as optimized WebP."
          />
          <ImageUrlField
            label="About page hero"
            value={settings.aboutHeroImage}
            onChange={(url) => patch({ aboutHeroImage: url })}
          />
        </TabsContent>

        <TabsContent value="brand" className="mt-6 space-y-4 rounded-xl border border-white/10 bg-white/[0.02] p-6">
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <Label>Site name</Label>
              <Input value={settings.name} onChange={(e) => patch({ name: e.target.value })} />
            </div>
            <div className="space-y-2">
              <Label>Tagline</Label>
              <Input value={settings.tagline} onChange={(e) => patch({ tagline: e.target.value })} />
            </div>
          </div>
          <div className="space-y-2">
            <Label>Description</Label>
            <Textarea value={settings.description} rows={3} onChange={(e) => patch({ description: e.target.value })} />
          </div>
          <div className="space-y-2">
            <Label>Promo banner</Label>
            <Input value={settings.promoBanner} onChange={(e) => patch({ promoBanner: e.target.value })} />
          </div>
        </TabsContent>

        <TabsContent value="contact" className="mt-6 space-y-4 rounded-xl border border-white/10 bg-white/[0.02] p-6">
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <Label>Email</Label>
              <Input value={settings.email} onChange={(e) => patch({ email: e.target.value })} />
            </div>
            <div className="space-y-2">
              <Label>Phone</Label>
              <Input value={settings.phone} onChange={(e) => patch({ phone: e.target.value })} />
            </div>
          </div>
          {(["instagram", "youtube", "tiktok", "whatsapp"] as const).map((key) => (
            <div key={key} className="space-y-2">
              <Label className="capitalize">{key}</Label>
              <Input
                value={settings.social[key]}
                onChange={(e) => patch({ social: { ...settings.social, [key]: e.target.value } })}
              />
            </div>
          ))}
        </TabsContent>

        <TabsContent value="nav" className="mt-6 space-y-8">
          <div className="rounded-xl border border-white/10 bg-white/[0.02] p-6">
            <h3 className="mb-4 font-medium">Header menu</h3>
            <NavEditor items={mainNav} setItems={setMainNav} />
          </div>
          <div className="rounded-xl border border-white/10 bg-white/[0.02] p-6">
            <h3 className="mb-4 font-medium">Footer menu</h3>
            <NavEditor items={footerNav} setItems={setFooterNav} />
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}