// Landing / Login page
const LoginPage = ({ t, lang, setLang, onLogin }) => {
  const [email, setEmail] = React.useState("nathanon.t@gmail.com");
  const [pwd, setPwd] = React.useState("••••••••••");

  return (
    <div className="login-shell" data-screen-label="Login">
      <div className="login-pane">
        <div className="login-brand">
          <div className="brand-mark"><span>V</span></div>
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.1 }}>
            <span className="brand-name">Verena</span>
            <span className="brand-sub">Utility Records</span>
          </div>
          <div style={{ marginLeft: "auto" }}>
            <div className="lang-switch">
              <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
              <button className={lang === "th" ? "active" : ""} onClick={() => setLang("th")}>TH</button>
            </div>
          </div>
        </div>

        <div className="login-form-wrap">
          {lang === "en" ? (
            <>
              <h1 className="login-title">Welcome to Verena Utility Records</h1>
              <p className="login-th-title">ยินดีต้อนรับสู่ระบบบันทึกค่าสาธารณูปโภค บริษัทเวอรีน่า</p>
            </>
          ) : (
            <>
              <h1 className="login-title">ยินดีต้อนรับสู่ระบบบันทึกค่าสาธารณูปโภค บริษัทเวอรีน่า</h1>
              <p className="login-th-title">Welcome to Verena Utility Records</p>
            </>
          )}

          <form onSubmit={(e) => { e.preventDefault(); onLogin(); }} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div className="field">
              <label>{t("email")}</label>
              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="name@verena.co.th" />
            </div>
            <div className="field">
              <label>{t("password")}</label>
              <input type="password" value={pwd} onChange={(e) => setPwd(e.target.value)} placeholder="••••••••" />
            </div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 12.5 }}>
              <label style={{ display: "flex", alignItems: "center", gap: 6, color: "var(--text-2)" }}>
                <input type="checkbox" defaultChecked />
                {t("remember")}
              </label>
              <a href="#" style={{ color: "var(--accent)", textDecoration: "none", fontWeight: 600 }}>{t("forgot")}</a>
            </div>
            <button type="submit" className="btn accent" style={{ justifyContent: "center", padding: "10px 14px", fontSize: 14 }}>
              {t("sign_in")}
              <Icon name="chevronRight" />
            </button>

            <div className="divider-or">{t("or_sso")}</div>

            <button type="button" className="sso-btn">
              <span className="glyph" style={{ color: "#EA4335" }}>G</span>
              {t("sso_google")}
            </button>
            <button type="button" className="sso-btn">
              <span className="glyph" style={{ color: "#0078D4" }}>▦</span>
              {t("sso_microsoft")}
            </button>
          </form>
        </div>

        <div className="login-foot">{t("footer_legal")}</div>
      </div>

      <div className="login-art">
        <div style={{ maxWidth: 460, margin: "0 auto" }}>
          <div style={{ fontSize: 11.5, color: "var(--text-3)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 10 }}>
            {lang === "en" ? "Today · Live preview" : "วันนี้ · มุมมองแบบสด"}
          </div>
          <div className="login-art-card">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8 }}>
              <div>
                <div style={{ fontWeight: 700, fontSize: 14 }}>{lang === "en" ? "Electricity, this month" : "ค่าไฟฟ้า เดือนนี้"}</div>
                <div style={{ fontSize: 11.5, color: "var(--text-3)" }}>{lang === "en" ? "5 buildings · all meters" : "5 อาคาร · ทุกมิเตอร์"}</div>
              </div>
              <span className="pill admin"><span className="pdot"></span>+5.1%</span>
            </div>
            <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: "-0.02em", fontFeatureSettings: "'tnum'" }}>
              51,200 <span style={{ fontSize: 14, color: "var(--text-3)", fontWeight: 600 }}>kWh</span>
            </div>
            <div style={{ marginTop: 8 }}>
              <Spark values={[42100, 44200, 46800, 45900, 47200, 44300, 41200, 39800, 42100, 45400, 48700, 51200]} width={420} height={50} />
            </div>
          </div>

          <div className="login-art-card" style={{ marginTop: 14 }}>
            <div style={{ fontWeight: 700, fontSize: 13, marginBottom: 6 }}>{lang === "en" ? "Recent submissions" : "บันทึกล่าสุด"}</div>
            <div className="login-art-row">
              <span className="login-art-label">ME-001 · {lang === "en" ? "Building 1" : "อาคาร 1"}</span>
              <span className="login-art-val">48,210 kWh</span>
            </div>
            <div className="login-art-row">
              <span className="login-art-label">MW-001 · {lang === "en" ? "Guest House" : "บ้านรับรอง"}</span>
              <span className="login-art-val">2,841 m³</span>
            </div>
            <div className="login-art-row">
              <span className="login-art-label">ME-003 · {lang === "en" ? "HQ Floor 8" : "สนญ. ชั้น 8"}</span>
              <span className="login-art-val">12,104 kWh</span>
            </div>
            <div className="login-art-row">
              <span className="login-art-label">MN-001 · {lang === "en" ? "Fibre Link HQ" : "ไฟเบอร์ สนญ."}</span>
              <span className="login-art-val">1,000 Mbps</span>
            </div>
          </div>

          <div style={{ marginTop: 18, fontSize: 11.5, color: "var(--text-3)", textAlign: "center", lineHeight: 1.6 }}>
            {lang === "en"
              ? "Connected to Google Workspace · admin alerts → nathanon.t@gmail.com"
              : "เชื่อมต่อกับ Google Workspace · ส่งแจ้งเตือนผู้ดูแล → nathanon.t@gmail.com"}
          </div>
        </div>
      </div>
    </div>
  );
};

window.LoginPage = LoginPage;