// LINE Login screen — entry gate before the main app.

function LoginView({ onLogin }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleLineLogin = async () => {
    setLoading(true);
    setError(null);
    // Mock LINE LIFF auth flow:
    //   In production this would call: liff.init() → liff.login() → liff.getIDToken()
    //   then POST /auth/verify with the idToken to your backend.
    // Here we simulate a 1.2s round-trip and resolve with the demo user.
    await new Promise(r => setTimeout(r, 1200));
    onLogin({
      ...TEAM[0],
      lineUserId: 'U_demo_pim_001',
      lineDisplayName: 'พิมพ์ชนก ศ.',
      sessionToken: 'eyJhbGciOiJIUzI1NiIs.demo.token',
    });
  };

  return (
    <div className="min-h-screen flex items-center justify-center relative overflow-hidden grid-bg">
      {/* Decorative blobs */}
      <div className="absolute -top-32 -left-32 w-[420px] h-[420px] rounded-full blur-3xl opacity-30" style={{ background: 'radial-gradient(circle, #2F5DE5, transparent 70%)' }} />
      <div className="absolute -bottom-32 -right-32 w-[420px] h-[420px] rounded-full blur-3xl opacity-30" style={{ background: 'radial-gradient(circle, #06C755, transparent 70%)' }} />
      <div className="absolute top-1/3 right-1/4 w-72 h-72 rounded-full blur-3xl opacity-20" style={{ background: 'radial-gradient(circle, #FFB400, transparent 70%)' }} />

      <div className="relative w-full max-w-md mx-4">
        {/* Branding */}
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-ink-900 to-brand-700 text-white relative shadow-lift mb-4">
            <span className="text-2xl font-bold">E</span>
            <div className="absolute top-0.5 right-0.5 w-3.5 h-3.5 bg-gold-400 rounded-full" />
          </div>
          <h1 className="text-2xl font-bold text-ink-900">EMPHASIS</h1>
          <p className="text-xs text-ink-500 tracking-[0.18em] uppercase font-medium mt-1">Tracking System</p>
          <p className="text-sm text-ink-500 mt-3">ระบบบริหารธุรกิจ Amway · LINE + Web</p>
        </div>

        {/* Card */}
        <Card className="shadow-lift">
          <div className="py-2">
            <h2 className="text-base font-semibold text-ink-900 text-center">เข้าสู่ระบบ</h2>
            <p className="text-xs text-ink-500 text-center mt-1">เข้าระบบด้วย LINE Account ที่เชื่อมไว้กับ ABO ของคุณ</p>

            <div className="mt-6">
              <button
                onClick={handleLineLogin}
                disabled={loading}
                className="w-full h-12 rounded-xl flex items-center justify-center gap-3 font-semibold text-white transition-all relative overflow-hidden disabled:opacity-70"
                style={{ background: '#06C755', boxShadow: '0 6px 14px -4px rgba(6,199,85,0.4)' }}
              >
                {loading ? (
                  <>
                    <svg className="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none">
                      <circle cx="12" cy="12" r="10" stroke="white" strokeOpacity="0.3" strokeWidth="3" />
                      <path d="M22 12a10 10 0 0 0-10-10" stroke="white" strokeWidth="3" strokeLinecap="round" />
                    </svg>
                    <span>กำลังเชื่อมต่อ LINE...</span>
                  </>
                ) : (
                  <>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
                      <path d="M19 4H5a2 2 0 0 0-2 2v9c0 2.5 2.2 4.5 5 5l-.8 2.2a.5.5 0 0 0 .8.5l4-3.7H19a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM8 13H6.5V9H8v4zm0-4.5H6.5V7H8v1.5zM12 13h-1.5V7H12v6zm5 0h-1.5l-2-3v3h-1.5V7H13l2 3V7h2v6z" />
                    </svg>
                    <span>เข้าสู่ระบบด้วย LINE</span>
                  </>
                )}
              </button>

              {error && <div className="mt-3 text-xs text-rose-600 text-center">{error}</div>}

              <div className="my-5 flex items-center gap-3">
                <div className="flex-1 h-px bg-ink-100" />
                <span className="text-[10px] uppercase tracking-wider text-ink-400">หรือ</span>
                <div className="flex-1 h-px bg-ink-100" />
              </div>

              <button
                onClick={handleLineLogin}
                disabled={loading}
                className="w-full h-11 rounded-xl border border-ink-200 text-sm font-medium text-ink-700 hover:bg-ink-50 transition-all flex items-center justify-center gap-2 disabled:opacity-70"
              >
                <Icon name="lock" className="w-4 h-4" />
                <span>เข้าด้วย ABO Code + Password</span>
              </button>

              <p className="text-[11px] text-ink-400 text-center mt-5 leading-relaxed">
                การเข้าสู่ระบบนี้จะใช้ LINE ID Token ของคุณส่ง verify ที่ Backend<br />
                และเปิด session 24 ชั่วโมง · ดูรายละเอียดที่ <button className="text-brand-600 underline">นโยบายความเป็นส่วนตัว</button>
              </p>
            </div>
          </div>
        </Card>

        {/* Footer */}
        <div className="text-center mt-6 text-[11px] text-ink-400">
          <div className="flex items-center justify-center gap-3">
            <span>v0.3 · prototype</span>
            <span>·</span>
            <button className="hover:text-ink-700">ช่วยเหลือ</button>
            <span>·</span>
            <button className="hover:text-ink-700">ติดต่อ Upline</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.LoginView = LoginView;