"use client";

import { useEffect, useState, FormEvent } from "react";
import styles from "../admin.module.css";

interface Setting {
  id: string;
  key: string;
  value: string;
  label: string;
  type: string;
  group: string;
}

export default function SettingsPage() {
  const [settings, setSettings] = useState<Setting[]>([]);
  const [values, setValues] = useState<Record<string, string>>({});
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [success, setSuccess] = useState("");
  const [error, setError] = useState("");

  const fetchSettings = async () => {
    setLoading(true);
    const res = await fetch("/api/admin/settings");
    const data: Setting[] = await res.json();
    setSettings(data);
    const vals: Record<string, string> = {};
    data.forEach((s) => { vals[s.key] = s.value; });
    setValues(vals);
    setLoading(false);
  };

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

  const handleSave = async (e: FormEvent) => {
    e.preventDefault();
    setSaving(true);
    setError("");
    setSuccess("");
    try {
      const payload = Object.entries(values).map(([key, value]) => ({ key, value }));
      const res = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error();
      setSuccess("Settings saved successfully!");
    } catch {
      setError("Failed to save settings.");
    }
    setSaving(false);
    setTimeout(() => setSuccess(""), 3000);
  };

  // Group settings by their group key
  const grouped: Record<string, Setting[]> = {};
  settings.forEach((s) => {
    if (!grouped[s.group]) grouped[s.group] = [];
    grouped[s.group].push(s);
  });

  const groupLabels: Record<string, string> = {
    general: "General",
    contact: "Contact",
    social: "Social Links",
    theme: "Theme & Appearance",
  };

  return (
    <>
      <div className={styles.topBar}>
        <div className={styles.topBarLeft}>
          <span className={styles.pageTitle}>Settings</span>
          <span className={styles.pageBreadcrumb}> · Configure your site</span>
        </div>
      </div>

      <div className={styles.pageBody}>
        {loading ? (
          <div style={{ padding: "48px", textAlign: "center", color: "#475569" }}>Loading settings...</div>
        ) : (
          <form onSubmit={handleSave}>
            {success && <div className={styles.alertSuccess}>✅ {success}</div>}
            {error && <div className={styles.alertError}>❌ {error}</div>}

            {Object.entries(grouped).map(([group, groupSettings]) => (
              <div key={group} className={styles.formCard} style={{ marginBottom: 20 }}>
                <h3 style={{ color: "#e2e8f0", marginBottom: "20px", fontSize: "15px", fontWeight: 600, textTransform: "capitalize" }}>
                  {groupLabels[group] ?? group}
                </h3>
                <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
                  {groupSettings.map((setting) => (
                    <div key={setting.key} className={styles.formGroup}>
                      <label className={styles.formLabel}>{setting.label}</label>
                      {setting.type === "textarea" ? (
                        <textarea
                          className={styles.formTextarea}
                          value={values[setting.key] ?? ""}
                          onChange={(e) => setValues((v) => ({ ...v, [setting.key]: e.target.value }))}
                        />
                      ) : setting.type === "color" ? (
                        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                          <input
                            type="color"
                            value={values[setting.key] ?? "#000000"}
                            onChange={(e) => setValues((v) => ({ ...v, [setting.key]: e.target.value }))}
                            style={{ width: 48, height: 40, border: "none", background: "none", cursor: "pointer", borderRadius: 8 }}
                          />
                          <input
                            type="text"
                            className={styles.formInput}
                            style={{ flex: 1 }}
                            value={values[setting.key] ?? ""}
                            onChange={(e) => setValues((v) => ({ ...v, [setting.key]: e.target.value }))}
                          />
                        </div>
                      ) : setting.type === "boolean" ? (
                        <div className={styles.formCheckboxRow}>
                          <input
                            type="checkbox"
                            className={styles.formCheckbox}
                            checked={values[setting.key] === "true"}
                            onChange={(e) => setValues((v) => ({ ...v, [setting.key]: e.target.checked ? "true" : "false" }))}
                          />
                          <span style={{ fontSize: 13, color: "#94a3b8" }}>Enabled</span>
                        </div>
                      ) : (
                        <input
                          type={setting.type === "url" ? "url" : "text"}
                          className={styles.formInput}
                          value={values[setting.key] ?? ""}
                          onChange={(e) => setValues((v) => ({ ...v, [setting.key]: e.target.value }))}
                        />
                      )}
                    </div>
                  ))}
                </div>
              </div>
            ))}

            <div className={styles.formActions}>
              <button type="submit" disabled={saving} className={styles.btnPrimary} style={{ minWidth: 160 }}>
                {saving ? "Saving..." : "💾 Save All Settings"}
              </button>
            </div>
          </form>
        )}
      </div>
    </>
  );
}