// ===== Login / Role Selection with Authentication =====
const { useState: useStateL } = React;

function LoginScreen({ onLogin }) {
  const [pickedRole, setPickedRole] = useStateL("induk");
  const [username, setUsername] = useStateL("");
  const [password, setPassword] = useStateL("");
  const [loginError, setLoginError] = useStateL("");
  const [isLoading, setIsLoading] = useStateL(false);
  const [showSuccess, setShowSuccess] = useStateL(false);
  const [successUser, setSuccessUser] = useStateL("");
  const [expandedGroups, setExpandedGroups] = useStateL({});
  const roles = window.IDSS.ROLES;

  const handleSubmit = (e) => {
    e?.preventDefault();
    setLoginError("");
    setIsLoading(true);

    // Validate inputs
    if (!username || !password) {
      setLoginError("Username dan password harus diisi");
      setIsLoading(false);
      return;
    }

    // Check credentials
    const result = window.validateLogin(username, password);
    if (!result.valid) {
      setLoginError(result.error);
      window.showToast(`❌ ${result.error}`, "error");
      setIsLoading(false);
      return;
    }

    // Verify the selected role matches the account's role exactly
    if (result.user.role !== pickedRole) {
      setLoginError("Akun tidak sesuai dengan role yang dipilih");
      window.showToast("❌ Akun tidak sesuai dengan role yang dipilih", "error");
      setIsLoading(false);
      return;
    }

    // Login successful
    const user = result.user;
    const finalRole = pickedRole; // Use the role they selected, not just the account's base role
    sessionStorage.setItem("authedUser", username);
    sessionStorage.setItem("authedRole", finalRole);
    sessionStorage.setItem("userName", user.name);

    // Show success modal
    setSuccessUser(user.name);
    setShowSuccess(true);

    // Auto-navigate after 2.5 seconds
    setTimeout(() => {
      onLogin(finalRole);
    }, 2500);
  };

  return (
    <div className="login-shell">
      <aside className="login-aside" style={{
        backgroundImage: `
          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 800"><path d="M0,280 Q360,180 720,280 T1440,280 L1440,800 L0,800 Z" fill="rgba(255,255,255,0.18)"/><path d="M0,350 Q360,250 720,350 T1440,350 L1440,800 L0,800 Z" fill="rgba(255,255,255,0.12)"/><path d="M0,420 Q360,320 720,420 T1440,420 L1440,800 L0,800 Z" fill="rgba(255,255,255,0.08)"/><path d="M0,500 Q360,400 720,500 T1440,500 L1440,800 L0,800 Z" fill="rgba(255,255,255,0.05)"/></svg>'),
          linear-gradient(135deg, #0a2f5c 0%, #1a4a8a 50%, #0d3b70 100%)
        `,
        backgroundSize: "cover, cover",
        backgroundPosition: "center, center",
        backgroundAttachment: "fixed",
        position: "relative",
        overflow: "hidden"
      }}>
        <div style={{
          position: "absolute",
          top: 0, left: 0, right: 0, bottom: 0,
          background: "radial-gradient(circle at 20% 50%, rgba(255,255,255,0.05) 0%, transparent 50%)",
          pointerEvents: "none"
        }}/>
        <div style={{
          position: "relative", zIndex: 10,
          background: "#fff", borderRadius: 10,
          padding: "12px 20px",
          display: "inline-flex", alignItems: "center", gap: 22,
          boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
          alignSelf: "flex-start",
          flexWrap: "wrap"
        }}>
          {[
            { src: "assets/logo-tanoto.png", alt: "Tanoto", h: 38 },
            { src: "assets/logo-bappenas.png", alt: "Bappenas", h: 42 },
            { src: "assets/logo-seafast.png", alt: "SEAFAST", h: 32 },
            { src: "assets/logo-cs.png", alt: "C-System", h: 38 }
          ].map((l, i) => (
            <img key={i} src={l.src} alt={l.alt}
              style={{ height: l.h, width: "auto", maxWidth: 140, objectFit: "contain", display: "block" }}/>
          ))}
        </div>

        <div style={{ marginTop: "auto", maxWidth: 520, position: "relative", zIndex: 10 }}>
          <div className="eyebrow" style={{ color: "rgba(255,255,255,0.7)", marginBottom: 12 }}>Sistem Pendukung Keputusan</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 38, fontWeight: 600, lineHeight: 1.15, letterSpacing: "-0.02em", margin: 0 }}>
            Dari ladang ke piring siswa,<br/>terkoordinasi dalam satu sistem.
          </h1>
          <p style={{ marginTop: 18, fontSize: 14, color: "rgba(255,255,255,0.82)", lineHeight: 1.65, maxWidth: 480 }}>
            Platform terpadu yang membantu Anda merencanakan pasokan bahan baku, memilih pemasok terbaik,
            menyusun menu bergizi sesuai anggaran, dan memantau kualitas makanan dari dapur sampai ke sekolah —
            dalam satu alur kerja yang sederhana.
          </p>
        </div>
      </aside>

      <main className="login-form-wrap">
        <form className="login-form" onSubmit={handleSubmit}>
          <div className="eyebrow" style={{ color: "var(--primary)" }}>Masuk ke sistem</div>
          <h2 className="page-title" style={{ marginTop: 8, marginBottom: 6 }}>Pilih peran Anda</h2>
          <p className="muted" style={{ marginTop: 0, marginBottom: 22, fontSize: 13 }}>
            Setiap peran memiliki dashboard awal dan submodul yang berbeda sesuai tanggung jawab di rantai pasok MBG.
          </p>

          {/* Error message display */}
          {loginError && (
            <div style={{
              marginBottom: 16, padding: 12, background: "var(--danger-50)",
              border: "1px solid var(--danger-100)", borderRadius: "var(--radius-lg)",
              color: "var(--danger)", fontSize: 13
            }}>
              ❌ {loginError}
            </div>
          )}

          <div className="col" style={{ gap: 8 }}>
            {(() => {
              const roleOrder = ["supplier", "supplier_tani", "supplier_koperasi", "supplier_umkm", "supplier_besar", "agro", "induk", "satelit", "penerima"];
              const isDapurExpanded = expandedGroups.dapur;
              const isSupplierExpanded = expandedGroups.supplier;

              return (
                <>
                  {roleOrder.map(roleId => {
                    const r = roles[roleId];
                    if (!r) return null;

                    // Dapur Group Header + Sub-items
                    if (roleId === "induk") {
                      return (
                        <React.Fragment key="dapur-group-section">
                          <button type="button" onClick={() => setExpandedGroups(g => ({ ...g, dapur: !g.dapur }))}
                            style={{
                              display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 14, alignItems: "center",
                              padding: 14, borderRadius: "var(--radius-lg)",
                              border: `1.5px solid ${["induk", "satelit"].includes(pickedRole) ? "var(--primary)" : "var(--line)"}`,
                              background: ["induk", "satelit"].includes(pickedRole) ? "var(--primary-50)" : "var(--surface)",
                              cursor: "pointer", transition: "all 0.3s ease",
                              textAlign: "left", fontSize: 13.5, fontWeight: 600, color: "inherit", fontFamily: "inherit"
                            }}>
                            <span style={{ fontSize: 16, display: "inline-block", transition: "transform 0.3s ease", transform: isDapurExpanded ? "rotate(0deg)" : "rotate(-90deg)" }}>▼</span>
                            <div>
                              <div style={{ fontWeight: 600, fontSize: 13.5 }}>Dapur</div>
                              <div style={{ fontSize: 12, color: "var(--ink-3)", fontWeight: 400, marginTop: 2 }}>Induk & Satelit</div>
                            </div>
                            {["induk", "satelit"].includes(pickedRole) && <div className="avatar" style={{ background: "linear-gradient(135deg, var(--primary), var(--primary-700))" }}>✓</div>}
                          </button>
                          <div style={{
                            maxHeight: isDapurExpanded ? "500px" : "0",
                            opacity: isDapurExpanded ? 1 : 0,
                            transition: "max-height 0.3s ease, opacity 0.3s ease",
                            overflow: "hidden"
                          }}>
                            <label style={{
                              display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 14, alignItems: "center",
                              padding: 14, paddingLeft: 40, borderRadius: "var(--radius-lg)",
                              border: `1.5px solid ${pickedRole === r.id ? "var(--primary)" : "var(--line)"}`,
                              background: pickedRole === r.id ? "var(--primary-50)" : "var(--surface)",
                              cursor: "pointer", transition: "all 0.3s ease",
                              marginTop: isDapurExpanded ? 8 : 0
                            }}>
                              <input type="radio" name="role" value={r.id} checked={pickedRole === r.id}
                                onChange={() => setPickedRole(r.id)}
                                style={{ accentColor: "var(--primary)", width: 16, height: 16 }}/>
                              <div>
                                <div style={{ fontWeight: 600, fontSize: 13.5 }}>{r.name}</div>
                              </div>
                              <div className="avatar" style={{ background: pickedRole === r.id ? "linear-gradient(135deg, var(--primary), var(--primary-700))" : "var(--ink-4)" }}>{r.initials}</div>
                            </label>
                          </div>
                        </React.Fragment>
                      );
                    }

                    // Dapur Satelit sub-item (show when expanded)
                    if (roleId === "satelit") {
                      return (
                        <div key={r.id} style={{
                          maxHeight: isDapurExpanded ? "500px" : "0",
                          opacity: isDapurExpanded ? 1 : 0,
                          transition: "max-height 0.3s ease, opacity 0.3s ease",
                          overflow: "hidden"
                        }}>
                          <label style={{
                            display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 14, alignItems: "center",
                            padding: 14, paddingLeft: 40, borderRadius: "var(--radius-lg)",
                            border: `1.5px solid ${pickedRole === r.id ? "var(--primary)" : "var(--line)"}`,
                            background: pickedRole === r.id ? "var(--primary-50)" : "var(--surface)",
                            cursor: "pointer", transition: "all 0.3s ease",
                            marginTop: isDapurExpanded ? 8 : 0
                          }}>
                            <input type="radio" name="role" value={r.id} checked={pickedRole === r.id}
                              onChange={() => setPickedRole(r.id)}
                              style={{ accentColor: "var(--primary)", width: 16, height: 16 }}/>
                            <div>
                              <div style={{ fontWeight: 600, fontSize: 13.5 }}>{r.name}</div>
                            </div>
                            <div className="avatar" style={{ background: pickedRole === r.id ? "linear-gradient(135deg, var(--primary), var(--primary-700))" : "var(--ink-4)" }}>{r.initials}</div>
                          </label>
                        </div>
                      );
                    }

                    // Supplier Group Header
                    if (roleId === "supplier") {
                      return (
                        <React.Fragment key="supplier-group-section">
                          <button type="button" onClick={() => setExpandedGroups(g => ({ ...g, supplier: !g.supplier }))}
                            style={{
                              display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 14, alignItems: "center",
                              padding: 14, borderRadius: "var(--radius-lg)",
                              border: `1.5px solid ${["supplier_tani", "supplier_koperasi", "supplier_umkm", "supplier_besar"].includes(pickedRole) ? "var(--primary)" : "var(--line)"}`,
                              background: ["supplier_tani", "supplier_koperasi", "supplier_umkm", "supplier_besar"].includes(pickedRole) ? "var(--primary-50)" : "var(--surface)",
                              cursor: "pointer", transition: "all 0.3s ease",
                              textAlign: "left", fontSize: 13.5, fontWeight: 600, color: "inherit", fontFamily: "inherit"
                            }}>
                            <span style={{ fontSize: 16, display: "inline-block", transition: "transform 0.3s ease", transform: isSupplierExpanded ? "rotate(0deg)" : "rotate(-90deg)" }}>▼</span>
                            <div>
                              <div style={{ fontWeight: 600, fontSize: 13.5 }}>Supplier Pangan</div>
                              <div style={{ fontSize: 12, color: "var(--ink-3)", fontWeight: 400, marginTop: 2 }}>Kelompok Tani, Koperasi, UMKM, Pengusaha Besar</div>
                            </div>
                            {["supplier_tani", "supplier_koperasi", "supplier_umkm", "supplier_besar"].includes(pickedRole) && <div className="avatar" style={{ background: "linear-gradient(135deg, var(--primary), var(--primary-700))" }}>✓</div>}
                          </button>
                          <div style={{
                            maxHeight: isSupplierExpanded ? "1000px" : "0",
                            opacity: isSupplierExpanded ? 1 : 0,
                            transition: "max-height 0.3s ease, opacity 0.3s ease",
                            overflow: "hidden"
                          }}>
                            {["supplier_tani", "supplier_koperasi", "supplier_umkm", "supplier_besar"].map(supplierId => {
                              const sr = roles[supplierId];
                              if (!sr) return null;
                              return (
                                <label key={sr.id} style={{
                                  display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 14, alignItems: "center",
                                  padding: 14, paddingLeft: 40, borderRadius: "var(--radius-lg)",
                                  border: `1.5px solid ${pickedRole === sr.id ? "var(--primary)" : "var(--line)"}`,
                                  background: pickedRole === sr.id ? "var(--primary-50)" : "var(--surface)",
                                  cursor: "pointer", transition: "all 0.3s ease",
                                  marginTop: 8
                                }}>
                                  <input type="radio" name="role" value={sr.id} checked={pickedRole === sr.id}
                                    onChange={() => setPickedRole(sr.id)}
                                    style={{ accentColor: "var(--primary)", width: 16, height: 16 }}/>
                                  <div>
                                    <div style={{ fontWeight: 600, fontSize: 13.5 }}>{sr.name}</div>
                                  </div>
                                  <div className="avatar" style={{ background: pickedRole === sr.id ? "linear-gradient(135deg, var(--primary), var(--primary-700))" : "var(--ink-4)" }}>{sr.initials}</div>
                                </label>
                              );
                            })}
                          </div>
                        </React.Fragment>
                      );
                    }

                    // Skip supplier items (they're rendered inside the expanded container now)
                    if (["supplier_tani", "supplier_koperasi", "supplier_umkm", "supplier_besar"].includes(roleId)) {
                      return null;
                    }

                    // Other roles (Agro, Penerima)
                    if (!["supplier", "supplier_tani", "supplier_koperasi", "supplier_umkm", "supplier_besar", "induk", "satelit"].includes(roleId)) {
                      return (
                        <label key={r.id} style={{
                          display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 14, alignItems: "center",
                          padding: 14, borderRadius: "var(--radius-lg)",
                          border: `1.5px solid ${pickedRole === r.id ? "var(--primary)" : "var(--line)"}`,
                          background: pickedRole === r.id ? "var(--primary-50)" : "var(--surface)",
                          cursor: "pointer", transition: "all 0.3s ease"
                        }}>
                          <input type="radio" name="role" value={r.id} checked={pickedRole === r.id}
                            onChange={() => setPickedRole(r.id)}
                            style={{ accentColor: "var(--primary)", width: 16, height: 16 }}/>
                          <div>
                            <div style={{ fontWeight: 600, fontSize: 13.5 }}>{r.name}</div>
                          </div>
                          <div className="avatar" style={{ background: pickedRole === r.id ? "linear-gradient(135deg, var(--primary), var(--primary-700))" : "var(--ink-4)" }}>{r.initials}</div>
                        </label>
                      );
                    }

                    return null;
                  })}
                </>
              );
            })()}
          </div>

          <div className="grid cols-2" style={{ marginTop: 18, gap: 12 }}>
            <div className="field">
              <label>Username</label>
              <input className="input" placeholder="agro1, induk1, etc" value={username} onChange={e => setUsername(e.target.value)} disabled={isLoading}/>
            </div>
            <div className="field">
              <label>Password</label>
              <input className="input" type="password" placeholder="••••••••" value={password} onChange={e => setPassword(e.target.value)} disabled={isLoading}/>
            </div>
          </div>

          <div className="row between" style={{ marginTop: 16 }}>
            <label style={{ display: "flex", gap: 6, alignItems: "center", fontSize: 12, color: "var(--ink-2)" }}>
              <input type="checkbox" defaultChecked style={{ accentColor: "var(--primary)" }}/> Ingat saya di perangkat ini
            </label>
            <a href="#" style={{ fontSize: 12, color: "var(--primary)", textDecoration: "none", fontWeight: 500 }}>Lupa sandi?</a>
          </div>

          <button type="submit" className="btn primary" style={{ width: "100%", marginTop: 18, padding: "11px 14px", fontSize: 13.5, justifyContent: "center" }} disabled={isLoading}>
            {isLoading ? "Masuk..." : "Masuk →"}
          </button>
        </form>
      </main>

      {/* Success Modal */}
      {showSuccess && (
        <div style={{
          position: "fixed", top: 0, left: 0, right: 0, bottom: 0,
          background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center",
          zIndex: 9999, animation: "fadeIn 0.3s ease"
        }}>
          <div style={{
            background: "#fff", borderRadius: 32, padding: 48,
            textAlign: "center", maxWidth: 320, boxShadow: "0 10px 40px rgba(0,0,0,0.2)",
            animation: "slideUp 0.4s ease"
          }}>
            <div style={{
              width: 80, height: 80, background: "linear-gradient(135deg, var(--primary), var(--primary-700))",
              borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center",
              margin: "0 auto 20px", position: "relative", overflow: "hidden"
            }}>
              <svg width="50" height="50" viewBox="0 0 50 50" style={{ animation: "clockSpin 2s linear infinite" }}>
                <circle cx="25" cy="25" r="22" stroke="#fff" strokeWidth="2" fill="none"/>
                <circle cx="25" cy="25" r="3" fill="#fff"/>
                <line x1="25" y1="8" x2="25" y2="15" stroke="#fff" strokeWidth="2" strokeLinecap="round"/>
                <line x1="25" y1="25" x2="25" y2="10" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" opacity="0.8"/>
              </svg>
            </div>
            <h2 style={{ fontSize: 22, fontWeight: 600, margin: "0 0 24px 0", color: "var(--ink)" }}>Selamat Datang</h2>
            <p style={{ fontSize: 12, color: "var(--ink-3)", margin: 0 }}>Mengalihkan ke dashboard...</p>
          </div>
        </div>
      )}

      <style>{`
        @keyframes clockSpin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes slideUp {
          from { transform: translateY(20px); opacity: 0; }
          to { transform: translateY(0); opacity: 1; }
        }
      `}</style>
    </div>
  );
}

window.LoginScreen = LoginScreen;