import { getLandingContent } from "@/lib/landing";
import { updateLandingAction } from "@/app/admin/landing/actions";

export default async function AdminLandingPage() {
  const c = await getLandingContent();
  const benefits = [...c.benefits];
  while (benefits.length < 6) benefits.push({ title: "", body: "" });

  return (
    <div>
      <h1 className="page-title">Startseite bearbeiten</h1>
      <p className="muted subtitle">
        Änderungen sind nach dem Speichern sofort auf der öffentlichen Startseite sichtbar.
      </p>

      <form action={updateLandingAction} className="panel form" style={{ maxWidth: 820 }}>
        <label>
          Hero-Titel
          <input name="heroTitle" defaultValue={c.heroTitle} required />
        </label>
        <label>
          Hero-Text
          <textarea name="heroLead" defaultValue={c.heroLead} required />
        </label>

        <div className="stack" style={{ gap: "1rem" }}>
          <label style={{ flex: "1 1 220px" }}>
            Primär-Button Text
            <input name="primaryLabel" defaultValue={c.primaryCta.label} required />
          </label>
          <label style={{ flex: "1 1 220px" }}>
            Primär-Button Link
            <input name="primaryHref" defaultValue={c.primaryCta.href} required />
          </label>
        </div>

        <div className="stack" style={{ gap: "1rem" }}>
          <label style={{ flex: "1 1 220px" }}>
            Sekundär-Button Text (optional)
            <input name="secondaryLabel" defaultValue={c.secondaryCta?.label ?? ""} />
          </label>
          <label style={{ flex: "1 1 220px" }}>
            Sekundär-Button Link (optional)
            <input name="secondaryHref" defaultValue={c.secondaryCta?.href ?? ""} />
          </label>
        </div>

        <label>
          Abschnittstitel Vorteile
          <input name="benefitSectionTitle" defaultValue={c.benefitSectionTitle} required />
        </label>

        {benefits.map((b, idx) => (
          <div key={idx} className="panel" style={{ padding: "1rem" }}>
            <div className="muted" style={{ marginBottom: "0.5rem", fontWeight: 700 }}>
              Vorteil {idx + 1}
            </div>
            <label>
              Titel
              <input name={`benefit${idx + 1}Title`} defaultValue={b.title} />
            </label>
            <label>
              Text
              <textarea name={`benefit${idx + 1}Body`} defaultValue={b.body} />
            </label>
          </div>
        ))}

        <button type="submit" className="btn btn-primary">
          Speichern
        </button>
      </form>
    </div>
  );
}