// ============================================================
// JuFlow — Login Screen
// ============================================================
const { useState: useStateL } = React;

const LoginScreen = ({ onLogin }) => {
  const [email, setEmail] = useStateL('demo@juflow.com');
  const [password, setPassword] = useStateL('demo123');
  const [showPwd, setShowPwd] = useStateL(false);
  const [loading, setLoading] = useStateL(false);
  const [error, setError] = useStateL('');

  const handleSubmit = (e) => {
    e.preventDefault();
    setError('');
    if (!email || !password) { setError('Preencha todos os campos.'); return; }
    setLoading(true);
    setTimeout(() => {
      if (email === 'demo@juflow.com' && password === 'demo123') {
        onLogin();
      } else {
        setError('E-mail ou senha inválidos. Use as credenciais do demo.');
        setLoading(false);
      }
    }, 900);
  };

  const fillDemo = () => {
    setEmail('demo@juflow.com');
    setPassword('demo123');
    setError('');
  };

  return (
    <div style={{
      minHeight:'100vh',
      background:'radial-gradient(ellipse at top, #0d2a5e 0%, #0A1F44 50%, #050d1f 100%)',
      display:'flex', alignItems:'center', justifyContent:'center',
      padding:'48px 24px', position:'relative', overflow:'hidden',
    }}>
      {/* ─── Background decoration ─── */}
      <div style={{ position:'absolute', inset:0, overflow:'hidden', pointerEvents:'none' }}>
        {/* Soft glows */}
        <div style={{ position:'absolute', top:'-15%', left:'-8%', width:520, height:520, borderRadius:'50%', background:'rgba(255,107,53,.10)', filter:'blur(80px)' }} />
        <div style={{ position:'absolute', bottom:'-15%', right:'-8%', width:480, height:480, borderRadius:'50%', background:'rgba(124,58,237,.08)', filter:'blur(80px)' }} />
        <div style={{ position:'absolute', top:'30%', right:'5%', width:300, height:300, borderRadius:'50%', background:'rgba(8,145,178,.06)', filter:'blur(60px)' }} />

        {/* Grid lines */}
        <svg style={{ position:'absolute', inset:0, width:'100%', height:'100%', opacity:.06 }}>
          <defs>
            <pattern id="grid" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
              <path d="M 60 0 L 0 0 0 60" fill="none" stroke="white" strokeWidth="1"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid)" />
        </svg>

        {/* Decorative outline icons */}
        <svg style={{ position:'absolute', top:'8%', right:'4%', width:280, height:280, opacity:.06 }} viewBox="0 0 100 100" fill="none" stroke="white" strokeWidth=".7">
          <rect x="14" y="20" width="72" height="64" rx="6" />
          <line x1="14" y1="34" x2="86" y2="34" />
          <line x1="30" y1="14" x2="30" y2="26" strokeWidth="1.4" strokeLinecap="round" />
          <line x1="70" y1="14" x2="70" y2="26" strokeWidth="1.4" strokeLinecap="round" />
          <circle cx="32" cy="50" r="2.5" fill="white" stroke="none" />
          <circle cx="50" cy="50" r="2.5" fill="white" stroke="none" />
          <circle cx="68" cy="50" r="2.5" fill="white" stroke="none" />
          <circle cx="32" cy="64" r="2.5" fill="white" stroke="none" />
          <circle cx="50" cy="64" r="2.5" fill="white" stroke="none" />
        </svg>
        <svg style={{ position:'absolute', bottom:'12%', left:'4%', width:260, height:260, opacity:.06 }} viewBox="0 0 100 100" fill="none" stroke="white" strokeWidth=".7">
          <circle cx="50" cy="50" r="36" />
          <line x1="50" y1="50" x2="50" y2="26" strokeLinecap="round" />
          <line x1="50" y1="50" x2="68" y2="50" strokeLinecap="round" />
          <circle cx="50" cy="50" r="2" fill="white" stroke="none" />
        </svg>
        <svg style={{ position:'absolute', top:'48%', left:'8%', width:120, height:120, opacity:.05 }} viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1">
          <path d="M3 12h4l3-9 4 18 3-9h4" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <svg style={{ position:'absolute', top:'18%', left:'12%', width:90, height:90, opacity:.05 }} viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" strokeLinejoin="round" />
        </svg>
      </div>

      <div style={{ width:'100%', maxWidth:520, position:'relative', zIndex:1, display:'flex', flexDirection:'column', alignItems:'center' }}>

        {/* ─── Hero ─── */}
        <div style={{ display:'flex', alignItems:'center', gap:14, marginBottom:24 }}>
          <svg width="42" height="42" viewBox="0 0 64 64" fill="none">
            <defs>
              <linearGradient id="lg-phone" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="#22D3EE" />
                <stop offset="55%" stopColor="#7C3AED" />
                <stop offset="100%" stopColor="#A855F7" />
              </linearGradient>
            </defs>
            <rect x="14" y="6" width="36" height="56" rx="6" stroke="url(#lg-phone)" strokeWidth="3" fill="none" />
            <line x1="26" y1="12" x2="38" y2="12" stroke="url(#lg-phone)" strokeWidth="2.5" strokeLinecap="round" />
            <rect x="29" y="54" width="6" height="2" rx="1" fill="url(#lg-phone)" />
            <line x1="14" y1="48" x2="50" y2="48" stroke="url(#lg-phone)" strokeWidth="1.6" />
            <path d="M27 26 L21 32 L27 38" stroke="url(#lg-phone)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none" />
            <path d="M37 26 L43 32 L37 38" stroke="url(#lg-phone)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none" />
            <line x1="34" y1="24" x2="30" y2="40" stroke="url(#lg-phone)" strokeWidth="3" strokeLinecap="round" />
            <circle cx="52" cy="10" r="1.5" fill="#A855F7" opacity=".8" />
            <circle cx="56" cy="14" r="1" fill="#A855F7" opacity=".6" />
          </svg>
          <div style={{ fontSize:26, fontWeight:800, color:'#fff', letterSpacing:'-.6px' }}>
            Juflow <span style={{ color:'#FF6B35' }}>Digital</span>
          </div>
        </div>

        <h1 style={{
          margin:0, textAlign:'center',
          fontSize:'clamp(26px, 4vw, 40px)', fontWeight:800, color:'#fff',
          letterSpacing:'-1px', lineHeight:1.15,
        }}>
          Sua clínica no controle,<br/>
          <span style={{ color:'#FF6B35' }}>da agenda ao faturamento.</span>
        </h1>

        <p style={{
          margin:'14px 0 0', textAlign:'center', maxWidth:540,
          fontSize:14, color:'rgba(255,255,255,.6)', lineHeight:1.6,
        }}>
          Agendamentos, clientes, prontuários e financeiro integrados — pronto pra usar
          no consultório, no celular e no escritório.
        </p>

        {/* ─── Card ─── */}
        <div style={{
          width:'100%', maxWidth:480, marginTop:36,
          background:'rgba(255,255,255,.04)',
          border:'1px solid rgba(255,255,255,.10)',
          borderRadius:20,
          padding:'28px 28px 24px',
          backdropFilter:'blur(12px)',
          WebkitBackdropFilter:'blur(12px)',
          boxShadow:'0 24px 64px rgba(0,0,0,.4)',
        }}>
          <h2 style={{ margin:'0 0 4px', fontSize:18, fontWeight:700, color:'#fff' }}>Bem-vindo de volta</h2>
          <p style={{ margin:'0 0 22px', fontSize:13, color:'rgba(255,255,255,.55)' }}>Entre com suas credenciais para acessar o sistema.</p>

          <form onSubmit={handleSubmit}>
            <div style={{ display:'flex', flexDirection:'column', gap:14 }}>

              <div>
                <label style={{ fontSize:12, fontWeight:600, color:'rgba(255,255,255,.7)', marginBottom:6, display:'block' }}>E-mail</label>
                <div style={{ position:'relative' }}>
                  <span style={{ position:'absolute', left:14, top:'50%', transform:'translateY(-50%)', display:'flex', pointerEvents:'none' }}>
                    <Icon name="Mail" size={16} color="rgba(255,255,255,.5)" />
                  </span>
                  <input
                    type="email"
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                    placeholder="seu@email.com"
                    required
                    style={{
                      width:'100%', boxSizing:'border-box',
                      padding:'12px 14px 12px 40px',
                      background:'rgba(255,255,255,.06)',
                      border:'1.5px solid rgba(255,255,255,.10)',
                      borderRadius:10, fontSize:14, color:'#fff',
                      outline:'none', transition:'border-color .15s, background .15s',
                    }}
                    onFocus={e => { e.currentTarget.style.borderColor='#FF6B35'; e.currentTarget.style.background='rgba(255,255,255,.08)'; }}
                    onBlur={e => { e.currentTarget.style.borderColor='rgba(255,255,255,.10)'; e.currentTarget.style.background='rgba(255,255,255,.06)'; }}
                  />
                </div>
              </div>

              <div>
                <label style={{ fontSize:12, fontWeight:600, color:'rgba(255,255,255,.7)', marginBottom:6, display:'block' }}>Senha</label>
                <div style={{ position:'relative' }}>
                  <span style={{ position:'absolute', left:14, top:'50%', transform:'translateY(-50%)', display:'flex', pointerEvents:'none' }}>
                    <Icon name="Lock" size={16} color="rgba(255,255,255,.5)" />
                  </span>
                  <input
                    type={showPwd ? 'text' : 'password'}
                    value={password}
                    onChange={e => setPassword(e.target.value)}
                    placeholder="••••••••"
                    required
                    style={{
                      width:'100%', boxSizing:'border-box',
                      padding:'12px 44px 12px 40px',
                      background:'rgba(255,255,255,.06)',
                      border:'1.5px solid rgba(255,255,255,.10)',
                      borderRadius:10, fontSize:14, color:'#fff',
                      outline:'none', transition:'border-color .15s, background .15s',
                    }}
                    onFocus={e => { e.currentTarget.style.borderColor='#FF6B35'; e.currentTarget.style.background='rgba(255,255,255,.08)'; }}
                    onBlur={e => { e.currentTarget.style.borderColor='rgba(255,255,255,.10)'; e.currentTarget.style.background='rgba(255,255,255,.06)'; }}
                  />
                  <button type="button" onClick={() => setShowPwd(!showPwd)} style={{
                    position:'absolute', right:10, top:'50%', transform:'translateY(-50%)',
                    background:'none', border:'none', cursor:'pointer', padding:6, borderRadius:6,
                    display:'flex', alignItems:'center', justifyContent:'center',
                  }}>
                    <Icon name={showPwd ? 'EyeOff' : 'Eye'} size={16} color="rgba(255,255,255,.55)" />
                  </button>
                </div>
              </div>

              {error && (
                <div style={{
                  background:'rgba(239,68,68,.12)', border:'1px solid rgba(239,68,68,.35)',
                  borderRadius:8, padding:'9px 12px',
                  fontSize:12.5, color:'#FCA5A5', display:'flex', gap:8, alignItems:'center',
                }}>
                  <Icon name="AlertCircle" size={14} color="#FCA5A5" />
                  {error}
                </div>
              )}

              <button
                type="submit"
                disabled={loading}
                style={{
                  width:'100%', padding:'13px',
                  background: loading ? 'linear-gradient(135deg, #FFA07A, #ff9c70)' : 'linear-gradient(135deg, #FF6B35, #ff8551)',
                  color:'#fff', border:'none', borderRadius:12,
                  fontSize:15, fontWeight:700, cursor: loading ? 'not-allowed' : 'pointer',
                  boxShadow:'0 8px 24px rgba(255,107,53,.4)',
                  transition:'transform .15s, box-shadow .15s',
                  display:'flex', alignItems:'center', justifyContent:'center', gap:10, marginTop:4,
                }}
                onMouseEnter={e => { if(!loading){ e.currentTarget.style.transform='translateY(-1px)'; e.currentTarget.style.boxShadow='0 12px 28px rgba(255,107,53,.5)'; } }}
                onMouseLeave={e => { e.currentTarget.style.transform='translateY(0)'; e.currentTarget.style.boxShadow='0 8px 24px rgba(255,107,53,.4)'; }}
              >
                {loading ? (
                  <>
                    <span style={{ width:16, height:16, border:'2px solid rgba(255,255,255,.5)', borderTopColor:'white', borderRadius:'50%', animation:'spin 1s linear infinite', display:'inline-block' }} />
                    Entrando...
                  </>
                ) : (
                  <>
                    Entrar no Sistema
                    <Icon name="ArrowRight" size={16} color="#fff" />
                  </>
                )}
              </button>

              {/* Demo box (clickable) */}
              <button type="button" onClick={fillDemo} style={{
                marginTop:6, width:'100%', textAlign:'left',
                background:'rgba(255,107,53,.08)',
                border:'1px solid rgba(255,107,53,.25)',
                borderRadius:10, padding:'12px 14px', cursor:'pointer',
                display:'flex', alignItems:'center', gap:12,
                transition:'background .15s, border-color .15s',
              }}
                onMouseEnter={e => { e.currentTarget.style.background='rgba(255,107,53,.14)'; e.currentTarget.style.borderColor='rgba(255,107,53,.45)'; }}
                onMouseLeave={e => { e.currentTarget.style.background='rgba(255,107,53,.08)'; e.currentTarget.style.borderColor='rgba(255,107,53,.25)'; }}
              >
                <div style={{ width:30, height:30, borderRadius:8, background:'#FF6B35', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                  <Icon name="Zap" size={14} color="#fff" />
                </div>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:11, fontWeight:800, color:'#FF6B35', letterSpacing:.7, textTransform:'uppercase' }}>Acesso Demo</div>
                  <div style={{ fontSize:12, color:'rgba(255,255,255,.7)', fontFamily:'monospace' }}>demo@juflow.com / demo123</div>
                </div>
                <span style={{ fontSize:11, color:'rgba(255,255,255,.55)', whiteSpace:'nowrap' }}>clique para preencher</span>
              </button>
            </div>
          </form>
        </div>

        {/* ─── Trust badges ─── */}
        <div style={{
          marginTop:24, display:'flex', alignItems:'center', justifyContent:'center',
          gap:24, flexWrap:'wrap',
        }}>
          {[
            { icon:'ShieldCheck', label:'Dados protegidos', color:'#22D3EE' },
            { icon:'Zap',         label:'Agenda em tempo real', color:'#FF6B35' },
            { icon:'BellRing',    label:'Lembretes automáticos', color:'#A855F7' },
          ].map(b => (
            <div key={b.label} style={{ display:'flex', alignItems:'center', gap:7, fontSize:12, color:'rgba(255,255,255,.6)', fontWeight:500 }}>
              <Icon name={b.icon} size={14} color={b.color} />
              {b.label}
            </div>
          ))}
        </div>

        {/* ─── Footer ─── */}
        <div style={{ textAlign:'center', marginTop:18 }}>
          <p style={{ color:'rgba(255,255,255,.4)', fontSize:12, margin:0 }}>
            Desenvolvido pela <strong style={{ color:'#FF6B35' }}>JuFlow Digital</strong> — Soluções em Software para Pequenas Empresas
          </p>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { LoginScreen });