import { useState } from "react";

const RULES = [
  { id: "length",    label: "Mindestens 12 Zeichen",         test: (v) => v.length >= 12 },
  { id: "upper",     label: "Mindestens 1 Grossbuchstabe",   test: (v) => /[A-Z]/.test(v) },
  { id: "lower",     label: "Mindestens 1 Kleinbuchstabe",   test: (v) => /[a-z]/.test(v) },
  { id: "number",    label: "Mindestens 1 Zahl",             test: (v) => /[0-9]/.test(v) },
  { id: "special",   label: "Mindestens 1 Sonderzeichen",    test: (v) => /[^A-Za-z0-9]/.test(v) },
];

function strengthLabel(passed) {
  if (passed === 5) return { label: "Stark",        color: "#3B6D11", bg: "#EAF3DE" };
  if (passed >= 3)  return { label: "Mittel",       color: "#BA7517", bg: "#FAEEDA" };
  if (passed >= 1)  return { label: "Schwach",      color: "#A32D2D", bg: "#FCEBEB" };
  return              { label: "Kein Passwort",  color: "#B4B2A9", bg: "#F1EFE8" };
}

export default function OB02() {
  const [pw, setPw]           = useState("");
  const [pwConfirm, setPwConfirm] = useState("");
  const [showPw, setShowPw]   = useState(false);
  const [showPwC, setShowPwC] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [touched, setTouched] = useState(false);

  const results  = RULES.map(r => ({ ...r, ok: r.test(pw) }));
  const passed   = results.filter(r => r.ok).length;
  const allOk    = passed === 5;
  const matchOk  = pw === pwConfirm && pwConfirm.length > 0;
  const canSubmit = allOk && matchOk;
  const strength  = strengthLabel(passed);

  const handleSubmit = () => {
    setTouched(true);
    if (canSubmit) 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 }}>Passwort gesetzt</div>
            <div style={{ fontSize: 13, color: "#5F5E5A", marginBottom: 24 }}>Weiter zur 2FA-Einrichtung.</div>
            <button onClick={() => alert("→ OB-03: 2FA einrichten")}
              style={{ padding: "10px 28px", fontSize: 13, fontWeight: 500, background: "#185FA5", border: "none", borderRadius: 6, color: "#fff", cursor: "pointer" }}>
              Weiter zur 2FA-Einrichtung →
            </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: false, active: true  },
            { n: "3", label: "2FA",      done: false, active: false },
            { n: "4", label: "Codes",    done: false, active: false },
            { 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", alignItems: "flex-start", justifyContent: "center", padding: "24px 24px 16px" }}>
        <div style={{ width: "100%", maxWidth: 480 }}>

          {/* TITEL */}
          <div style={{ marginBottom: 20 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
              <h1 style={{ fontSize: 20, fontWeight: 500, color: "#1a1a18", margin: 0 }}>Passwort festlegen</h1>
              <span style={{ background: "#E6F1FB", color: "#185FA5", fontSize: 11, fontWeight: 500, padding: "2px 8px", borderRadius: 20 }}>OB-02</span>
            </div>
            <p style={{ fontSize: 12, color: "#5F5E5A", margin: 0 }}>Legen Sie ein sicheres Passwort für Ihren Account fest.</p>
          </div>

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

            {/* Passwort-Feld */}
            <div style={{ marginBottom: 16 }}>
              <label style={{ display: "block", fontSize: 12, fontWeight: 500, color: "#1a1a18", marginBottom: 5 }}>
                Neues Passwort <span style={{ color: "#A32D2D" }}>*</span>
              </label>
              <div style={{ position: "relative" }}>
                <input
                  type={showPw ? "text" : "password"}
                  value={pw}
                  onChange={e => { setPw(e.target.value); setTouched(true); }}
                  placeholder="Mindestens 12 Zeichen..."
                  style={{ width: "100%", boxSizing: "border-box", padding: "9px 40px 9px 12px", fontSize: 13,
                    border: `1px solid ${touched && !allOk ? "#A32D2D" : "#B4B2A9"}`, borderRadius: 6, outline: "none" }} />
                <button onClick={() => setShowPw(v => !v)}
                  style={{ position: "absolute", right: 10, top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", fontSize: 14, color: "#888780" }}>
                  {showPw ? "🙈" : "👁"}
                </button>
              </div>
            </div>

            {/* Stärke-Anzeige */}
            {pw.length > 0 && (
              <div style={{ marginBottom: 16 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
                  <span style={{ fontSize: 11, color: "#888780" }}>Passwortstärke</span>
                  <span style={{ background: strength.bg, color: strength.color, fontSize: 10, fontWeight: 500, padding: "1px 8px", borderRadius: 20 }}>{strength.label}</span>
                </div>
                <div style={{ display: "flex", gap: 4 }}>
                  {[1,2,3,4,5].map(i => (
                    <div key={i} style={{ flex: 1, height: 4, borderRadius: 2, background: i <= passed ? strength.color : "#E8E6DF" }} />
                  ))}
                </div>
              </div>
            )}

            {/* Anforderungen */}
            <div style={{ background: "#F1EFE8", borderRadius: 6, padding: "10px 14px", marginBottom: 16 }}>
              <div style={{ fontSize: 11, fontWeight: 500, color: "#5F5E5A", marginBottom: 8 }}>Passwort-Anforderungen (Plattform-Minimum)</div>
              {results.map(r => (
                <div key={r.id} style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 5, fontSize: 11 }}>
                  <span style={{ color: r.ok ? "#3B6D11" : touched ? "#A32D2D" : "#B4B2A9", fontWeight: 600, fontSize: 13 }}>
                    {r.ok ? "✓" : "○"}
                  </span>
                  <span style={{ color: r.ok ? "#3B6D11" : touched ? "#A32D2D" : "#5F5E5A" }}>{r.label}</span>
                </div>
              ))}
            </div>

            {/* Passwort bestätigen */}
            <div style={{ marginBottom: 4 }}>
              <label style={{ display: "block", fontSize: 12, fontWeight: 500, color: "#1a1a18", marginBottom: 5 }}>
                Passwort bestätigen <span style={{ color: "#A32D2D" }}>*</span>
              </label>
              <div style={{ position: "relative" }}>
                <input
                  type={showPwC ? "text" : "password"}
                  value={pwConfirm}
                  onChange={e => setPwConfirm(e.target.value)}
                  placeholder="Passwort wiederholen..."
                  style={{ width: "100%", boxSizing: "border-box", padding: "9px 40px 9px 12px", fontSize: 13,
                    border: `1px solid ${pwConfirm.length > 0 && !matchOk ? "#A32D2D" : "#B4B2A9"}`, borderRadius: 6, outline: "none" }} />
                <button onClick={() => setShowPwC(v => !v)}
                  style={{ position: "absolute", right: 10, top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", fontSize: 14, color: "#888780" }}>
                  {showPwC ? "🙈" : "👁"}
                </button>
              </div>
              {pwConfirm.length > 0 && !matchOk && (
                <div style={{ fontSize: 11, color: "#A32D2D", marginTop: 4 }}>⚠ Passwörter stimmen nicht überein</div>
              )}
              {pwConfirm.length > 0 && matchOk && (
                <div style={{ fontSize: 11, color: "#3B6D11", marginTop: 4 }}>✓ Passwörter stimmen überein</div>
              )}
            </div>
          </div>

          {/* SICHERHEITS-HINWEIS */}
          <div style={{ background: "#FAEEDA", border: "1px solid #FAC775", borderRadius: 6, padding: "10px 14px", fontSize: 11, color: "#BA7517", marginBottom: 20 }}>
            ⚠ Dieses Mindest-Passwort ist durch die Plattform vorgegeben und kann nicht unterschritten werden. Bewahren Sie Ihr Passwort sicher auf.
          </div>

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

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

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