/* login.jsx — tela de autenticação VER Clipping */

const LoginPage = ({ onLogin, onDemo }) => {
  const [email, setEmail]     = React.useState("");
  const [pass, setPass]       = React.useState("");
  const [error, setError]     = React.useState("");
  const [loading, setLoading] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setError(""); setLoading(true);
    try {
      const res = await api.login(email, pass);
      api.setToken(res.token);
      onLogin(res.user);
    } catch (err) {
      setError(err.message || "Usuário ou senha incorretos");
    } finally { setLoading(false); }
  };

  return (
    <div style={{ minHeight: "100vh", background: "var(--ink-50)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 16 }}>
      <div style={{ width: 400, background: "var(--white)", borderRadius: 14, border: "1px solid var(--ink-200)", boxShadow: "0 4px 24px rgba(0,0,0,.10)", overflow: "hidden" }}>
        <div style={{ background: "#1B3A6B", padding: "28px 32px" }}>
          <div style={{ color: "#fff", fontSize: 11, fontWeight: 600, letterSpacing: ".08em", textTransform: "uppercase", opacity: .7 }}>VER MKT · Santos, SP</div>
          <div style={{ color: "#fff", fontSize: 24, fontWeight: 700, marginTop: 6 }}>VER Clipping</div>
          <div style={{ color: "#fff", fontSize: 13, opacity: .75, marginTop: 4 }}>Sistema de monitoramento e curadoria de notícias</div>
        </div>
        <form onSubmit={submit} style={{ padding: "28px 32px 24px" }}>
          <div className="field">
            <label className="field__label">E-mail</label>
            <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)}
              placeholder="seu@vermkt.com.br" autoFocus required />
          </div>
          <div className="field">
            <label className="field__label">Senha</label>
            <input className="input" type="password" value={pass} onChange={e => setPass(e.target.value)}
              placeholder="••••••••" required />
          </div>
          {error ? (
            <div style={{ background: "var(--err-100)", color: "var(--err-700)", borderRadius: 7, padding: "10px 14px", fontSize: 13, marginBottom: 14, display: "flex", gap: 8, alignItems: "center" }}>
              <Icon name="alert" style={{ width: 15, height: 15 }} /> {error}
            </div>
          ) : null}
          <button className="btn btn--primary" type="submit" disabled={loading}
            style={{ width: "100%", justifyContent: "center", padding: "11px 0", fontSize: 14 }}>
            {loading ? "Entrando…" : "Entrar"}
          </button>
        </form>

        <div style={{ padding: "0 32px 28px", display: "flex", flexDirection: "column", gap: 10 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ flex: 1, height: 1, background: "var(--ink-150)" }} />
            <span className="muted" style={{ fontSize: 12 }}>ou</span>
            <div style={{ flex: 1, height: 1, background: "var(--ink-150)" }} />
          </div>
          <button className="btn" onClick={onDemo}
            style={{ width: "100%", justifyContent: "center", padding: "11px 0", fontSize: 14, borderStyle: "dashed" }}>
            <Icon name="play" /> Explorar modo demo (sem banco de dados)
          </button>
        </div>
      </div>

      <div className="muted" style={{ fontSize: 11.5, textAlign: "center" }}>
        Com backend: <span className="mono">admin@vermkt.com.br</span> / <span className="mono">admin123</span>
      </div>
    </div>
  );
};

window.LoginPage = LoginPage;