import { useState } from "react";

// Token-Zustände simulieren
const TOKEN_STATES = {
  valid:   { status: "valid",   label: "Gültig",           expires: "23.04.2026 14:32" },
  expired: { status: "expired", label: "Abgelaufen (F3)",  expires: "20.04.2026 14:32" },
  used:    { status: "used",    label: "Bereits verwendet (F4)", expires: null },
};

export default function OB01() {
  const [tokenState, setTokenState] = useState("valid");
  const state = TOKEN_STATES[tokenState];

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

      {/* NAV – minimale öffentliche Variante */}
      <div style={{ background: "#1a1a18", padding: "10px 24px", display: "flex", alignItems: "center", justifyContent: "space-between", borderRadius: "8px 8px 0 0" }}>
        <span style={{ fontWeight: 700, color: "#fff", fontSize: 15 }}>DiveLogix360</span>
        <span style={{ fontSize: 11, color: "#888780" }}>Schulverwaltung für Tauchschulen</span>
      </div>

      {/* SIMULATOR-LEISTE */}
      <div style={{ background: "#1a1a18", borderTop: "1px solid #2a2a28", padding: "8px 24px", display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ fontSize: 10, color: "#888780" }}>Wireframe-Simulation – Token-Zustand:</span>
        {Object.entries(TOKEN_STATES).map(([key, val]) => (
          <button key={key} onClick={() => setTokenState(key)}
            style={{ fontSize: 10, padding: "3px 10px", borderRadius: 4, cursor: "pointer", fontWeight: tokenState === key ? 600 : 400,
              background: tokenState === key ? "#185FA5" : "transparent",
              border: `1px solid ${tokenState === key ? "#185FA5" : "#5F5E5A"}`,
              color: tokenState === key ? "#fff" : "#888780" }}>
            {val.label}
          </button>
        ))}
      </div>

      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: 500, padding: "40px 24px" }}>

        {/* ── HAPPY PATH: Token gültig ── */}
        {state.status === "valid" && (
          <div style={{ width: "100%", maxWidth: 480 }}>

            {/* Logo-Bereich */}
            <div style={{ textAlign: "center", marginBottom: 32 }}>
              <div style={{ width: 64, height: 64, borderRadius: 16, background: "#185FA5", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 28, marginBottom: 16 }}>
                🤿
              </div>
              <div style={{ fontSize: 22, fontWeight: 500, color: "#1a1a18", marginBottom: 6 }}>Willkommen bei DiveLogix360</div>
              <div style={{ fontSize: 13, color: "#5F5E5A" }}>Sie wurden eingeladen, Ihre Tauchschule zu registrieren.</div>
            </div>

            {/* Token-Info-Card */}
            <div style={{ background: "#fff", border: "1px solid #D3D1C7", borderRadius: 10, padding: "20px 24px", marginBottom: 20 }}>
              <div style={{ fontSize: 11, fontWeight: 500, color: "#888780", textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 14 }}>Einladungsdetails</div>
              {[
                ["Eingeladen als", "Tenant-Admin (Schulinhaber)"],
                ["Token-Status", <span style={{ background: "#EAF3DE", color: "#3B6D11", padding: "1px 8px", borderRadius: 20, fontSize: 11, fontWeight: 500 }}>✓ Gültig</span>],
                ["Gültig bis", state.expires],
              ].map(([label, value]) => (
                <div key={label} style={{ display: "flex", alignItems: "center", fontSize: 12, marginBottom: 10, paddingBottom: 10, borderBottom: "1px solid #F1EFE8" }}>
                  <span style={{ color: "#888780", minWidth: 140 }}>{label}</span>
                  <span style={{ color: "#1a1a18" }}>{value}</span>
                </div>
              ))}
            </div>

            {/* Info-Banner */}
            <div style={{ background: "#E6F1FB", border: "1px solid #B5D4F4", borderRadius: 6, padding: "10px 14px", fontSize: 11, color: "#185FA5", marginBottom: 24 }}>
              ℹ Im nächsten Schritt legen Sie Ihr Passwort fest und richten die Zwei-Faktor-Authentifizierung (2FA) ein. Dies dauert ca. 3–5 Minuten.
            </div>

            {/* Schritte-Übersicht */}
            <div style={{ background: "#fff", border: "1px solid #D3D1C7", borderRadius: 10, padding: "16px 20px", marginBottom: 24 }}>
              <div style={{ fontSize: 11, fontWeight: 500, color: "#888780", textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 12 }}>Ihre nächsten Schritte</div>
              {[
                { step: "1", label: "Passwort festlegen", screen: "OB-02", done: false },
                { step: "2", label: "2FA einrichten (Google Authenticator o.ä.)", screen: "OB-03", done: false },
                { step: "3", label: "Recovery-Codes sichern", screen: "OB-04", done: false },
                { step: "4", label: "Schulprofil ausfüllen", screen: "OB-05", done: false },
              ].map(({ step, label, screen, done }) => (
                <div key={step} style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 10 }}>
                  <div style={{ width: 24, height: 24, borderRadius: "50%", background: done ? "#EAF3DE" : "#E6F1FB", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600, color: done ? "#3B6D11" : "#185FA5", flexShrink: 0 }}>
                    {done ? "✓" : step}
                  </div>
                  <span style={{ fontSize: 12, color: "#1a1a18" }}>{label}</span>
                  <span style={{ marginLeft: "auto", fontSize: 10, color: "#B4B2A9" }}>{screen}</span>
                </div>
              ))}
            </div>

            {/* CTA-Button */}
            <button onClick={() => alert("→ OB-02: Passwort setzen")}
              style={{ width: "100%", padding: "13px", fontSize: 14, fontWeight: 500, background: "#185FA5", border: "none", borderRadius: 8, color: "#fff", cursor: "pointer" }}>
              Registrierung starten →
            </button>

            <div style={{ textAlign: "center", marginTop: 16, fontSize: 11, color: "#888780" }}>
              Probleme? Kontaktieren Sie Ihren DiveLogix360-Administrator.
            </div>
          </div>
        )}

        {/* ── FEHLERFALL F3: Token abgelaufen ── */}
        {state.status === "expired" && (
          <div style={{ width: "100%", maxWidth: 440, textAlign: "center" }}>
            <div style={{ width: 64, height: 64, borderRadius: "50%", background: "#FCEBEB", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 28, marginBottom: 20 }}>
              ⏱
            </div>
            <div style={{ fontSize: 20, fontWeight: 500, color: "#1a1a18", marginBottom: 8 }}>Dieser Link ist abgelaufen</div>
            <div style={{ fontSize: 13, color: "#5F5E5A", marginBottom: 24, lineHeight: 1.6 }}>
              Der Einladungslink war 72 Stunden gültig und ist am <strong>{state.expires}</strong> abgelaufen.
            </div>
            <div style={{ background: "#FCEBEB", border: "1px solid #F7C1C1", borderRadius: 8, padding: "14px 18px", marginBottom: 24, fontSize: 12, color: "#A32D2D", textAlign: "left" }}>
              <div style={{ fontWeight: 500, marginBottom: 6 }}>Fehlercode: F3 – Token abgelaufen</div>
              Bitte kontaktieren Sie die Tauchschule oder den DiveLogix360-Administrator, damit eine neue Einladung gesendet werden kann.
            </div>
            <button onClick={() => alert("E-Mail-Client öffnen")}
              style={{ padding: "10px 24px", fontSize: 13, background: "#fff", border: "1px solid #B4B2A9", borderRadius: 6, color: "#5F5E5A", cursor: "pointer" }}>
              Administrator kontaktieren
            </button>
          </div>
        )}

        {/* ── FEHLERFALL F4: Token bereits verwendet ── */}
        {state.status === "used" && (
          <div style={{ width: "100%", maxWidth: 440, textAlign: "center" }}>
            <div style={{ width: 64, height: 64, borderRadius: "50%", background: "#FAEEDA", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 28, marginBottom: 20 }}>
              🔒
            </div>
            <div style={{ fontSize: 20, fontWeight: 500, color: "#1a1a18", marginBottom: 8 }}>Dieser Link wurde bereits verwendet</div>
            <div style={{ fontSize: 13, color: "#5F5E5A", marginBottom: 24, lineHeight: 1.6 }}>
              Die Registrierung mit diesem Einladungslink wurde bereits abgeschlossen.
            </div>
            <div style={{ background: "#FAEEDA", border: "1px solid #FAC775", borderRadius: 8, padding: "14px 18px", marginBottom: 24, fontSize: 12, color: "#BA7517", textAlign: "left" }}>
              <div style={{ fontWeight: 500, marginBottom: 6 }}>Fehlercode: F4 – Token bereits verwendet</div>
              Falls Sie sich bereits registriert haben, melden Sie sich direkt an. Falls nicht, kontaktieren Sie den Administrator.
            </div>
            <div style={{ display: "flex", gap: 10, justifyContent: "center" }}>
              <button onClick={() => alert("→ Login-Screen")}
                style={{ padding: "10px 24px", fontSize: 13, background: "#185FA5", border: "none", borderRadius: 6, color: "#fff", cursor: "pointer", fontWeight: 500 }}>
                Zur Anmeldung
              </button>
              <button onClick={() => alert("E-Mail-Client öffnen")}
                style={{ padding: "10px 24px", fontSize: 13, background: "#fff", border: "1px solid #B4B2A9", borderRadius: 6, color: "#5F5E5A", cursor: "pointer" }}>
                Administrator kontaktieren
              </button>
            </div>
          </div>
        )}

      </div>

      {/* METAINFO */}
      <div style={{ margin: "0 24px 24px", padding: "10px 14px", background: "#fff", border: "1px solid #D3D1C7", borderRadius: 6, fontSize: 10, color: "#888780" }}>
        Screen: OB-01  |  UC00 – Tenant-Onboarding  |  Akteur: tenant_admin (öffentlich)  |  Folge-Screen: OB-02 (Happy Path) / Fehlermeldung F3 / F4  |  v0.1 – April 2026
      </div>
    </div>
  );
}