"use client";

import { FormEvent, useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { PageHeader } from "@/components/admin/page-header";
import { FormCard, TextInput } from "@/components/admin/form-fields";
import { apiFetch } from "@/lib/admin-api";

const GROUPS = {
  website: [
    "site_name",
    "site_tagline",
    "site_description",
    "contact_email",
    "contact_phone",
    "contact_whatsapp",
    "contact_address",
  ],
  social: [
    "social_instagram",
    "social_tiktok",
    "social_facebook",
    "social_youtube",
    "social_discord",
    "social_twitter",
  ],
  analytics: ["analytics_ga_id", "analytics_meta_pixel", "analytics_gtm_id"],
  smtp: [
    "smtp_host",
    "smtp_port",
    "smtp_user",
    "smtp_pass",
    "smtp_from_email",
    "smtp_from_name",
  ],
} as const;

type SettingsMap = Record<string, string>;

function labelize(key: string) {
  return key.replace(/_/g, " ");
}

export default function AdminSettingsPage() {
  const [values, setValues] = useState<SettingsMap>({});
  const [error, setError] = useState("");
  const [saved, setSaved] = useState(false);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    apiFetch<SettingsMap>("/api/settings?admin=1")
      .then(setValues)
      .catch((err) => setError(err instanceof Error ? err.message : "Failed to load"));
  }, []);

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError("");
    setSaved(false);
    try {
      const next = await apiFetch<SettingsMap>("/api/settings", {
        method: "PUT",
        json: values,
      });
      setValues(next);
      setSaved(true);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Save failed");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div>
      <PageHeader title="Settings" description="Website, social, analytics & SMTP" />
      <form onSubmit={onSubmit} className="space-y-6">
        {(Object.entries(GROUPS) as Array<[keyof typeof GROUPS, readonly string[]]>).map(
          ([group, keys]) => (
            <FormCard key={group} title={group.toUpperCase()}>
              <div className="grid gap-4 md:grid-cols-2">
                {keys.map((key) => (
                  <TextInput
                    key={key}
                    label={labelize(key)}
                    name={key}
                    type={key.includes("pass") ? "password" : "text"}
                    value={values[key] || ""}
                    onChange={(e) => setValues((v) => ({ ...v, [key]: e.target.value }))}
                  />
                ))}
              </div>
            </FormCard>
          ),
        )}
        {error ? <p className="text-sm text-danger">{error}</p> : null}
        {saved ? <p className="text-sm text-accent">Settings saved</p> : null}
        <Button type="submit" disabled={loading}>
          {loading ? "Saving…" : "Save settings"}
        </Button>
      </form>
    </div>
  );
}