// OLLYMEN Store OS — Login screen
const { useState: useStateLogin } = React;

function LoginScreen({ onLogin }) {
  const D = window.DATA;
  const [mode, setMode] = useStateLogin("owner"); // 'owner' | 'staff'
  const [email, setEmail] = useStateLogin("owner@olimen.co.kr");
  const [pw, setPw] = useStateLogin("••••");

  return (
    <div className="login-wrap">
      {/* Left — brand panel */}
      <div className="login-side">
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div className="sb-mark" style={{ width: 36, height: 36, fontSize: 16 }}>올</div>
          <div>
            <div style={{ fontWeight: 700, fontSize: 16, letterSpacing: "-0.01em" }}>OLLYMEN</div>
            <div className="mono" style={{ fontSize: 11, opacity: .7, letterSpacing: ".08em" }}>STORE&nbsp;OS</div>
          </div>
        </div>

        <div style={{ marginTop: 60, maxWidth: 460 }}>
          <div className="tagline-big" style={{ fontFamily: "var(--font-display)", fontSize: 34, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.18 }}>
            매장 운영과<br/>신규 지점 오픈을<br/>한 곳에서 관리합니다.
          </div>
          <div style={{ marginTop: 18, color: "oklch(0.88 0.012 70)", fontSize: 14, lineHeight: 1.6 }}>
            강남점의 운영 기준을 그대로 복제해, 매장이 늘어나도 같은 맛과 같은 운영을 유지합니다.
          </div>
        </div>

        <div className="login-stats" style={{ marginTop: "auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, paddingTop: 40 }}>
          <SidePanelStat label="운영 중" value="1" sub="강남 빗썸금융타워점" />
          <SidePanelStat label="오픈 준비" value="1" sub="서울역그랜드점 · D-18" />
          <SidePanelStat label="오늘 마감 체크" value="92" unit="%" sub="강남점 · 23:00 기준" />
          <SidePanelStat label="확인 필요" value="6" sub="알림 · 사진 · 이슈" />
        </div>

        <div style={{ marginTop: 28, display: "flex", alignItems: "center", gap: 10, color: "oklch(0.85 0.012 70)", fontSize: 12 }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "oklch(0.78 0.10 115)", boxShadow: "0 0 0 3px oklch(0.78 0.10 115 / 0.25)" }}></span>
          <span className="mono" style={{ letterSpacing: ".05em" }}>All systems operational · POS · Mobile · Reports</span>
        </div>
      </div>

      {/* Right — form */}
      <div className="login-form-wrap">
        <div className="login-mobile-brand" style={{ alignItems: "center", gap: 10, marginBottom: 18 }}>
          <div className="sb-mark" style={{ width: 30, height: 30, fontSize: 13 }}>올</div>
          <div>
            <div style={{ fontWeight: 700, fontSize: 14, letterSpacing: "-0.01em" }}>OLLYMEN</div>
            <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".08em" }}>STORE&nbsp;OS · v1.4</div>
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--muted)", fontSize: 12 }}>
          <span className="mono">{window.DATA.today}</span>
          <span>·</span>
          <span>한국어</span>
        </div>
        <h1 style={{ fontSize: 28, fontWeight: 650, letterSpacing: "-0.02em", margin: "10px 0 6px" }}>로그인</h1>
        <div style={{ color: "var(--muted)", fontSize: 13.5 }}>역할에 맞는 화면으로 이동합니다.</div>

        {/* role toggle */}
        <div style={{
          marginTop: 22, display: "grid", gridTemplateColumns: "1fr 1fr",
          background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 10, padding: 4, gap: 4,
        }}>
          <button
            onClick={() => setMode("owner")}
            style={{
              height: 38, borderRadius: 7, fontWeight: 600, fontSize: 13,
              background: mode === "owner" ? "var(--ramen)" : "transparent",
              color: mode === "owner" ? "oklch(0.98 0.01 60)" : "var(--ink-2)",
            }}
          >관리자 / 대표</button>
          <button
            onClick={() => setMode("staff")}
            style={{
              height: 38, borderRadius: 7, fontWeight: 600, fontSize: 13,
              background: mode === "staff" ? "var(--olive)" : "transparent",
              color: mode === "staff" ? "oklch(0.98 0.01 100)" : "var(--ink-2)",
            }}
          >직원 모바일</button>
        </div>

        {mode === "owner" ? (
          <div style={{ marginTop: 18 }}>
            <label className="input-label">이메일</label>
            <input className="input" value={email} onChange={e => setEmail(e.target.value)} />
            <div style={{ height: 14 }}/>
            <label className="input-label" style={{ display: "flex", justifyContent: "space-between" }}>
              <span>비밀번호</span>
              <a style={{ color: "var(--muted)", fontWeight: 500 }}>비밀번호 찾기</a>
            </label>
            <input className="input" type="password" value={pw} onChange={e => setPw(e.target.value)} />
            <div style={{ height: 20 }}/>
            <button className="btn primary lg block" onClick={() => onLogin("owner")}>관리자로 로그인 {I.arrow()}</button>
          </div>
        ) : (
          <div style={{ marginTop: 18 }}>
            <label className="input-label">직원 코드</label>
            <input className="input mono" defaultValue="GANGNAM-01" />
            <div style={{ height: 14 }}/>
            <label className="input-label">PIN</label>
            <input className="input mono" type="password" defaultValue="1234" />
            <div style={{ height: 20 }}/>
            <button className="btn olive lg block" onClick={() => onLogin("staff")}>직원 모드 시작 {I.arrow()}</button>
          </div>
        )}

        <div style={{ marginTop: 24, padding: 12, borderRadius: 10, background: "var(--surface)", border: "1px dashed var(--line-strong)" }}>
          <div style={{ fontSize: 11.5, color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".06em", fontWeight: 600, marginBottom: 6 }}>샘플 계정 · DEMO</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, fontSize: 12 }}>
            <div><div className="muted">Owner</div><div className="mono">owner@olimen.co.kr</div></div>
            <div><div className="muted">Manager</div><div className="mono">manager@olimen.co.kr</div></div>
            <div><div className="muted">Staff</div><div className="mono">GANGNAM-01 / 1234</div></div>
          </div>
        </div>

        <div style={{ marginTop: 28, fontSize: 11.5, color: "var(--muted)", display: "flex", justifyContent: "space-between" }}>
          <span>© 2026 OLLYMEN F&B Korea</span>
          <span>v1.4.2 · 한국어</span>
        </div>
      </div>
    </div>
  );
}

function SidePanelStat({ label, value, unit, sub }) {
  return (
    <div style={{
      padding: 14, borderRadius: 10,
      background: "oklch(1 0 0 / 0.04)",
      border: "1px solid oklch(1 0 0 / 0.08)",
    }}>
      <div className="mono" style={{ fontSize: 10.5, opacity: .65, letterSpacing: ".08em", textTransform: "uppercase" }}>{label}</div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 600, letterSpacing: "-0.02em", marginTop: 4 }}>
        {value}{unit && <span style={{ fontSize: 14, opacity: .6, marginLeft: 2 }}>{unit}</span>}
      </div>
      <div style={{ fontSize: 11.5, opacity: .7, marginTop: 2 }}>{sub}</div>
    </div>
  );
}

window.LoginScreen = LoginScreen;