import { useState } from "react";

const SCHOOL = {
  name: "Tauchschule Zürich GmbH",
  plan: "Professional",
  slug: "k7x2m9pq",
  admin: "Hans Muster",
};

const PLAN_COLOR = { bg: "#EEEDFE", color: "#534AB7" };

const CHECKLIST = [
  { label: "Konto erstellt & 2FA aktiv",     done: true  },
  { label: "Recovery-Codes gesichert",        done: true  },
  { label: "Schulprofil ausgefüllt",          done: true  },
  { label: "Ersten Mitarbeiter einladen",     done: false },
  { label: "Erste Flasche / Gerät erfassen",  done: false },
];

const QUICK_ACTIONS = [
  { icon: "👤", label: "Mitarbeiter einladen",   hint: "Ersten Mitarbeiter hinzufügen",     screen: "UC01" },
  { icon: "🎽", label: "Ausrüstung erfassen",  hint: "Erstes Gerät / Ausrüstungsteil anlegen", screen: "UC02" },
  { icon: "👥", label: "Kunden erfassen",        hint: "Ersten Kunden anlegen",                  screen: "UC03" },
  { icon: "⚙️", label: "Schulprofil bearbeiten",  hint: "Angaben jederzeit anpassen",        screen: "TA-01" },
];

export default function OB06() {
  const [dismissed, setDismissed] = useState(false);
  const donePct = Math.round(CHECKLIST.filter(c => c.done).length / CHECKLIST.length * 100);

  return (
    <div style={{ fontFamily: "var(--font-sans, system-ui)", background: "#F1EFE8", minHeight: 700, borderRadius: 8, overflow: "hidden" }}>

      {/* NAV – vollständige App-Nav (nicht mehr Registrierungs-Nav) */}
      <div style={{ background: "#1a1a18", padding: "10px 20px", fontSize: 13, display: "flex", alignItems: "center", gap: 16, borderRadius: "8px 8px 0 0" }}>
        <span style={{ fontWeight: 700, color: "#fff" }}>DiveLogix360</span>
        <span style={{ color: "#5F5E5A" }}>|</span>
        <span style={{ color: "#888780", fontSize: 11 }}>{SCHOOL.name}</span>
        <div style={{ marginLeft: "auto", display: "flex", gap: 20, fontSize: 12 }}>
          <span style={{ color: "#fff", fontWeight: 500, borderBottom: "1px solid #185FA5", paddingBottom: 2 }}>Dashboard</span>
          <span style={{ color: "#888780" }}>Kunden</span>
          <span style={{ color: "#888780" }}>Geräte</span>
          <span style={{ color: "#888780" }}>Inspektionen</span>
          <span style={{ color: "#888780" }}>Einstellungen</span>
          <span style={{ color: "#D3D1C7", fontWeight: 500 }}>{SCHOOL.admin}</span>
        </div>
      </div>

      <div style={{ padding: "20px 24px" }}>

        {/* ── WILLKOMMENS-BANNER (einmalig, schliessbar) ── */}
        {!dismissed && (
          <div style={{ background: "#EAF3DE", border: "1px solid #A8D08D", borderRadius: 10, padding: "16px 20px", marginBottom: 20, display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16 }}>
            <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
              <div style={{ width: 40, height: 40, borderRadius: "50%", background: "#3B6D11", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20, flexShrink: 0 }}>🎉</div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 500, color: "#1a1a18", marginBottom: 4 }}>
                  Willkommen, {SCHOOL.admin}! Ihre Tauchschule ist jetzt aktiv.
                </div>
                <div style={{ fontSize: 12, color: "#3B6D11" }}>
                  Die Registrierung ist abgeschlossen. Legen Sie jetzt mit den ersten Schritten los.
                </div>
              </div>
            </div>
            <button onClick={() => setDismissed(true)}
              style={{ background: "none", border: "none", fontSize: 16, color: "#3B6D11", cursor: "pointer", padding: 0, flexShrink: 0 }}>✕</button>
          </div>
        )}

        {/* ── TITEL ── */}
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
          <h1 style={{ fontSize: 20, fontWeight: 500, color: "#1a1a18", margin: 0 }}>Dashboard</h1>
          <span style={{ background: "#E6F1FB", color: "#185FA5", fontSize: 11, fontWeight: 500, padding: "2px 8px", borderRadius: 20 }}>OB-06</span>
        </div>
        <div style={{ fontSize: 12, color: "#888780", marginBottom: 20 }}>
          <span style={{ fontFamily: "monospace" }}>{SCHOOL.slug}</span>
          <span style={{ margin: "0 8px", color: "#D3D1C7" }}>·</span>
          <span style={{ background: PLAN_COLOR.bg, color: PLAN_COLOR.color, padding: "1px 8px", borderRadius: 20, fontSize: 11 }}>{SCHOOL.plan}</span>
        </div>

        {/* ── STATISTIK-KARTEN (alle 0) ── */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 20 }}>
          {[
            { label: "Mitarbeiter",  value: "0", unit: "erfasst",       color: "#185FA5", bg: "#E6F1FB" },
            { label: "Kunden",       value: "0", unit: "erfasst",       color: "#534AB7", bg: "#EEEDFE" },
            { label: "Ausrüstung",   value: "0", unit: "Teile gesamt",  color: "#3B6D11", bg: "#EAF3DE" },
          ].map(s => (
            <div key={s.label} style={{ background: "#fff", border: "1px solid #D3D1C7", borderRadius: 8, padding: "14px 16px" }}>
              <div style={{ fontSize: 11, color: "#888780", marginBottom: 6 }}>{s.label}</div>
              <div style={{ fontSize: 28, fontWeight: 700, color: s.color }}>{s.value}</div>
              <div style={{ fontSize: 10, color: "#B4B2A9", marginTop: 2 }}>{s.unit}</div>
            </div>
          ))}
        </div>

        {/* ── ZWEISPALTIGES LAYOUT ── */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 280px", gap: 16 }}>

          {/* LINKE SPALTE */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>

            {/* SCHNELLAKTIONEN */}
            <div style={{ background: "#fff", border: "1px solid #D3D1C7", borderRadius: 8, padding: "16px 18px" }}>
              <div style={{ fontSize: 11, fontWeight: 500, color: "#888780", textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 14 }}>Schnellaktionen</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                {QUICK_ACTIONS.map(a => (
                  <button key={a.label} onClick={() => alert(`→ ${a.screen}: ${a.label}`)}
                    style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 14px", background: "#F1EFE8", border: "1px solid #D3D1C7", borderRadius: 8, cursor: "pointer", textAlign: "left" }}>
                    <span style={{ fontSize: 20 }}>{a.icon}</span>
                    <div>
                      <div style={{ fontSize: 12, fontWeight: 500, color: "#1a1a18" }}>{a.label}</div>
                      <div style={{ fontSize: 10, color: "#888780", marginTop: 2 }}>{a.hint}</div>
                    </div>
                  </button>
                ))}
              </div>
            </div>

            {/* LEERE AKTIVITÄTSLISTE */}
            <div style={{ background: "#fff", border: "1px solid #D3D1C7", borderRadius: 8, padding: "16px 18px" }}>
              <div style={{ fontSize: 11, fontWeight: 500, color: "#888780", textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 14 }}>Letzte Aktivitäten</div>
              <div style={{ textAlign: "center", padding: "24px 0", color: "#B4B2A9" }}>
                <div style={{ fontSize: 32, marginBottom: 8 }}>📋</div>
                <div style={{ fontSize: 12 }}>Noch keine Aktivitäten vorhanden.</div>
                <div style={{ fontSize: 11, marginTop: 4 }}>Starten Sie mit einer Schnellaktion oben.</div>
              </div>
            </div>

          </div>

          {/* RECHTE SPALTE: Einrichtungs-Checkliste */}
          <div style={{ background: "#fff", border: "1px solid #D3D1C7", borderRadius: 8, padding: "16px 18px", alignSelf: "start" }}>
            <div style={{ fontSize: 11, fontWeight: 500, color: "#888780", textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 6 }}>Einrichtung</div>

            {/* Fortschritts-Balken */}
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
              <div style={{ flex: 1, height: 6, background: "#F1EFE8", borderRadius: 3, overflow: "hidden" }}>
                <div style={{ width: `${donePct}%`, height: "100%", background: "#3B6D11", borderRadius: 3 }} />
              </div>
              <span style={{ fontSize: 11, fontWeight: 600, color: "#3B6D11", whiteSpace: "nowrap" }}>{donePct}%</span>
            </div>

            {/* Checkliste */}
            {CHECKLIST.map((item, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10, paddingBottom: 10, borderBottom: i < CHECKLIST.length - 1 ? "1px solid #F1EFE8" : "none" }}>
                <div style={{ width: 20, height: 20, borderRadius: "50%", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11,
                  background: item.done ? "#EAF3DE" : "#F1EFE8",
                  color: item.done ? "#3B6D11" : "#B4B2A9",
                  border: item.done ? "none" : "1px solid #D3D1C7" }}>
                  {item.done ? "✓" : "○"}
                </div>
                <span style={{ fontSize: 11, color: item.done ? "#5F5E5A" : "#1a1a18", textDecoration: item.done ? "line-through" : "none" }}>
                  {item.label}
                </span>
              </div>
            ))}
          </div>

        </div>

        {/* SIMULATIONSHINWEIS */}
        <div style={{ marginTop: 16, padding: "10px 14px", background: "#FAEEDA", border: "1px solid #FAC775", borderRadius: 8, fontSize: 11, color: "#BA7517" }}>
          <strong>Wireframe-Simulation:</strong> Willkommens-Banner mit ✕ schliessbar. Schnellaktionen navigieren zu UC01–UC03 / TA-01. 3 Statistik-Karten zeigen Erstzustand (alle 0).
        </div>

        {/* METAINFO */}
        <div style={{ marginTop: 12, padding: "8px 12px", background: "#fff", border: "1px solid #D3D1C7", borderRadius: 6, fontSize: 10, color: "#888780" }}>
          Screen: OB-06  |  UC00 – Tenant-Onboarding  |  Akteur: tenant_admin  |  Onboarding abgeschlossen  |  v0.1 – April 2026
        </div>

      </div>
    </div>
  );
}