/* SpitiDaneio MVP — Login screen (split brand panel + working form) */
function Login() {
  const { Input, Button, Checkbox } = window.SpitiDaneioDesignSystem_91dff7;
  const {
    IconLock, IconUser, IconArrowRight, IconCheck, IconShield
  } = window;

  // demo credentials for the MVP
  const DEMO = { email: "kp@spitidaneio.com", password: "123firstdemo" };

  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [showPw, setShowPw] = React.useState(false);
  const [remember, setRemember] = React.useState(true);
  const [touched, setTouched] = React.useState({ email: false, password: false });
  const [status, setStatus] = React.useState("idle"); // idle | loading | error | success
  const [formError, setFormError] = React.useState("");

  const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
  const pwValid = password.length >= 6;

  const emailError = touched.email && !emailValid ?
  email.trim() === "" ? "Συμπλήρωσε το email σου." : "Μη έγκυρη διεύθυνση email." :
  undefined;
  const pwError = touched.password && !pwValid ?
  password === "" ? "Συμπλήρωσε τον κωδικό σου." : "Τουλάχιστον 6 χαρακτήρες." :
  undefined;

  function submit(e) {
    e?.preventDefault();
    setTouched({ email: true, password: true });
    setFormError("");
    if (!emailValid || !pwValid) return;
    setStatus("loading");
    // simulated auth round-trip
    setTimeout(() => {
      if (email.trim().toLowerCase() === DEMO.email && password === DEMO.password) {
        setStatus("success");
      } else {
        setStatus("error");
        setFormError("Λάθος email ή κωδικός. Δοκίμασε ξανά.");
      }
    }, 1100);
  }

  const loading = status === "loading";

  return (
    <div style={{ display: "flex", height: "100%", minHeight: 640 }}>
      {/* ---- brand panel ---- */}
      <div className="login-brand" style={{
        flex: "1 1 0", position: "relative", overflow: "hidden",
        background: "var(--gradient-navy)", display: "flex", flexDirection: "column",
        justifyContent: "center", alignItems: "center", textAlign: "center", gap: 46,
        padding: 48, color: "#fff"
      }}>
        {/* Brand graphic element — the bottom eaves/edge of the SpitiDaneio home
                                mark (the icon cropped to its lower band), the motif used across
                                spitidaneio.gr as cyan shapes intruding into imagery. A pair frames
                                the panel. */}
        <BrandSpike w={360} color="rgba(118,226,255,0.18)"
        style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)" }} />
        <BrandSpike w={300} color="rgba(118,226,255,0.10)"
        style={{ position: "absolute", bottom: 0, left: "50%", transform: "translateX(-50%) rotate(180deg)" }} />
        <img src="assets/spitidaneio-logo-white.svg" alt="SpitiDaneio" style={{ height: 45, position: "absolute", top: 48, left: "50%", transform: "translateX(-50%)", margin: "0px" }} />
        <div style={{ position: "relative" }}>
          <h2 style={{ fontSize: 40, lineHeight: 1.1, letterSpacing: "-0.02em", color: "#fff", margin: "0 0 16px" }}>
            Το σπίτι σου,<br />ένα βήμα πιο κοντά.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--navy-200)", maxWidth: 380, margin: "0 auto" }}>
            Με <b style={{ color: "#fff", fontWeight: 700 }}>ένα μόνο έγγραφο</b> βλέπεις σε 2 λεπτά πόσο μπορείς να δανειστείς.
          </p>
        </div>
        <ul style={{ listStyle: "none", margin: 0, padding: 0, position: "relative", display: "flex", flexDirection: "column", gap: 18, textAlign: "left", maxWidth: 380 }}>
          {[
            "Έξυπνο πιστοληπτικό προφίλ από ένα μόνο έγγραφο",
            "Bonus Tool kit: Αγορά vs Ενοίκιο",
            "Σύγκριση προϊόντων & αίτηση online — δωρεάν"
          ].map((t, i) =>
            <li key={i} style={{ display: "flex", alignItems: "center", gap: 14, fontFamily: "var(--font-sans)", fontSize: 15.5, lineHeight: 1.4, color: "#fff" }}>
              <span style={{
                flex: "0 0 auto", width: 26, height: 26, borderRadius: "50%",
                background: "rgba(118,226,255,0.16)", color: "var(--cyan-300, #76E2FF)",
                fontWeight: 700, fontSize: 14,
                display: "flex", alignItems: "center", justifyContent: "center"
              }}>
                {i + 1}
              </span>
              {t}
            </li>
          )}
        </ul>
        <div style={{ position: "absolute", bottom: 48, left: 0, right: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--navy-200)", fontFamily: "var(--font-sans)", fontSize: 13, gap: "6px" }}>
          <IconShield size={16} /> Ασφαλής σύνδεση · Εποπτεία ΤτΕ · <img src="assets/iso-27001-white.png" alt="ISO 27001" style={{ height: 36, opacity: 0.72 }} /> · <img src="assets/gdpr-white.png" alt="GDPR" style={{ height: 36, opacity: 0.72 }} />
        </div>
      </div>

      {/* ---- form panel ---- */}
      <div style={{ flex: "1 1 0", display: "flex", alignItems: "center", justifyContent: "center", padding: 44, background: "var(--neutral-0)", position: "relative" }}>
        {/* mobile-only logo — visible when brand panel is hidden */}
        <img src="assets/spitidaneio-logo-full-color.svg" alt="SpitiDaneio" className="mobile-logo"
        style={{ position: "absolute", top: 28, left: "50%", transform: "translateX(-50%)", height: 42, margin: "0px" }} />
        {status === "success" ? <SuccessPanel email={email} /> :
        <form onSubmit={submit} style={{ width: "100%", maxWidth: 384 }}>
            <h1 style={{ fontSize: 30, letterSpacing: "-0.02em", color: "var(--navy-700)", margin: "0 0 8px" }}>Σύνδεση</h1>
            <p style={{ fontSize: 15, color: "var(--text-muted)", margin: "0 0 28px" }}>Καλώς ήρθες πίσω. Συνέχισε την αίτησή σου.</p>

            {formError &&
          <div role="alert" style={{
            display: "flex", alignItems: "center", gap: 10, marginBottom: 18,
            padding: "12px 16px", borderRadius: "var(--radius-md)",
            background: "var(--danger-100)", color: "var(--danger-600)",
            fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 700
          }}>
                {formError}
              </div>
          }

            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <Input
              label="Email" type="email" placeholder="name@email.com" autoComplete="username"
              value={email} disabled={loading}
              onChange={(e) => {setEmail(e.target.value);if (formError) setFormError("");}}
              onBlur={() => setTouched((t) => ({ ...t, email: true }))}
              error={emailError}
              prefix={<IconUser size={18} />} />
            
              <Input
              label="Κωδικός" type={showPw ? "text" : "password"} placeholder="••••••" autoComplete="current-password"
              value={password} disabled={loading}
              onChange={(e) => {setPassword(e.target.value);if (formError) setFormError("");}}
              onBlur={() => setTouched((t) => ({ ...t, password: true }))}
              error={pwError}
              prefix={<IconLock size={18} />}
              suffix={
              <button type="button" onClick={() => setShowPw((v) => !v)}
              style={{ border: "none", background: "transparent", cursor: "pointer", color: "var(--navy-600)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 700, padding: 0 }}>
                    {showPw ? "Απόκρυψη" : "Εμφάνιση"}
                  </button>
              } />
            
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <Checkbox checked={remember} onChange={setRemember} label="Να με θυμάσαι" />
                <a href="#" onClick={(e) => e.preventDefault()} style={{ fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 700, color: "var(--navy-600)" }}>Ξέχασες τον κωδικό;</a>
              </div>
              <Button
              type="submit" variant="primary" size="lg" fullWidth disabled={loading}
              iconRight={loading ?
              <SpinIcon /> :
              <IconArrowRight size={18} />}>
              
                {loading ? "Σύνδεση…" : "Σύνδεση"}
              </Button>
            </div>

            <p style={{ textAlign: "center", fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-muted)", marginTop: 24 }}>
              Δεν έχεις λογαριασμό; <a href="#" onClick={(e) => e.preventDefault()} style={{ fontWeight: 700, color: "var(--navy-600)" }}>Κάνε εγγραφή</a>
            </p>
          </form>
        }
      </div>
    </div>);

}

/* Brand graphic element — the SpitiDaneio home mark cropped to its bottom edge
   (the exact path from the brand kit, viewBox showing only the lower band).
   Points downward; rotate 180deg to point up. */
function BrandSpike({ w, color, style }) {
  return (
    <svg width={w} height={w * 87 / 284} viewBox="0 0 284 87" fill="none" aria-hidden="true"
    style={{ display: "block", ...style }}>
      <path d="M89.222 66.208c30.58 26.519 75.822 26.519 106.402 0l88.299-76.561v-114.415c0-45.36-36.511-82.135-81.547-82.135h-16.788L156.824-89.126a31.283 31.283 0 0116.652 27.696c0 17.276-13.901 31.277-31.053 31.277S111.37-44.154 111.37-61.43a31.281 31.281 0 0116.652-27.696L99.258-206.903H82.47c-45.036 0-81.547 36.775-81.547 82.135v114.415l88.299 76.561z" fill={color} />
    </svg>);

}

function SpinIcon() {
  return (
    <svg className="sd-spin" width="18" height="18" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
      <path d="M12 3a9 9 0 1 0 9 9" />
    </svg>);

}

function SuccessPanel({ email }) {
  const { IconCheck } = window;
  const { Button } = window.SpitiDaneioDesignSystem_91dff7;
  React.useEffect(() => {
    const t = setTimeout(() => { window.location.href = "Dashboard.html"; }, 1400);
    return () => clearTimeout(t);
  }, []);
  return (
    <div style={{ width: "100%", maxWidth: 384, textAlign: "center" }}>
      <div style={{
        width: 64, height: 64, margin: "0 auto 22px", borderRadius: "var(--radius-pill)",
        background: "var(--cyan-100)", color: "var(--navy-700)",
        display: "flex", alignItems: "center", justifyContent: "center",
        boxShadow: "var(--shadow-accent)"
      }}>
        <IconCheck size={30} />
      </div>
      <h1 style={{ fontSize: 28, letterSpacing: "-0.02em", color: "var(--navy-700)", margin: "0 0 10px" }}>Συνδέθηκες! 👋</h1>
      <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--text-muted)", margin: "0 0 24px" }}>
        Καλώς ήρθες πίσω, {email}. Σε μεταφέρουμε στον πίνακα ελέγχου…
      </p>
      <Button variant="primary" onClick={() => { window.location.href = "Dashboard.html"; }} iconRight={<window.IconArrowRight size={18} />}>Συνέχεια στον πίνακα</Button>
    </div>);

}

Object.assign(window, { Login });