/* ===== Auth — Login view ===== */
const LoginView = ({ onLogin }) => {
  const [email,    setEmail]    = React.useState('');
  const [password, setPassword] = React.useState('');
  const [loading,  setLoading]  = React.useState(false);
  const [error,    setError]    = React.useState(null);

  const submit = async (e) => {
    e.preventDefault();
    setError(null);
    setLoading(true);
    const { error: err } = await window.sb.auth.signInWithPassword({ email, password });
    setLoading(false);
    if (err) {
      setError(err.message === 'Invalid login credentials'
        ? 'Email o password non corretti.'
        : err.message);
    }
    // onLogin viene chiamato via onAuthStateChange in app.jsx
  };

  return (
    <div style={{
      display:'flex', alignItems:'center', justifyContent:'center',
      height:'100vh', background:'var(--bg2)', fontFamily:'var(--ff)'
    }}>
      <div style={{
        background:'var(--bg)', border:'1px solid var(--line)',
        borderRadius:16, padding:'40px 36px', width:320,
        boxShadow:'0 8px 32px rgba(0,0,0,.08)'
      }}>
        <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:32}}>
          <div className="mark" style={{width:36, height:36, borderRadius:9, fontSize:14}}>29</div>
          <div>
            <div style={{fontWeight:700, fontSize:15, color:'var(--ink)'}}>Ventinove</div>
            <div style={{fontSize:12, color:'var(--ink3)'}}>Dashboard Cantieri</div>
          </div>
        </div>

        <form onSubmit={submit} style={{display:'flex', flexDirection:'column', gap:14}}>
          <div style={{display:'flex', flexDirection:'column', gap:5}}>
            <label style={{fontSize:12, fontWeight:500, color:'var(--ink2)'}}>Email</label>
            <input
              type="email" value={email} onChange={e=>setEmail(e.target.value)}
              required autoFocus autoComplete="email"
              style={{
                border:'1px solid var(--line)', borderRadius:8,
                padding:'9px 12px', fontSize:14, fontFamily:'var(--ff)',
                background:'var(--bg)', color:'var(--ink)', outline:'none'
              }}
            />
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:5}}>
            <label style={{fontSize:12, fontWeight:500, color:'var(--ink2)'}}>Password</label>
            <input
              type="password" value={password} onChange={e=>setPassword(e.target.value)}
              required autoComplete="current-password"
              style={{
                border:'1px solid var(--line)', borderRadius:8,
                padding:'9px 12px', fontSize:14, fontFamily:'var(--ff)',
                background:'var(--bg)', color:'var(--ink)', outline:'none'
              }}
            />
          </div>

          {error && (
            <div style={{
              fontSize:13, color:'#c0392b', background:'#fdf3f2',
              border:'1px solid #f5c5c0', borderRadius:7, padding:'8px 12px'
            }}>{error}</div>
          )}

          <button
            type="submit" className="btn primary"
            disabled={loading}
            style={{marginTop:4, justifyContent:'center', opacity: loading ? .7 : 1}}
          >
            {loading ? 'Accesso in corso…' : 'Accedi'}
          </button>
        </form>
      </div>
    </div>
  );
};