/* pages/login.jsx — login overlay on pure black with blurred dashboard
   card thumbnails visible behind. No atmospheric colour wash.

   Two roles: client (sees platform pages, no Configurações tab) and admin
   (Makali team, sees everything). Each role has its own stored credentials
   on the client record. Successful submit calls onLogin(role). Language is
   driven by client.market_code — never toggled here. */

function LoginPage({ lang, client, onLogin }) {
  const [role, setRole] = React.useState("client");
  const creds = client.users[role];
  const [username, setUsername] = React.useState(creds.username);
  const [password, setPassword] = React.useState(creds.password);
  const [error, setError] = React.useState(null);

  // When the role tab flips, prefill that role's credentials so the user
  // can submit immediately. This makes the prototype usable without typing.
  React.useEffect(() => {
    setUsername(client.users[role].username);
    setPassword(client.users[role].password);
    setError(null);
  }, [role, client]);

  const submit = (e) => {
    e.preventDefault();
    const expected = client.users[role];
    if (username === expected.username && password === expected.password) {
      onLogin(role);
    } else {
      setError(t("li.error", lang));
    }
  };

  return (
    <div className="login-bg">
      {/* Blurred dashboard card "thumbnails" — pure dark rectangles arranged
          like cards on a dashboard, blurred just enough to read as content.
          No coloured glow, no gradient wash. */}
      <div className="login-thumbs" aria-hidden="true">
        <div className="lt lt--sb" style={{top: "6vh", left: "4vw", width: 232, height: "88vh"}}>
          <div className="lt__bar" style={{width: 80, height: 14, marginTop: 16, marginLeft: 18}}/>
          <div className="lt__row"  style={{top: 60, left: 14, width: 200, height: 56, borderRadius: 12}}/>
          {[0,1,2,3,4].map(i => (
            <div key={i} className="lt__nav-item" style={{top: 136 + i*40, left: 18, width: 200, height: 30}}/>
          ))}
        </div>

        <div className="lt lt--filter" style={{top: "5vh", left: "calc(4vw + 248px)", right: "4vw", height: 56}}/>
        <div className="lt lt--kpi-row" style={{top: "calc(5vh + 76px)", left: "calc(4vw + 248px)", right: "4vw", height: 132}}>
          {[0,1,2,3,4,5].map(i => (
            <div key={i} className="lt__kpi" style={{flex: 1, height: "100%"}}>
              <div className="lt__bar" style={{width: 70, height: 9, margin: "16px 0 0 16px"}}/>
              <div className="lt__bar" style={{width: 110, height: 26, margin: "10px 0 0 16px"}}/>
              <div className="lt__bar" style={{width: 70, height: 11, margin: "10px 0 0 16px"}}/>
            </div>
          ))}
        </div>

        <div className="lt lt--chart" style={{top: "calc(5vh + 228px)", left: "calc(4vw + 248px)", width: "55%", height: 280}}>
          <div className="lt__bar" style={{width: 160, height: 14, margin: "20px 0 0 24px"}}/>
          <div className="lt__bar" style={{width: 90, height: 9, margin: "10px 0 0 24px"}}/>
          <div style={{position:"absolute", left: 24, right: 24, bottom: 24, height: 160, display: "flex", alignItems: "flex-end", gap: 4}}>
            {Array.from({length: 24}).map((_,i) => (
              <div key={i} style={{flex: 1, height: (30 + (i*5) % 120) + "px", background: "#1A1A1A", borderRadius: 2}}/>
            ))}
          </div>
        </div>

        <div className="lt" style={{top: "calc(5vh + 228px)", right: "4vw", width: 280, height: 132}}>
          <div className="lt__bar" style={{width: 100, height: 11, margin: "18px 0 0 18px"}}/>
          <div className="lt__bar" style={{width: 60, height: 9, margin: "8px 0 0 18px"}}/>
        </div>
        <div className="lt" style={{top: "calc(5vh + 372px)", right: "4vw", width: 280, height: 132}}>
          <div className="lt__bar" style={{width: 100, height: 11, margin: "18px 0 0 18px"}}/>
        </div>

        <div className="lt" style={{bottom: "5vh", left: "calc(4vw + 248px)", right: "4vw", height: 220}}>
          <div className="lt__bar" style={{width: 160, height: 14, margin: "20px 0 0 24px"}}/>
          {Array.from({length: 5}).map((_,i) => (
            <div key={i} style={{display:"flex", gap: 12, margin: "12px 24px 0"}}>
              <div className="lt__bar" style={{width: 200, height: 8}}/>
              <div className="lt__bar" style={{width: 80, height: 8}}/>
              <div className="lt__bar" style={{width: 80, height: 8, marginLeft: "auto"}}/>
              <div className="lt__bar" style={{width: 60, height: 8}}/>
              <div className="lt__bar" style={{width: 60, height: 8}}/>
            </div>
          ))}
        </div>
      </div>

      {/* Center card */}
      <div className="login-card">
        <img src="assets/logo-horizontal-color.png" alt="Makali" className="login-logo"/>

        <div>
          <div className="login-eyebrow">{t("li.eyebrow", lang)}</div>
          <h1 className="login-title">
            <span className="accent">{t("li.welcome", lang)}</span>
          </h1>
        </div>

        {/* Role selector */}
        <div className="login-roles" role="tablist">
          <button
            type="button"
            className={"login-roles__tab" + (role === "client" ? " is-on" : "")}
            onClick={() => setRole("client")}
            role="tab"
            aria-selected={role === "client"}
          >
            <Icon name="users" size={12}/>
            {t("li.role.client", lang)}
          </button>
          <button
            type="button"
            className={"login-roles__tab" + (role === "admin" ? " is-on" : "")}
            onClick={() => setRole("admin")}
            role="tab"
            aria-selected={role === "admin"}
          >
            <Icon name="shield" size={12}/>
            {t("li.role.admin", lang)}
          </button>
        </div>

        <form onSubmit={submit} style={{display:"flex", flexDirection:"column", gap: 18}}>
          <div className="login-field">
            <label>{role === "admin" ? t("li.role.username", lang) : t("li.email", lang)}</label>
            <input
              type={role === "admin" ? "text" : "email"}
              placeholder={role === "admin" ? "admin@makali.media" : t("li.email.ph", lang)}
              value={username}
              onChange={e => setUsername(e.target.value)}
            />
          </div>
          <div className="login-field">
            <label>{t("li.password", lang)}</label>
            <input type="password" placeholder={t("li.password.ph", lang)} value={password} onChange={e => setPassword(e.target.value)}/>
          </div>
          {error && (
            <div className="login-error">
              <Icon name="alert" size={12}/>
              {error}
            </div>
          )}
          <div className="login-row">
            <label className="login-remember">
              <input type="checkbox" defaultChecked/>
              {t("li.remember", lang)}
            </label>
            <button type="button" className="login-forgot">{t("li.forgot", lang)} →</button>
          </div>
          <button type="submit" className="btn-primary">
            {t("li.signin", lang)} <Icon name="arrow-right" size={14}/>
          </button>
        </form>

        <div className="login-foot">
          {t("li.foot", lang)} <button>{t("li.foot.cta", lang)} →</button>
        </div>
      </div>
    </div>
  );
}
window.LoginPage = LoginPage;