"use client";

import { useState, useTransition } from "react";
import { MediaPicker } from "@/components/features/page-editor/media-picker";
import { Button, Card } from "@/components/ui";
import { Field, inputClass } from "@/components/ui/form";
import { saveSiteSettingsAction } from "@/lib/actions/site-admin";
import type { SiteSettings, SiteTheme } from "@/lib/site-settings";

const SOCIAL = ["twitter", "linkedin", "facebook", "instagram", "youtube"] as const;

export function SettingsForm({ siteId, initialSettings, initialTheme }: { siteId: string; initialSettings: SiteSettings; initialTheme: SiteTheme }) {
  const [s, setS] = useState<SiteSettings>(initialSettings);
  const [t] = useState<SiteTheme>(initialTheme);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
  const [pending, start] = useTransition();
  const patch = (p: Partial<SiteSettings>) => setS((x) => ({ ...x, ...p }));

  function save() {
    setMsg(null); setErrors({});
    start(async () => {
      const r = await saveSiteSettingsAction(siteId, { settings: s, theme: t });
      if (r.ok) setMsg({ ok: true, text: r.message ?? "Saved" });
      else { setErrors(r.fieldErrors ?? {}); setMsg({ ok: false, text: r.error }); }
    });
  }

  return (
    <div className="space-y-4">
      <Card className="space-y-4 p-4">
        <h2 className="text-sm font-semibold">General</h2>
        <div className="grid gap-4 sm:grid-cols-2">
          <Field id="ss-title" label="Site title" error={errors["settings.siteTitle"]}><input id="ss-title" className={inputClass} maxLength={80} value={s.siteTitle} onChange={(e) => patch({ siteTitle: e.target.value })} /></Field>
          <Field id="ss-tag" label="Tagline" error={errors["settings.tagline"]} className="sm:col-span-2"><input id="ss-tag" className={inputClass} maxLength={160} value={s.tagline} onChange={(e) => patch({ tagline: e.target.value })} /></Field>
          <Field id="ss-footer" label="Footer text" error={errors["settings.footerText"]} className="sm:col-span-2"><input id="ss-footer" className={inputClass} maxLength={500} value={s.footerText} onChange={(e) => patch({ footerText: e.target.value })} /></Field>
        </div>
      </Card>

      <Card className="space-y-4 p-4">
        <h2 className="text-sm font-semibold">Branding</h2>
        <div className="grid gap-4 sm:grid-cols-2">
          <div className="space-y-1"><span className="block text-xs font-medium">Logo (shown in the website header)</span><MediaPicker siteId={siteId} label="Logo" value={s.logoMediaId} onChange={(v) => patch({ logoMediaId: v })} /></div>
          <div className="space-y-1"><span className="block text-xs font-medium">Favicon (small browser-tab icon)</span><MediaPicker siteId={siteId} label="Favicon" value={s.faviconMediaId} onChange={(v) => patch({ faviconMediaId: v })} /></div>
        </div>
        <p className="text-xs text-muted-foreground">Colours (primary, background, text) and fonts are set under Design &amp; appearance. The page title suffix, meta description, indexing and social image are under SEO.</p>
      </Card>

      <Card className="space-y-4 p-4">
        <h2 className="text-sm font-semibold">Analytics</h2>
        <div className="grid gap-4 sm:grid-cols-2">
          <Field id="an-provider" label="Provider"><select id="an-provider" className={inputClass} value={s.analytics.provider} onChange={(e) => patch({ analytics: { provider: e.target.value as SiteSettings["analytics"]["provider"], id: "" } })}><option value="none">None</option><option value="ga4">Google Analytics 4</option><option value="plausible">Plausible</option></select></Field>
          {s.analytics.provider !== "none" ? <Field id="an-id" label={s.analytics.provider === "ga4" ? "Measurement ID" : "Domain"} error={errors["settings.analytics.id"]}><input id="an-id" className={inputClass} value={s.analytics.id} onChange={(e) => patch({ analytics: { ...s.analytics, id: e.target.value } })} placeholder={s.analytics.provider === "ga4" ? "G-XXXXXXXXXX" : "example.com"} /></Field> : null}
        </div>
      </Card>

      <Card className="space-y-4 p-4">
        <h2 className="text-sm font-semibold">Social links</h2>
        <div className="grid gap-4 sm:grid-cols-2">
          {SOCIAL.map((k) => (
            <Field key={k} id={`so-${k}`} label={k.charAt(0).toUpperCase() + k.slice(1)} error={errors[`settings.social.${k}`]}><input id={`so-${k}`} className={inputClass} placeholder="https://" value={s.social[k]} onChange={(e) => patch({ social: { ...s.social, [k]: e.target.value } })} /></Field>
          ))}
        </div>
      </Card>

      <div className="flex items-center gap-3">
        <Button onClick={save} disabled={pending}>{pending ? "Saving…" : "Save settings"}</Button>
        <p role="status" aria-live="polite" className={msg ? (msg.ok ? "text-sm text-success" : "text-sm text-danger") : "sr-only"}>{msg?.text}</p>
      </div>
    </div>
  );
}