"use client";

import { useEffect, useState, useCallback } from "react";
import { api } from "@/app/adminx/admin-api";
import { Card, Button, Field, Input, Textarea, Select, Toggle, SectionTitle, ErrorNote } from "@/app/adminx/ui";

type Tab = "general" | "seo" | "social" | "email" | "security" | "footer";

const TABS: { id: Tab; label: string }[] = [
  { id: "general", label: "General" },
  { id: "seo", label: "SEO" },
  { id: "social", label: "Social & Analytics" },
  { id: "email", label: "Email" },
  { id: "security", label: "Security" },
  { id: "footer", label: "Footer" },
];

export function SettingsSection() {
  const [tab, setTab] = useState<Tab>("general");
  const [s, setS] = useState<Record<string, string>>({});
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState("");

  const load = useCallback(async () => {
    const data = await api.get("settings");
    setS(data.settings);
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  async function save(keys: string[]) {
    setError("");
    const patch: Record<string, string> = {};
    for (const k of keys) patch[k] = s[k] ?? "";
    try {
      await api.post("settings", { settings: patch });
      setSaved(true);
      setTimeout(() => setSaved(false), 1500);
    } catch (e: any) {
      setError(e.message);
    }
  }

  const set = (k: string, v: string) => setS((prev) => ({ ...prev, [k]: v }));
  const toggle = (k: string, v: boolean) => setS((prev) => ({ ...prev, [k]: v ? "1" : "0" }));

  const SaveBtn = ({ keys }: { keys: string[] }) => (
    <div className="mt-5 flex items-center gap-3">
      <Button onClick={() => save(keys)}>{saved ? "Saved ✓" : "Save Changes"}</Button>
      <ErrorNote message={error} />
    </div>
  );

  return (
    <div>
      <SectionTitle title="Website Settings" />
      <div className="mb-5 flex flex-wrap gap-1.5">
        {TABS.map((t) => (
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            className={`rounded-lg px-3.5 py-2 text-sm font-medium transition ${
              tab === t.id ? "bg-indigo-600 text-white" : "text-slate-600 hover:bg-slate-100"
            }`}
          >
            {t.label}
          </button>
        ))}
      </div>

      <Card className="p-5">
        {tab === "general" && (
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <Field label="Website name"><Input value={s.site_name || ""} onChange={(e) => set("site_name", e.target.value)} /></Field>
            <Field label="Tagline"><Input value={s.site_tagline || ""} onChange={(e) => set("site_tagline", e.target.value)} /></Field>
            <div className="sm:col-span-2">
              <Field label="Website URL" hint="Used for canonical URLs and sitemaps">
                <Input value={s.site_url || ""} onChange={(e) => set("site_url", e.target.value)} placeholder="https://example.com" />
              </Field>
            </div>
            <div className="sm:col-span-2">
              <Field label="Website description"><Textarea rows={2} value={s.site_description || ""} onChange={(e) => set("site_description", e.target.value)} /></Field>
            </div>
            <Field label="Contact email"><Input value={s.contact_email || ""} onChange={(e) => set("contact_email", e.target.value)} /></Field>
            <SaveBtn keys={["site_name", "site_tagline", "site_url", "site_description", "contact_email"]} />
          </div>
        )}

        {tab === "seo" && (
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div className="sm:col-span-2">
              <Field label="Site title"><Input value={s.site_title || ""} onChange={(e) => set("site_title", e.target.value)} /></Field>
            </div>
            <div className="sm:col-span-2">
              <Field label="Default meta description"><Textarea rows={2} value={s.default_meta_description || ""} onChange={(e) => set("default_meta_description", e.target.value)} /></Field>
            </div>
            <Field label="Default OG image URL"><Input value={s.default_og_image || ""} onChange={(e) => set("default_og_image", e.target.value)} /></Field>
            <Field label="Google Search Console verification"><Input value={s.gsc_verification || ""} onChange={(e) => set("gsc_verification", e.target.value)} /></Field>
            <Field label="Bing Webmaster verification"><Input value={s.bing_verification || ""} onChange={(e) => set("bing_verification", e.target.value)} /></Field>
            <div className="flex items-end pb-2">
              <Toggle checked={s.robots_noindex === "1"} onChange={(v) => toggle("robots_noindex", v)} label="No-index entire site" />
            </div>
            <SaveBtn keys={["site_title", "default_meta_description", "default_og_image", "gsc_verification", "bing_verification", "robots_noindex"]} />
          </div>
        )}

        {tab === "social" && (
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <Field label="Facebook URL"><Input value={s.social_facebook || ""} onChange={(e) => set("social_facebook", e.target.value)} /></Field>
            <Field label="X / Twitter URL"><Input value={s.social_x || ""} onChange={(e) => set("social_x", e.target.value)} /></Field>
            <Field label="LinkedIn URL"><Input value={s.social_linkedin || ""} onChange={(e) => set("social_linkedin", e.target.value)} /></Field>
            <Field label="YouTube URL"><Input value={s.social_youtube || ""} onChange={(e) => set("social_youtube", e.target.value)} /></Field>
            <Field label="Instagram URL"><Input value={s.social_instagram || ""} onChange={(e) => set("social_instagram", e.target.value)} /></Field>
            <Field label="Google Analytics ID" hint="e.g. G-XXXXXXX"><Input value={s.analytics_id || ""} onChange={(e) => set("analytics_id", e.target.value)} /></Field>
            <div className="sm:col-span-2">
              <Field label="Custom head code" hint="Optional scripts injected into <head>">
                <Textarea rows={3} className="font-mono text-xs" value={s.analytics_head_code || ""} onChange={(e) => set("analytics_head_code", e.target.value)} />
              </Field>
            </div>
            <div className="sm:col-span-2">
              <Field label="Custom body code"><Textarea rows={3} className="font-mono text-xs" value={s.analytics_body_code || ""} onChange={(e) => set("analytics_body_code", e.target.value)} /></Field>
            </div>
            <SaveBtn keys={["social_facebook", "social_x", "social_linkedin", "social_youtube", "social_instagram", "analytics_id", "analytics_head_code", "analytics_body_code"]} />
          </div>
        )}

        {tab === "email" && (
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <Field label="SMTP host"><Input value={s.smtp_host || ""} onChange={(e) => set("smtp_host", e.target.value)} /></Field>
            <Field label="SMTP port"><Input value={s.smtp_port || ""} onChange={(e) => set("smtp_port", e.target.value)} /></Field>
            <Field label="SMTP username"><Input value={s.smtp_username || ""} onChange={(e) => set("smtp_username", e.target.value)} /></Field>
            <Field label="SMTP password" hint="Stored server-side, never shown"><Input type="password" value={s.smtp_password || ""} onChange={(e) => set("smtp_password", e.target.value)} /></Field>
            <Field label="Encryption">
              <Select value={s.smtp_encryption || "tls"} onChange={(e) => set("smtp_encryption", e.target.value)}>
                <option value="tls">TLS</option>
                <option value="ssl">SSL</option>
                <option value="none">None</option>
              </Select>
            </Field>
            <Field label="From email"><Input value={s.smtp_from_email || ""} onChange={(e) => set("smtp_from_email", e.target.value)} /></Field>
            <Field label="From name"><Input value={s.smtp_from_name || ""} onChange={(e) => set("smtp_from_name", e.target.value)} /></Field>
            <div className="flex items-end pb-2">
              <Toggle checked={s.email_notify_contact === "1"} onChange={(v) => toggle("email_notify_contact", v)} label="Notify on new contact message" />
            </div>
            <SaveBtn keys={["smtp_host", "smtp_port", "smtp_username", "smtp_password", "smtp_encryption", "smtp_from_email", "smtp_from_name", "email_notify_contact"]} />
          </div>
        )}

        {tab === "security" && (
          <div className="space-y-5">
            <div className="flex items-center justify-between rounded-xl border border-slate-200 p-4">
              <div>
                <p className="font-medium text-slate-800">Rate limiting</p>
                <p className="text-sm text-slate-500">Limit AI requests per visitor IP.</p>
              </div>
              <Toggle checked={s.rate_limit_enabled === "1"} onChange={(v) => toggle("rate_limit_enabled", v)} label="Enabled" />
            </div>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <Field label="Requests per IP per hour"><Input type="number" value={s.rate_limit_per_hour || ""} onChange={(e) => set("rate_limit_per_hour", e.target.value)} /></Field>
              <Field label="Requests per IP per day"><Input type="number" value={s.rate_limit_per_day || ""} onChange={(e) => set("rate_limit_per_day", e.target.value)} /></Field>
            </div>
            <div className="flex items-center justify-between rounded-xl border border-slate-200 p-4">
              <div>
                <p className="font-medium text-slate-800">Demo mode</p>
                <p className="text-sm text-slate-500">Show sample output when no AI provider key is configured.</p>
              </div>
              <Toggle checked={s.demo_mode === "1"} onChange={(v) => toggle("demo_mode", v)} label="Enabled" />
            </div>
            <div className="flex items-center justify-between rounded-xl border border-slate-200 p-4">
              <div>
                <p className="font-medium text-slate-800">Cookie notice</p>
                <p className="text-sm text-slate-500">Show a cookie consent banner to visitors.</p>
              </div>
              <Toggle checked={s.cookie_notice_enabled === "1"} onChange={(v) => toggle("cookie_notice_enabled", v)} label="Enabled" />
            </div>
            <Field label="Cookie notice text"><Textarea rows={2} value={s.cookie_notice_text || ""} onChange={(e) => set("cookie_notice_text", e.target.value)} /></Field>
            <SaveBtn keys={["rate_limit_enabled", "rate_limit_per_hour", "rate_limit_per_day", "demo_mode", "cookie_notice_enabled", "cookie_notice_text"]} />
          </div>
        )}

        {tab === "footer" && (
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div className="sm:col-span-2">
              <Field label="Footer description"><Textarea rows={2} value={s.footer_description || ""} onChange={(e) => set("footer_description", e.target.value)} /></Field>
            </div>
            <Field label="Copyright text" hint="Use {year} and {site} as placeholders"><Input value={s.footer_copyright_text || ""} onChange={(e) => set("footer_copyright_text", e.target.value)} placeholder="© {year} {site}. All rights reserved." /></Field>
            <div className="grid grid-cols-2 gap-3 sm:col-span-2">
              <Toggle checked={s.footer_show_social === "1"} onChange={(v) => toggle("footer_show_social", v)} label="Show Follow Us column" />
              <Toggle checked={s.footer_show_legal === "1"} onChange={(v) => toggle("footer_show_legal", v)} label="Show Legal column" />
              <Toggle checked={s.footer_show_resources === "1"} onChange={(v) => toggle("footer_show_resources", v)} label="Show Resources column" />
              <Toggle checked={s.footer_show_company === "1"} onChange={(v) => toggle("footer_show_company", v)} label="Show Company column" />
              <Toggle checked={s.footer_show_cookie_preferences === "1"} onChange={(v) => toggle("footer_show_cookie_preferences", v)} label="Show Cookie Preferences" />
            </div>
            <SaveBtn keys={["footer_description", "footer_copyright_text", "footer_show_social", "footer_show_legal", "footer_show_resources", "footer_show_company", "footer_show_cookie_preferences"]} />
          </div>
        )}
      </Card>
    </div>
  );
}