import { useState } from 'react'
import { B, F, ROLES } from '../brand'

const DEMO_USERS = [
  { id:1, name:"Amara Okonkwo",    email:"amara@hinotori.ca",    role:"super_admin", sector:"tech",         company:"Hinotori",           plan:"premium", avatar:"AO" },
  { id:2, name:"Derek Fontaine",   email:"derek@apexbuild.ca",   role:"admin",       sector:"construction", company:"Apex Build Corp",    plan:"premium", avatar:"DF" },
  { id:3, name:"Priya Nair",       email:"priya@vitalcare.ca",   role:"manager",     sector:"healthcare",   company:"VitalCare Services", plan:"premium", avatar:"PN" },
  { id:4, name:"Tom Briggs",       email:"tom@steelbridge.ca",   role:"employer",    sector:"construction", company:"SteelBridge Trades", plan:"free",    avatar:"TB" },
  { id:5, name:"Linh Nguyen",      email:"linh@novasoft.ca",     role:"job_seeker",  sector:"tech",         company:"NovaSoft Inc.",      plan:"premium", avatar:"LN" },
]

export default function Login({ onLogin }) {
  const [email, setEmail] = useState('')
  const [pass,  setPass]  = useState('')
  const [err,   setErr]   = useState('')

  const attempt = () => {
    const u = DEMO_USERS.find(u => u.email.toLowerCase() === email.toLowerCase())
    if (!u)                  { setErr('No account found with that email.'); return }
    if (u.status==='Inactive'){ setErr('This account is inactive. Contact your administrator.'); return }
    onLogin(u)
  }

  return (
    <div style={{ minHeight:"100vh", background:B.navy, display:"flex", alignItems:"center", justifyContent:"center", padding:20, fontFamily:F.body }}>
      <style>{`@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Montserrat:wght@500;600;700;800&family=Fagun&display=swap');`}</style>

      {/* Background texture */}
      <div style={{ position:"fixed", inset:0, backgroundImage:`radial-gradient(circle at 20% 50%, rgba(255,83,13,0.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.03) 0%, transparent 40%)`, pointerEvents:"none" }}/>

      <div style={{ width:"100%", maxWidth:420, position:"relative", zIndex:1 }}>
        {/* Logo */}
        <div style={{ textAlign:"center", marginBottom:32 }}>
          <img src="/logo.png" alt="Hinotori Consulting Solutions"
            style={{ height:44, width:"auto", filter:"brightness(0) invert(1)", marginBottom:6 }}
            onError={e=>{ e.target.style.display="none" }}/>
          <div style={{ fontFamily:F.accent, fontSize:9, color:"rgba(255,255,255,0.35)", fontWeight:700, letterSpacing:"0.22em", textTransform:"uppercase", marginTop:8 }}>Igniting Growth · Empowering Solutions</div>
        </div>

        {/* Card */}
        <div style={{ background:B.white, borderRadius:10, padding:"32px 36px", boxShadow:"0 24px 60px rgba(3,30,58,0.5)" }}>
          <div style={{ fontFamily:F.display, fontSize:24, color:B.navy, marginBottom:6, lineHeight:1.2 }}>Sign in</div>
          <div style={{ fontFamily:F.body, color:B.inkDim, fontSize:13, marginBottom:24 }}>Access your Hinotori OS workspace</div>

          {/* Email */}
          <div style={{ marginBottom:14 }}>
            <label style={{ fontFamily:F.heading, color:B.navyDk, fontSize:10, fontWeight:700, letterSpacing:"0.08em", textTransform:"uppercase", display:"block", marginBottom:5 }}>Email Address</label>
            <input type="email" value={email} onChange={e=>setEmail(e.target.value)} onKeyDown={e=>e.key==='Enter'&&attempt()} placeholder="you@company.ca"
              style={{ width:"100%", background:B.paper, border:`1.5px solid ${B.border}`, borderRadius:6, padding:"11px 14px", fontFamily:F.body, fontSize:13, color:B.ink, outline:"none" }}/>
          </div>

          {/* Password */}
          <div style={{ marginBottom:20 }}>
            <label style={{ fontFamily:F.heading, color:B.navyDk, fontSize:10, fontWeight:700, letterSpacing:"0.08em", textTransform:"uppercase", display:"block", marginBottom:5 }}>Password</label>
            <input type="password" value={pass} onChange={e=>setPass(e.target.value)} onKeyDown={e=>e.key==='Enter'&&attempt()} placeholder="••••••••"
              style={{ width:"100%", background:B.paper, border:`1.5px solid ${B.border}`, borderRadius:6, padding:"11px 14px", fontFamily:F.body, fontSize:13, color:B.ink, outline:"none" }}/>
            <div style={{ fontFamily:F.body, color:B.inkFaint, fontSize:11, marginTop:5 }}>Demo build — any password is accepted</div>
          </div>

          {err && <div style={{ background:B.dangerBg, border:`1px solid ${B.danger}25`, borderRadius:6, padding:"10px 14px", fontFamily:F.body, color:B.danger, fontSize:13, marginBottom:16 }}>{err}</div>}

          <button onClick={attempt} style={{ width:"100%", padding:"12px", borderRadius:6, background:B.orange, border:"none", color:"#fff", fontFamily:F.heading, fontWeight:700, fontSize:14, cursor:"pointer", letterSpacing:"0.02em", boxShadow:`0 4px 14px ${B.orange}35`, transition:"opacity .15s,transform .15s" }}
            onMouseEnter={e=>{ e.currentTarget.style.opacity=".88"; e.currentTarget.style.transform="translateY(-1px)"; }}
            onMouseLeave={e=>{ e.currentTarget.style.opacity="1"; e.currentTarget.style.transform="translateY(0)"; }}>
            Sign In
          </button>

          {/* Demo quick-login */}
          <div style={{ marginTop:24, paddingTop:20, borderTop:`1.5px solid ${B.border}` }}>
            <div style={{ fontFamily:F.accent, fontSize:9, fontWeight:700, color:B.inkFaint, textTransform:"uppercase", letterSpacing:"0.12em", textAlign:"center", marginBottom:12 }}>Demo — sign in as</div>
            <div style={{ display:"flex", flexDirection:"column", gap:7 }}>
              {DEMO_USERS.map(u => {
                const r = ROLES[u.role]
                return (
                  <button key={u.id} onClick={()=>onLogin(u)} style={{ display:"flex", alignItems:"center", gap:10, padding:"9px 13px", borderRadius:6, cursor:"pointer", fontFamily:F.body, border:`1.5px solid ${B.border}`, background:B.paper, transition:"all .14s" }}
                    onMouseEnter={e=>{ e.currentTarget.style.background=r.bg; e.currentTarget.style.borderColor=`${r.color}40`; }}
                    onMouseLeave={e=>{ e.currentTarget.style.background=B.paper; e.currentTarget.style.borderColor=B.border; }}>
                    <div style={{ width:30, height:30, borderRadius:6, background:r.bg, display:"flex", alignItems:"center", justifyContent:"center", fontFamily:F.heading, color:r.color, fontWeight:700, fontSize:11, flexShrink:0 }}>{u.avatar}</div>
                    <div style={{ flex:1, textAlign:"left" }}>
                      <div style={{ fontFamily:F.heading, fontWeight:700, fontSize:12, color:B.ink }}>{u.name}</div>
                      <div style={{ fontFamily:F.accent, fontSize:9, color:r.color, fontWeight:700, textTransform:"uppercase", letterSpacing:"0.08em" }}>{r.label}</div>
                    </div>
                    <div style={{ fontFamily:F.body, color:B.inkFaint, fontSize:12 }}>→</div>
                  </button>
                )
              })}
            </div>
          </div>
        </div>

        <div style={{ textAlign:"center", marginTop:20, fontFamily:F.body, color:"rgba(255,255,255,0.25)", fontSize:11 }}>
          © {new Date().getFullYear()} Hinotori Consulting Solutions® · Non-profit Corp #1742371-3
        </div>
      </div>
    </div>
  )
}