"use client";

import { useCallback, useEffect, useState } from "react";
import { Plus, Trash2, ListChecks } from "lucide-react";
import { api } from "@/lib/api";
import { PageHeader, Card, Button, Badge, Input, Select, Checkbox, FormField, EmptyState, Skeleton } from "@/components/ui";
import { SettingsTabs } from "@/components/settings-tabs";
import { useToast } from "@/components/toast";
import { useConfirm } from "@/components/modal";

type Field = { id: string; label: string; type: string; required: boolean };
type Toggle = { enabled: boolean; required: boolean };
type Defaults = Record<string, Toggle>;

const DEFAULT_META: { key: string; label: string }[] = [
  { key: "phone", label: "Phone number" },
  { key: "social", label: "Social media handle" },
  { key: "website", label: "Website / blog" },
  { key: "address", label: "Address" },
];

export default function SignupFieldsPage() {
  const toast = useToast();
  const confirm = useConfirm();
  const [rows, setRows] = useState<Field[] | null>(null);
  const [defaults, setDefaults] = useState<Defaults | null>(null);
  const [savingDefaults, setSavingDefaults] = useState(false);
  const [form, setForm] = useState({ label: "", type: "text", required: false });
  const [saving, setSaving] = useState(false);

  const load = useCallback(async () => {
    const [fields, defs] = await Promise.all([api.get("/admin/signup-fields"), api.get("/admin/signup-defaults")]);
    setRows(fields);
    setDefaults(defs);
  }, []);
  useEffect(() => {
    load();
  }, [load]);

  const setDef = (key: string, patch: Partial<Toggle>) =>
    setDefaults((d) => (d ? { ...d, [key]: { ...d[key], ...patch } } : d));

  const saveDefaults = async () => {
    if (!defaults) return;
    setSavingDefaults(true);
    try {
      await api.put("/admin/signup-defaults", defaults);
      toast.success("Default fields saved.");
    } catch (e) {
      toast.error((e as Error).message);
    } finally {
      setSavingDefaults(false);
    }
  };

  const add = async () => {
    if (!form.label.trim()) {
      toast.error("Enter a field label.");
      return;
    }
    setSaving(true);
    try {
      await api.post("/admin/signup-fields", form);
      toast.success("Field added.");
      setForm({ label: "", type: "text", required: false });
      load();
    } catch (e) {
      toast.error((e as Error).message);
    } finally {
      setSaving(false);
    }
  };

  const remove = async (f: Field) => {
    if (!(await confirm({ title: `Delete “${f.label}”?`, tone: "danger", confirmText: "Delete" }))) return;
    await api.del(`/admin/signup-fields/${f.id}`);
    toast.info("Field removed.");
    load();
  };

  return (
    <div className="max-w-4xl">
      <PageHeader title="Settings" subtitle="Extra fields on the affiliate signup form" />
      <SettingsTabs />

      <div className="space-y-4">
        <Card title="Default fields" subtitle="Built-in fields shown on the signup form">
          {!defaults ? (
            <Skeleton className="h-40" />
          ) : (
            <>
              <ul className="divide-y divide-gray-50">
                <li className="flex items-center justify-between py-3">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-medium text-gray-800">Full name, Email &amp; Password</span>
                    <Badge tone="neutral">Always on</Badge>
                  </div>
                  <Badge tone="warning">Required</Badge>
                </li>
                {DEFAULT_META.map((f) => {
                  const t = defaults[f.key] ?? { enabled: false, required: false };
                  return (
                    <li key={f.key} className="flex flex-wrap items-center justify-between gap-3 py-3">
                      <span className="text-sm font-medium text-gray-800">{f.label}</span>
                      <div className="flex items-center gap-5">
                        <Checkbox label="Show" checked={t.enabled} onChange={(e) => setDef(f.key, { enabled: e.target.checked, required: e.target.checked ? t.required : false })} />
                        <Checkbox label="Required" checked={t.required} disabled={!t.enabled} onChange={(e) => setDef(f.key, { required: e.target.checked })} />
                      </div>
                    </li>
                  );
                })}
              </ul>
              <div className="mt-4">
                <Button loading={savingDefaults} onClick={saveDefaults}>Save default fields</Button>
              </div>
            </>
          )}
        </Card>

        <Card title="Add a custom field" subtitle="Extra questions to screen applicants">
          <div className="grid gap-4 sm:grid-cols-[1fr_auto_auto_auto] sm:items-end">
            <FormField label="Label">
              <Input value={form.label} onChange={(e) => setForm({ ...form, label: e.target.value })} placeholder="e.g. Instagram followers" />
            </FormField>
            <FormField label="Type">
              <Select value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value })} className="sm:w-32">
                <option value="text">Text</option>
                <option value="number">Number</option>
                <option value="email">Email</option>
              </Select>
            </FormField>
            <div className="pb-2.5">
              <Checkbox label="Required" checked={form.required} onChange={(e) => setForm({ ...form, required: e.target.checked })} />
            </div>
            <Button icon={<Plus className="h-4 w-4" />} loading={saving} onClick={add}>Add</Button>
          </div>
        </Card>

        <Card title="Fields on the signup form">
          {!rows ? (
            <Skeleton className="h-24" />
          ) : rows.length === 0 ? (
            <EmptyState icon={<ListChecks className="h-6 w-6" />} title="No custom fields" description="Add fields like ‘Instagram followers’ or ‘Niche’ to screen applicants." />
          ) : (
            <ul className="divide-y divide-gray-50">
              {rows.map((f) => (
                <li key={f.id} className="flex items-center justify-between py-3">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-medium text-gray-800">{f.label}</span>
                    <Badge tone="neutral">{f.type}</Badge>
                    {f.required && <Badge tone="warning">Required</Badge>}
                  </div>
                  <button onClick={() => remove(f)} className="text-gray-400 hover:text-red-600"><Trash2 className="h-4 w-4" /></button>
                </li>
              ))}
            </ul>
          )}
        </Card>
      </div>
    </div>
  );
}