/* global React */

function LoginScreen({ onLogin, error: externalError }) {
  const [u, setU] = useState("administrator");
  const [p, setP] = useState("");
  const [loading, setLoading] = useState(false);

  async function handleSubmit() {
    if (!u || !p) return;
    setLoading(true);
    await onLogin(u, p);
    setLoading(false);
  }

  function handleKeyDown(e) {
    if (e.key === "Enter") handleSubmit();
  }

  return (
    <div style={{
      minHeight: "100vh",
      display: "grid",
      gridTemplateColumns: "1fr 1fr",
      background: "var(--canvas)",
    }}>
      <div style={{
        padding: "56px 64px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        borderRight: "1px solid var(--line)",
        background: "var(--paper)",
      }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
          <span style={{ fontFamily: "var(--font-serif)", fontSize: 44, fontStyle: "italic", color: "var(--accent)", lineHeight: 1 }}>S</span>
          <span style={{ fontSize: 14, fontWeight: 600, letterSpacing: "0.02em" }}>Schedule A</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>v2026.04</span>
        </div>
        <div>
          <h1 style={{
            fontFamily: "var(--font-serif)",
            fontWeight: 400,
            fontSize: 72,
            lineHeight: 1.05,
            letterSpacing: "-0.02em",
            marginBottom: 24,
          }}>
            Составьте <em style={{ color: "var(--accent)" }}>расписание<br/>за час,</em><br/>а&nbsp;не за неделю.
          </h1>
          <p style={{ fontSize: 15, color: "var(--ink-3)", maxWidth: 440, lineHeight: 1.55 }}>
            Загрузите аудитории, Форму&nbsp;1 и кафедры — оптимизатор соберёт расписание
            без окошек, с учётом смен и родных корпусов. Правьте вручную через
            перетаскивание, когда потребуется.
          </p>
        </div>
        <div style={{ display: "flex", gap: 24, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>
          <div><span style={{ color: "var(--ink)" }}>732</span> &nbsp;занятий</div>
          <div><span style={{ color: "var(--ink)" }}>48</span> &nbsp;аудиторий</div>
          <div><span style={{ color: "var(--ink)" }}>24</span> &nbsp;группы</div>
          <div><span style={{ color: "var(--ink)" }}>&lt; 8с</span> &nbsp;генерация</div>
        </div>
      </div>
      <div style={{ display: "grid", placeItems: "center", padding: 40 }}>
        <div style={{ width: 380, display: "flex", flexDirection: "column", gap: 20 }}>
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8 }}>— ВХОД</div>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 40, lineHeight: 1 }}>Добро пожаловать</div>
          </div>
          <div className="field">
            <label className="field__label">Логин</label>
            <input
              className="input"
              value={u}
              onChange={e => setU(e.target.value)}
              onKeyDown={handleKeyDown}
              disabled={loading}
            />
          </div>
          <div className="field">
            <label className="field__label">Пароль</label>
            <input
              className="input"
              type="password"
              value={p}
              onChange={e => setP(e.target.value)}
              onKeyDown={handleKeyDown}
              disabled={loading}
            />
          </div>
          {externalError && (
            <div style={{
              padding: "10px 12px",
              background: "var(--danger-soft)",
              border: "1px solid var(--danger)",
              borderRadius: 6,
              fontSize: 13,
              color: "var(--danger)",
              lineHeight: 1.4,
            }}>
              {externalError}
            </div>
          )}
          <div style={{ display: "flex", gap: 10, marginTop: 4 }}>
            <button
              className="btn btn--primary btn--lg"
              style={{ flex: 1 }}
              onClick={handleSubmit}
              disabled={loading || !u || !p}
            >
              {loading ? "Вход…" : "Войти"}
            </button>
            <button className="btn btn--ghost btn--lg" disabled={loading}>Регистрация</button>
          </div>
          <div style={{ fontSize: 12, color: "var(--ink-3)", textAlign: "center", marginTop: 8, lineHeight: 1.5 }}>
            Данные каждого пользователя изолированы в отдельной схеме PostgreSQL.<br/>
            Нажмите <span className="kbd">Enter</span> для входа.
          </div>
        </div>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;