/* Screen: Login — Simfoni branded credential gate.
   Front-end prototype: any listed account + shared demo password signs in. */

/* Simfoni logomark SVG — two rings (copper + teal) with navy plus */
function SimfoniMark({ size = 36 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* Copper ring — top right */}
      <path d="M27 5 A13 13 0 1 1 14 18" stroke="#C4763A" strokeWidth="5.5" strokeLinecap="round" fill="none"/>
      {/* Teal ring — bottom left */}
      <path d="M17 39 A13 13 0 1 1 30 26" stroke="#4BA99A" strokeWidth="5.5" strokeLinecap="round" fill="none"/>
      {/* Navy plus / cross */}
      <rect x="18.5" y="11" width="7" height="22" rx="2.5" fill="#1C3C6E"/>
      <rect x="11" y="18.5" width="22" height="7" rx="2.5" fill="#1C3C6E"/>
    </svg>
  );
}

function RolePill({ role, className = '' }) {
  const R = window.AUTH.ROLES[role];
  const tone = {
    blue:   'bg-blue-50 text-blue-700 ring-blue-600/15',
    violet: 'bg-violet-50 text-violet-700 ring-violet-600/15',
    slate:  'bg-slate-100 text-slate-600 ring-slate-500/15',
  }[R.tone];
  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold ring-1 ring-inset ${tone} ${className}`}>
      {R.label}
    </span>
  );
}

function LoginScreen({ onLogin }) {
  const AUTH = window.AUTH;
  const [email, setEmail] = useState('');
  const [pass, setPass]   = useState('');
  const [showPass, setShowPass] = useState(false);
  const [error, setError] = useState('');
  const [picked, setPicked] = useState(null);

  const fillFrom = (u) => {
    setPicked(u.id);
    setEmail(u.email);
    setPass(AUTH.DEMO_PASSWORD);
    setError('');
  };

  const submit = (e) => {
    e && e.preventDefault();
    const res = AUTH.validate(email, pass);
    if (!res.ok) { setError(res.error); return; }
    AUTH.setSession(res.user);
    onLogin(res.user);
  };

  return (
    <div className="min-h-screen w-full flex bg-white">

      {/* ── Left brand panel ── */}
      <div
        className="hidden lg:flex w-[44%] max-w-[600px] flex-col justify-between p-12 text-white relative overflow-hidden"
        style={{ background: 'linear-gradient(155deg, #2A52A0 0%, #1C3C6E 45%, #0D1A35 100%)' }}>

        {/* decorative blobs */}
        <div className="absolute -top-20 -right-20 w-72 h-72 rounded-full opacity-10"
          style={{ background: 'radial-gradient(circle, #C4763A, transparent)' }}></div>
        <div className="absolute -bottom-16 -left-16 w-64 h-64 rounded-full opacity-10"
          style={{ background: 'radial-gradient(circle, #4BA99A, transparent)' }}></div>

        {/* Logo */}
        <div className="relative">
          <img src="app/simfoni-logo.png" alt="Simfoni — See Spend Differently"
            style={{ width: 220, height: 'auto' }}
            className="object-contain" />
        </div>

        {/* Hero text */}
        <div className="relative max-w-md">
          <h2 className="text-3xl font-bold tracking-tight leading-tight">
            Every invoice, matched and approved by the right person.
          </h2>
          <p className="text-sm text-white/70 mt-3 leading-relaxed">
            Role-based access keeps capture, approval and oversight cleanly separated across your AP workflow.
          </p>

          <div className="mt-8 space-y-3">
            {[
              { rid: 'creator',  icon: 'upload'       },
              { rid: 'approver', icon: 'shield-check'  },
              { rid: 'viewer',   icon: 'eye'           },
            ].map(({ rid, icon }) => {
              const R = AUTH.ROLES[rid];
              return (
                <div key={rid} className="flex items-start gap-3 rounded-xl border border-white/10 px-4 py-3"
                  style={{ background: 'rgba(255,255,255,0.07)' }}>
                  <span className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
                    style={{ background: 'rgba(255,255,255,0.12)' }}>
                    <Icon name={icon} className="w-4 h-4 text-white" />
                  </span>
                  <div>
                    <p className="text-sm font-semibold text-white">{R.label}</p>
                    <p className="text-xs leading-snug mt-0.5" style={{ color: 'rgba(255,255,255,0.6)' }}>{R.tagline}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Copper accent bar */}
        <div className="relative flex items-center gap-3">
          <div className="h-px flex-1" style={{ background: 'linear-gradient(90deg, #C4763A44, transparent)' }}></div>
          <p className="text-xs" style={{ color: 'rgba(255,255,255,0.4)' }}>Prototype · simulated authentication</p>
        </div>
      </div>

      {/* ── Right sign-in panel ── */}
      <div className="flex-1 flex items-center justify-center p-6 sm:p-10 bg-slate-50">
        <div className="w-full max-w-[400px]">

          {/* Mobile-only logo */}
          <div className="flex lg:hidden items-center gap-3 mb-8">
            <SimfoniMark size={34} />
            <div className="leading-tight">
              <p className="text-base font-bold text-slate-900">simfoni</p>
              <p className="text-[10px] font-semibold text-slate-400 uppercase tracking-widest">Invoice Portal</p>
            </div>
          </div>

          <h2 className="text-2xl font-bold text-slate-900 tracking-tight">Sign in</h2>
          <p className="text-sm text-slate-500 mt-1.5">Use your Simfoni workspace account to continue.</p>

          <form onSubmit={submit} className="mt-6 space-y-4">
            <div>
              <label className="block text-xs font-semibold text-slate-600 mb-1.5">Work email</label>
              <input type="email" value={email} autoComplete="username"
                onChange={(e) => { setEmail(e.target.value); setError(''); }}
                placeholder="you@simfoni.com"
                className="w-full px-3.5 py-2.5 text-sm rounded-xl border border-slate-200 bg-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-all placeholder:text-slate-400" />
            </div>
            <div>
              <label className="block text-xs font-semibold text-slate-600 mb-1.5">Password</label>
              <div className="relative">
                <input type={showPass ? 'text' : 'password'} value={pass} autoComplete="current-password"
                  onChange={(e) => { setPass(e.target.value); setError(''); }}
                  placeholder="••••••••"
                  className="w-full px-3.5 py-2.5 pr-10 text-sm rounded-xl border border-slate-200 bg-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-all placeholder:text-slate-400" />
                <button type="button" onClick={() => setShowPass((s) => !s)}
                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 p-1">
                  <Icon name="eye" className="w-4 h-4" />
                </button>
              </div>
            </div>

            {error && (
              <p className="text-xs text-red-600 flex items-center gap-1.5 bg-red-50 rounded-lg px-3 py-2">
                <Icon name="alert-triangle" className="w-3.5 h-3.5 flex-shrink-0" /> {error}
              </p>
            )}

            <Btn variant="primary" type="submit" className="w-full" iconRight="arrow-right">Sign in</Btn>
          </form>

          {/* Demo accounts */}
          <div className="mt-7 pt-6 border-t border-slate-100">
            <p className="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-2.5">
              Demo accounts · password <span className="font-mono text-slate-500 normal-case tracking-normal">{AUTH.DEMO_PASSWORD}</span>
            </p>
            <div className="space-y-1.5">
              {AUTH.USERS.map((u) => (
                <button key={u.id} onClick={() => fillFrom(u)}
                  className={`w-full flex items-center gap-3 px-2.5 py-2 rounded-xl border text-left transition-all ${
                    picked === u.id
                      ? 'border-brand-300 bg-brand-50/60 ring-1 ring-brand-200'
                      : 'border-slate-200 hover:border-slate-300 hover:bg-slate-50'
                  }`}>
                  <Avatar name={u.name} className="w-8 h-8 text-[11px]" />
                  <div className="min-w-0 flex-1">
                    <p className="text-sm font-semibold text-slate-900 truncate">{u.name}</p>
                    <p className="text-xs text-slate-500 truncate">{u.title}</p>
                  </div>
                  <RolePill role={u.role} />
                </button>
              ))}
            </div>
            <p className="text-[11px] text-slate-400 mt-3 leading-relaxed">
              Click an account to autofill, then <span className="font-medium text-slate-500">Sign in</span>.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen, SimfoniMark });