"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import ImageUploader from "@/components/image-uploader";
import type { Stat, SiteFees } from "@/lib/types";

export default function SettingsForm({
  stats: initStats,
  fees: initFees,
  images: initImages,
}: {
  stats: Stat[];
  fees: SiteFees;
  images: Record<string, string>;
}) {
  const router = useRouter();
  const [stats, setStats] = useState<Stat[]>(initStats);
  const [fees, setFees] = useState<SiteFees>(initFees);
  const [aboutHero, setAboutHero] = useState(initImages.about_hero ?? "");
  const [saving, setSaving] = useState(false);
  const [msg, setMsg] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  function setStat(i: number, field: keyof Stat, value: string) {
    setStats(stats.map((s, idx) => (idx === i ? { ...s, [field]: value } : s)));
  }

  async function save() {
    setSaving(true);
    setMsg(null);
    setError(null);
    const res = await fetch("/api/admin/settings", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        stats,
        fees,
        marketingImages: { ...initImages, about_hero: aboutHero },
      }),
    });
    setSaving(false);
    if (!res.ok) {
      const data = await res.json();
      setError(data.error ?? "Could not save");
      return;
    }
    setMsg("Saved. Public pages updated.");
    router.refresh();
  }

  return (
    <div className="space-y-8">
      {/* Stats */}
      <section className="rounded-lg border border-be-border bg-be-surface p-4">
        <h2 className="text-sm font-semibold mb-3">About page stats</h2>
        <div className="space-y-4">
          {stats.map((s, i) => (
            <div key={i} className="grid grid-cols-[1fr_1fr_120px] gap-2">
              <input
                value={s.label}
                onChange={(e) => setStat(i, "label", e.target.value)}
                placeholder="Label"
                className="input"
              />
              <input
                value={s.note}
                onChange={(e) => setStat(i, "note", e.target.value)}
                placeholder="Note"
                className="input"
              />
              <input
                value={s.value}
                onChange={(e) => setStat(i, "value", e.target.value)}
                placeholder="Value"
                className="input font-semibold"
              />
            </div>
          ))}
        </div>
      </section>

      {/* Fees */}
      <section className="rounded-lg border border-be-border bg-be-surface p-4">
        <h2 className="text-sm font-semibold mb-3">Pricing fees</h2>
        <div className="grid grid-cols-2 gap-4">
          <Field label="Storefront fee (%)">
            <input
              type="number"
              step="0.1"
              value={fees.storefront_pct}
              onChange={(e) => setFees({ ...fees, storefront_pct: parseFloat(e.target.value) })}
              className="input"
            />
          </Field>
          <Field label="Flat fee per ticket (KES)">
            <input
              type="number"
              step="1"
              value={fees.flat_per_ticket}
              onChange={(e) => setFees({ ...fees, flat_per_ticket: parseFloat(e.target.value) })}
              className="input"
            />
          </Field>
          <Field label="Bank transfer payout">
            <input
              value={fees.bank_payout}
              onChange={(e) => setFees({ ...fees, bank_payout: e.target.value })}
              className="input"
            />
          </Field>
          <Field label="M-Pesa payout">
            <input
              value={fees.mpesa_payout}
              onChange={(e) => setFees({ ...fees, mpesa_payout: e.target.value })}
              className="input"
            />
          </Field>
        </div>
        <p className="mt-3 text-xs text-be-muted">
          The storefront % and flat fee also drive the &ldquo;Run the numbers&rdquo; calculator.
        </p>
      </section>

      {/* Marketing image */}
      <section className="rounded-lg border border-be-border bg-be-surface p-4">
        <h2 className="text-sm font-semibold mb-3">About page hero image</h2>
        <ImageUploader
          value={aboutHero}
          onChange={setAboutHero}
          folder="marketing"
          label="Hero image"
        />
      </section>

      <div className="flex items-center gap-3">
        <button
          onClick={save}
          disabled={saving}
          className="rounded-md bg-brand-green px-5 py-2 text-sm font-medium text-white hover:bg-brand-green-deep disabled:opacity-50"
        >
          {saving ? "Saving…" : "Save changes"}
        </button>
        {msg && <p className="text-sm text-green-600">{msg}</p>}
        {error && <p className="text-sm text-red-600">{error}</p>}
      </div>
    </div>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div>
      <label className="block text-sm font-medium mb-1">{label}</label>
      {children}
    </div>
  );
}