import { useState } from "react";

const CODES = [
  "A3F7-KP2M", "B8XQ-LN4R", "C2WE-TZ9J", "D6YH-MV5S",
  "E1GU-NB3K", "F4RC-QD7W", "G9PL-XA6T", "H5JS-YC8F",
];

export default function OB04() {
  const [confirmed, setConfirmed]   = useState(false);
  const [downloaded, setDownloaded] = useState(false);
  const [copied, setCopied]         = useState(false);
  const [submitted, setSubmitted]   = useState(false);

  const handleCopy = () => {
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleDownload = () => setDownloaded(true);

  const handleSubmit = () => {
    if (confirmed) setSubmitted(true);
  };

  if (submitted) {
    return (
      <div style={{ fontFamily: "var(--font-sans, system-ui)", background: "#F1EFE8", minHeight: 400, borderRadius: 8, overflow: "hidden" }}>
        <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" }}>Registrierung</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: 350, padding: 24 }}>
          <div style={{ textAlign: "center" }}>
            <div style={{ width: 56, height: 56, borderRadius: "50%", background: "#EAF3DE", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 24, marginBottom: 16 }}>✓</div>
            <div style={{ fontSize: 18, fontWeight: 500, color: "#1a1a18", marginBottom: 8 }}>Recovery-Codes gesichert</div>
            <div style={{ fontSize: 13, color: "#5F5E5A", marginBottom: 24 }}>Weiter zum Schulprofil.</div>
            <button onClick={() => alert("→ OB-05: Schulprofil ausfüllen")}
              style={{ padding: "10px 28px", fontSize: 13, fontWeight: 500, background: "#185FA5", border: "none", borderRadius: 6, color: "#fff", cursor: "pointer" }}>
              Weiter zum Schulprofil →
            </button>
          </div>
        </div>
      </div>
    );
  }

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

      {/* NAV */}
      <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" }}>Registrierung</span>
      </div>

      {/* FORTSCHRITTSLEISTE */}
      <div style={{ background: "#fff", borderBottom: "1px solid #D3D1C7", padding: "12px 24px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 0, maxWidth: 480, margin: "0 auto" }}>
          {[
            { n: "1", label: "Link",     done: true,  active: false },
            { n: "2", label: "Passwort", done: true,  active: false },
            { n: "3", label: "2FA",      done: true,  active: false },
            { n: "4", label: "Codes",    done: false, active: true  },
            { n: "5", label: "Profil",   done: false, active: false },
          ].map((s, i, arr) => (
            <div key={s.n} style={{ display: "flex", alignItems: "center", flex: i < arr.length - 1 ? 1 : 0 }}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
                <div style={{ width: 28, height: 28, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 600,
                  background: s.done ? "#EAF3DE" : s.active ? "#185FA5" : "#F1EFE8",
                  color: s.done ? "#3B6D11" : s.active ? "#fff" : "#B4B2A9",
                  border: s.active ? "2px solid #185FA5" : "2px solid transparent" }}>
                  {s.done ? "✓" : s.n}
                </div>
                <span style={{ fontSize: 9, color: s.active ? "#185FA5" : s.done ? "#3B6D11" : "#B4B2A9", fontWeight: s.active ? 600 : 400, whiteSpace: "nowrap" }}>{s.label}</span>
              </div>
              {i < arr.length - 1 && (
                <div style={{ flex: 1, height: 2, background: s.done ? "#3B6D11" : "#D3D1C7", margin: "0 6px", marginBottom: 16 }} />
              )}
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: "flex", justifyContent: "center", padding: "24px 24px 16px" }}>
        <div style={{ width: "100%", maxWidth: 480 }}>

          {/* TITEL */}
          <div style={{ marginBottom: 16 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
              <h1 style={{ fontSize: 20, fontWeight: 500, color: "#1a1a18", margin: 0 }}>Recovery-Codes sichern</h1>
              <span style={{ background: "#E6F1FB", color: "#185FA5", fontSize: 11, fontWeight: 500, padding: "2px 8px", borderRadius: 20 }}>OB-04</span>
            </div>
            <p style={{ fontSize: 12, color: "#5F5E5A", margin: 0 }}>Diese Codes ermöglichen den Login falls Sie Ihr 2FA-Gerät verlieren.</p>
          </div>

          {/* WARN-BANNER */}
          <div style={{ background: "#FCEBEB", border: "1px solid #F7C1C1", borderRadius: 8, padding: "12px 16px", marginBottom: 16, fontSize: 12, color: "#A32D2D" }}>
            <strong>⚠ Wichtig:</strong> Diese Codes werden nur <strong>einmalig</strong> angezeigt und können danach nicht mehr abgerufen werden. Bewahren Sie sie an einem sicheren Ort auf.
          </div>

          {/* CODES-CARD */}
          <div style={{ background: "#fff", border: "1px solid #D3D1C7", borderRadius: 10, padding: "20px 24px", marginBottom: 16 }}>

            <div style={{ fontSize: 11, fontWeight: 500, color: "#888780", textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 14 }}>
              Ihre 8 Recovery-Codes
            </div>

            {/* Codes-Raster */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 16 }}>
              {CODES.map((code, i) => (
                <div key={code} style={{ display: "flex", alignItems: "center", gap: 10, background: "#F1EFE8", borderRadius: 6, padding: "10px 14px" }}>
                  <span style={{ fontSize: 10, color: "#888780", minWidth: 16 }}>{i + 1}.</span>
                  <code style={{ fontSize: 14, fontFamily: "monospace", fontWeight: 600, color: "#1a1a18", letterSpacing: 1 }}>{code}</code>
                </div>
              ))}
            </div>

            {/* Aktions-Buttons */}
            <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
              <button onClick={handleCopy}
                style={{ flex: 1, padding: "8px", fontSize: 12, background: copied ? "#EAF3DE" : "#fff", border: `1px solid ${copied ? "#3B6D11" : "#B4B2A9"}`, borderRadius: 6, color: copied ? "#3B6D11" : "#5F5E5A", cursor: "pointer", fontWeight: copied ? 500 : 400 }}>
                {copied ? "✓ Kopiert" : "📋 Alle kopieren"}
              </button>
              <button onClick={handleDownload}
                style={{ flex: 1, padding: "8px", fontSize: 12, background: downloaded ? "#EAF3DE" : "#fff", border: `1px solid ${downloaded ? "#3B6D11" : "#B4B2A9"}`, borderRadius: 6, color: downloaded ? "#3B6D11" : "#5F5E5A", cursor: "pointer", fontWeight: downloaded ? 500 : 400 }}>
                {downloaded ? "✓ Heruntergeladen" : "⬇ Als .txt herunterladen"}
              </button>
            </div>

            {/* Info-Hinweis */}
            <div style={{ background: "#E6F1FB", border: "1px solid #B5D4F4", borderRadius: 6, padding: "10px 14px", fontSize: 11, color: "#185FA5" }}>
              ℹ Jeder Code kann nur <strong>einmal</strong> verwendet werden. Nach Verwendung wird er automatisch ungültig. Bei Verlust aller Codes kann nur der Superadmin helfen (A6).
            </div>
          </div>

          {/* BESTÄTIGUNGS-CHECKBOX */}
          <div style={{ background: "#fff", border: `2px solid ${confirmed ? "#3B6D11" : "#D3D1C7"}`, borderRadius: 10, padding: "16px 20px", marginBottom: 16, transition: "border-color 0.2s" }}>
            <label style={{ display: "flex", alignItems: "flex-start", gap: 12, cursor: "pointer" }}>
              <input type="checkbox" checked={confirmed} onChange={e => setConfirmed(e.target.checked)}
                style={{ marginTop: 2, width: 18, height: 18, cursor: "pointer" }} />
              <div>
                <div style={{ fontSize: 13, fontWeight: 500, color: "#1a1a18", marginBottom: 4 }}>
                  Ich habe die Recovery-Codes gesichert <span style={{ color: "#A32D2D" }}>*</span>
                </div>
                <div style={{ fontSize: 11, color: "#5F5E5A" }}>
                  Ich bestätige, dass ich alle 8 Codes an einem sicheren Ort gespeichert habe und verstehe, dass sie danach nicht mehr angezeigt werden.
                </div>
              </div>
            </label>
          </div>

          {/* BUTTON */}
          <button onClick={handleSubmit} disabled={!confirmed}
            style={{ width: "100%", padding: "12px", fontSize: 13, fontWeight: 500,
              background: confirmed ? "#185FA5" : "#D3D1C7",
              border: "none", borderRadius: 8, color: "#fff",
              cursor: confirmed ? "pointer" : "not-allowed" }}>
            Codes gesichert – weiter zum Schulprofil →
          </button>

          {!confirmed && (
            <div style={{ textAlign: "center", fontSize: 11, color: "#888780", marginTop: 8 }}>
              Bitte bestätigen Sie zuerst, dass Sie die Codes gesichert haben.
            </div>
          )}

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

        </div>
      </div>
    </div>
  );
}