import React from 'react';

const templates = [
  { name: '10er-Karte Luft', type: 'Karte', paid: 10, bonus: 0, gas: 'Luft' },
  { name: '10+3 Bonuskarte Luft', type: 'Bonuskarte', paid: 10, bonus: 3, gas: 'Luft' },
  { name: 'Einzel-Füllung Luft', type: 'Einzel-Füllung', paid: 1, bonus: 0, gas: 'Luft' },
  { name: 'Punktekarte gemischt', type: 'Punktekarte', paid: 20, bonus: 0, gas: 'gemischt' },
];

function Field({ label, value, hint }) {
  return (
    <div>
      <label className="text-xs font-semibold uppercase tracking-wide text-slate-500">{label}</label>
      <div className="mt-1 rounded-xl border border-slate-300 bg-slate-50 px-3 py-2 text-sm text-slate-800">
        {value}
      </div>
      {hint ? <p className="mt-1 text-xs text-slate-500">{hint}</p> : null}
    </div>
  );
}

function Toggle({ label, active = false, hint }) {
  return (
    <div className="rounded-xl border border-slate-200 bg-slate-50 p-4">
      <div className="flex items-center justify-between gap-3">
        <div>
          <p className="text-sm font-semibold text-slate-800">{label}</p>
          {hint ? <p className="mt-1 text-xs text-slate-500">{hint}</p> : null}
        </div>
        <span className={`h-6 w-11 rounded-full p-1 ${active ? 'bg-sky-700' : 'bg-slate-300'}`}>
          <span className={`block h-4 w-4 rounded-full bg-white ${active ? 'ml-5' : 'ml-0'}`} />
        </span>
      </div>
    </div>
  );
}

export default function FA02NeuesFuellkontoAnlegen() {
  const selected = templates[1];
  const initialBalance = selected.paid + selected.bonus;

  return (
    <div className="min-h-screen bg-slate-50 p-6 text-slate-900">
      <div className="mx-auto max-w-7xl space-y-5">
        <header className="rounded-2xl border border-sky-200 bg-sky-50 p-6 shadow-sm">
          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
              <p className="text-sm font-semibold uppercase tracking-wide text-sky-700">UC03 · FA-02</p>
              <h1 className="mt-1 text-3xl font-bold">Neues Füllkonto anlegen</h1>
              <p className="mt-2 max-w-3xl text-sm text-slate-600">
                Karte, Bonuskarte, Punktekarte oder Abo für einen Kunden anlegen.
              </p>
            </div>
            <div className="flex flex-wrap gap-2">
              <button className="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-800 shadow-sm">Als Entwurf speichern</button>
              <button className="rounded-xl bg-sky-700 px-4 py-2 text-sm font-semibold text-white shadow-sm">Aktiv anlegen</button>
            </div>
          </div>
        </header>

        <div className="grid gap-5 lg:grid-cols-2">
          <section className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <h2 className="text-lg font-bold">1. Kundenzuordnung</h2>
            <div className="mt-4 space-y-4">
              <Field label="Kunde" value="Maria Keller" hint="2 aktive Karten vorhanden · 1 offener Abruf" />
              <div className="rounded-xl border border-yellow-200 bg-yellow-50 p-3 text-sm text-yellow-900">
                Hinweis: Es gibt bereits aktive Füllkonten für diesen Kunden. Bitte Duplikate vermeiden.
              </div>
            </div>
          </section>

          <section className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <h2 className="text-lg font-bold">2. Produktvorlage</h2>
            <div className="mt-4 grid gap-4 md:grid-cols-2">
              <Field label="Vorlage" value={selected.name} />
              <Field label="Füllmodell" value={selected.type} />
              <Field label="Gasbereich" value={selected.gas} />
              <Field label="Einheit" value="Füllungen" />
            </div>
          </section>

          <section className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <h2 className="text-lg font-bold">3. Guthaben & Einheiten</h2>
            <div className="mt-4 grid gap-4 md:grid-cols-3">
              <Field label="bezahlte Einheiten" value={String(selected.paid)} />
              <Field label="Bonus-Einheiten" value={String(selected.bonus)} />
              <Field label="Startguthaben" value={String(initialBalance)} />
            </div>
            <div className="mt-4 rounded-xl border border-green-200 bg-green-50 p-3 text-sm text-green-900">
              Prüfung: {selected.paid} + {selected.bonus} = {initialBalance}. Startguthaben ist korrekt.
            </div>
          </section>

          <section className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <h2 className="text-lg font-bold">4. Gültigkeit & Status</h2>
            <div className="mt-4 grid gap-4 md:grid-cols-2">
              <Field label="gültig ab" value="2026-05-07" />
              <Field label="gültig bis" value="optional" />
              <Field label="Startstatus" value="active" />
              <Field label="Notiz" value="optional" />
            </div>
          </section>

          <section className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <h2 className="text-lg font-bold">5. Self-Service</h2>
            <div className="mt-4 space-y-3">
              <Toggle label="Self-Service aktiv" active hint="Kunde kann Karte digital anzeigen oder Abruf starten." />
              <Toggle label="Mitarbeiterbestätigung erforderlich" active hint="Sicherer Standard für UC03 V1." />
              <Toggle label="Digitale Karte vorbereiten" active hint="QR-Code oder Abrufcode wird später in FA-03 / FA-11 angezeigt." />
            </div>
          </section>

          <section className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <h2 className="text-lg font-bold">6. Zahlungsinformation</h2>
            <p className="mt-1 text-sm text-slate-500">Nur informativer Hinweis, keine Rechnungs- oder Kassenlogik.</p>
            <div className="mt-4 grid gap-4 md:grid-cols-2">
              <Field label="Zahlungsstatus" value="bezahlt" />
              <Field label="bezahlt am" value="2026-05-07" />
              <Field label="Zahlungsart" value="Bar" />
              <Field label="bestätigt durch" value="Mitarbeiter" />
            </div>
          </section>
        </div>

        <footer className="flex flex-col gap-3 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm md:flex-row md:items-center md:justify-between">
          <p className="text-sm text-slate-600">
            Nach dem Aktivieren wird das Füllkonto in FA-01 angezeigt und kann für Füllvorgänge verwendet werden.
          </p>
          <div className="flex flex-wrap gap-2">
            <button className="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700">Abbrechen</button>
            <button className="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-800">Als Entwurf speichern</button>
            <button className="rounded-xl bg-sky-700 px-4 py-2 text-sm font-semibold text-white">Aktiv anlegen</button>
          </div>
        </footer>
      </div>
    </div>
  );
}