import React from 'react';

const templates = [
  { name: 'Portal-Einladung', uc: 'UC06', channel: 'E-Mail', version: 'v1', status: 'aktiv' },
  { name: 'Frist bald fällig', uc: 'UC07', channel: 'E-Mail', version: 'v1', status: 'aktiv' },
  { name: 'Frist überfällig', uc: 'UC07', channel: 'E-Mail', version: 'v2', status: 'aktiv' },
  { name: 'Daten prüfen', uc: 'UC07', channel: 'intern', version: 'v1', status: 'draft' },
];

const rules = [
  { name: 'Portal-Einladung', trigger: 'portal_invite', template: 'Portal-Einladung', status: 'aktiv' },
  { name: 'Frist bald fällig', trigger: 'due_soon', template: 'Frist bald fällig', status: 'aktiv' },
  { name: 'Frist überfällig', trigger: 'overdue', template: 'Frist überfällig', status: 'aktiv' },
];

function Badge({ children }) {
  return <span className="inline-flex rounded-full border border-slate-200 bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">{children}</span>;
}

function Card({ title, children }) {
  return (
    <section className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
      <h2 className="text-lg font-bold">{title}</h2>
      <div className="mt-4">{children}</div>
    </section>
  );
}

export default function SA06SystemvorlagenStandardregeln() {
  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">UC-SA · SA-06</p>
              <h1 className="mt-1 text-3xl font-bold">Systemvorlagen & Standardregeln</h1>
              <p className="mt-2 max-w-3xl text-sm text-slate-600">Globale Defaults für UC06 und UC07 verwalten.</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">SA-01</button>
              <button className="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-800">SA-03</button>
              <button className="rounded-xl bg-sky-700 px-4 py-2 text-sm font-semibold text-white">SA-08</button>
            </div>
          </div>
        </header>

        <section className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
          <h2 className="text-lg font-bold">Status</h2>
          <div className="mt-4 flex flex-wrap gap-2">
            <Badge>5 aktiv</Badge>
            <Badge>1 Entwurf</Badge>
            <Badge>Versionierung aktiv</Badge>
            <Badge>Tenant-Varianten geschützt</Badge>
          </div>
        </section>

        <div className="grid gap-5 lg:grid-cols-2">
          <Card title="Systemvorlagen">
            <div className="space-y-3 text-sm">
              {templates.map((item) => (
                <div key={item.name} className="rounded-xl border border-slate-200 bg-slate-50 p-3">
                  <p className="font-semibold">{item.name}</p>
                  <p className="text-slate-600">{item.uc} · {item.channel} · {item.version} · {item.status}</p>
                </div>
              ))}
            </div>
          </Card>

          <Card title="Standardregeln">
            <div className="space-y-3 text-sm">
              {rules.map((item) => (
                <div key={item.name} className="rounded-xl border border-slate-200 bg-slate-50 p-3">
                  <p className="font-semibold">{item.name}</p>
                  <p className="text-slate-600">{item.trigger} · {item.template} · {item.status}</p>
                </div>
              ))}
            </div>
          </Card>
        </div>

        <div className="grid gap-5 lg:grid-cols-2">
          <Card title="Prüfungen">
            <div className="flex flex-wrap gap-2">
              <Badge>Platzhalter gültig</Badge>
              <Badge>aktive Vorlagen versioniert ändern</Badge>
              <Badge>keine Direktänderung von Tenant-Varianten</Badge>
            </div>
          </Card>

          <Card title="Aktionen">
            <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">Vorschau</button>
              <button className="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700">Versionieren</button>
              <button className="rounded-xl bg-sky-700 px-4 py-2 text-sm font-semibold text-white">SA-08 Audit</button>
            </div>
          </Card>
        </div>

        <section className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
          <p className="text-sm text-slate-600">Systemvorlagen und Standardregeln sind globale Defaults. Tenants nutzen eigene Varianten.</p>
        </section>
      </div>
    </div>
  );
}