// Login + signup + forgot-password flow.
// Tenant is auto-detected from email → dropdown shown if email belongs to >1 company.

const SUPER_ADMIN_EMAIL = "superadmin@raciworks.io";

// Build a global index of email → [tenant] for the prototype:
// in real life this is a backend lookup; for the demo, we union the tenant admins,
// demo accounts, and the users table (ABC tenant) so the UX feels realistic.
const emailToTenants = (emailLower) => {
  const set = new Map(); // tenant_id -> role hint
  if (!emailLower) return [];
  // tenant admins
  Object.entries(TENANT_ADMIN_USERS).forEach(([tid, a]) => {
    if (a.email.toLowerCase() === emailLower) set.set(tid, { role: "admin", user_id: null });
  });
  // demo accounts
  DEMO_ACCOUNTS.forEach(d => {
    if (d.email.toLowerCase() === emailLower && d.tenant_code) {
      const t = TENANTS.find(x => x.tenant_code === d.tenant_code);
      if (t && !set.has(t.id)) set.set(t.id, { role: d.role, user_id: d.user_id || null });
    }
  });
  // ABC tenant employees
  USERS.forEach(u => {
    if (u.email.toLowerCase() === emailLower && u.status === "active") {
      const tid = "t_abc";
      if (!set.has(tid)) set.set(tid, { role: u.system_role, user_id: u.id });
    }
  });
  return Array.from(set.entries()).map(([tid, info]) => ({ tenant: TENANTS.find(t => t.id === tid), ...info }));
};

// Build the global list of all known emails — used for signup duplicate-check
const allKnownEmails = () => {
  const set = new Set();
  set.add(SUPER_ADMIN_EMAIL);
  Object.values(TENANT_ADMIN_USERS).forEach(a => set.add(a.email.toLowerCase()));
  DEMO_ACCOUNTS.forEach(d => set.add(d.email.toLowerCase()));
  USERS.forEach(u => set.add(u.email.toLowerCase()));
  return set;
};

const LoginScreen = ({ onLogin }) => {
  const [mode, setMode] = useState("login"); // login | signup | forgot
  const [email, setEmail] = useState("");
  const [pwd, setPwd] = useState("");
  const [remember, setRemember] = useState(true);
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  const [showPwd, setShowPwd] = useState(false);
  const [demoOpen, setDemoOpen] = useState(true);
  const [selectedTenantId, setSelectedTenantId] = useState(null);
  const [apiMatches, setApiMatches] = useState([]);

  // When email changes, recompute tenant matches & reset selection if needed
  const emailLower = email.trim().toLowerCase();
  const isSuperAdminEmail = emailLower === SUPER_ADMIN_EMAIL;
  const localMatches = useMemo(
    () => isSuperAdminEmail ? [] : emailToTenants(emailLower),
    [emailLower, isSuperAdminEmail]
  );

  // Merge local + API matches (de-duped by tenant.id)
  const tenantMatches = useMemo(() => {
    const map = new Map();
    localMatches.forEach(m => { if (m.tenant) map.set(m.tenant.id, m); });
    apiMatches.forEach(m => { if (m.tenant && !map.has(m.tenant.id)) map.set(m.tenant.id, m); });
    return Array.from(map.values());
  }, [localMatches, apiMatches]);

  // Look up email via API (debounced) for tenants created after initial load
  useEffect(() => {
    if (!emailLower || isSuperAdminEmail || typeof window === "undefined" || !window.apiClient) {
      setApiMatches([]);
      return;
    }
    let cancelled = false;
    const handle = setTimeout(async () => {
      try {
        const rows = await window.apiClient.findUserByEmail(emailLower);
        if (cancelled) return;
        const mapped = (rows || []).map(r => ({
          tenant: {
            id: r.tenant_id,
            tenant_code: r.tenant_code,
            company_name: r.company_name,
            service_status: r.service_status,
            accent: "indigo",
          },
          role: r.role || "admin",
          user_id: r.user_id,
        }));
        setApiMatches(mapped);
      } catch (e) {
        if (!cancelled) setApiMatches([]);
      }
    }, 250);
    return () => { cancelled = true; clearTimeout(handle); };
  }, [emailLower, isSuperAdminEmail]);

  useEffect(() => {
    // Auto-select if there's exactly one match; clear if 0 or selection no longer valid
    if (tenantMatches.length === 1) setSelectedTenantId(tenantMatches[0].tenant.id);
    else if (!tenantMatches.find(m => m.tenant.id === selectedTenantId)) setSelectedTenantId(null);
  }, [emailLower, tenantMatches.length]);

  const submitLogin = (e) => {
    e?.preventDefault?.();
    setErr("");
    // Super Admin (no tenant required)
    if (isSuperAdminEmail) {
      if (!pwd) { setErr("กรุณากรอกรหัสผ่าน"); return; }
      setBusy(true);
      setTimeout(() => {
        setBusy(false);
        onLogin({ kind:"super_admin", email });
      }, 450);
      return;
    }
    if (!email) { setErr("กรุณากรอกอีเมล"); return; }
    if (tenantMatches.length === 0) {
      setErr("ไม่พบอีเมลนี้ในระบบ · กรุณาติดต่อผู้ดูแลระบบหรือสร้างบัญชีใหม่");
      return;
    }
    const tenantId = selectedTenantId || tenantMatches[0].tenant.id;
    const match = tenantMatches.find(m => m.tenant.id === tenantId);
    if (!match) { setErr("กรุณาเลือกบริษัท"); return; }
    const tenant = match.tenant;
    if (tenant.service_status === "suspended") {
      setErr("บริษัทของท่านถูกระงับการใช้งาน กรุณาติดต่อผู้ดูแลระบบ");
      return;
    }
    if (tenant.service_status === "inactive") {
      setErr("บริการของบริษัทท่านสิ้นสุดลงแล้ว กรุณาติดต่อผู้ดูแลระบบ");
      return;
    }
    if (!pwd) { setErr("กรุณากรอกรหัสผ่าน"); return; }
    setBusy(true);
    setTimeout(() => {
      setBusy(false);
      onLogin({
        kind:"tenant",
        tenant_id: tenant.id,
        role: match.role || "admin",
        user_id: match.user_id || null,
        email,
      });
    }, 500);
  };

  const fillDemo = (acct) => {
    setMode("login");
    setEmail(acct.email);
    setPwd("Demo!2026");
    setErr("");
    // selectedTenantId will auto-set via useEffect when email recomputes
  };

  return (
    <div className="min-h-screen w-full flex">
      {/* LEFT — brand panel */}
      <div className="hidden lg:flex w-[46%] sa-bg text-white relative overflow-hidden flex-col">
        <div className="absolute inset-0 opacity-20" style={{
          backgroundImage:"radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px)",
          backgroundSize:"22px 22px"
        }}/>
        <div className="relative z-10 p-10 flex flex-col h-full">
          <div className="flex items-center gap-2.5">
            <div className="w-9 h-9 rounded-xl bg-white/10 ring-1 ring-white/30 flex items-center justify-center">
              <Icon name="layers" size={18}/>
            </div>
            <div>
              <div className="text-[15px] font-bold tracking-tight">RACI Workspace</div>
              <div className="text-[10.5px] uppercase tracking-[.2em] text-indigo-200/80">Multi-tenant SaaS</div>
            </div>
          </div>

          <div className="my-auto py-12">
            <div className="text-[12px] uppercase tracking-[.22em] text-indigo-200/80 mb-3">Daily Responsibility Matrix</div>
            <h1 className="text-[40px] leading-[1.1] font-bold tracking-tight">ระบบบริหารงานประจำวัน<br/>ตามหลัก <span className="text-indigo-300">RACI</span></h1>
            <p className="mt-4 text-indigo-100/85 text-[14px] leading-relaxed max-w-md">
              จัดทำ ตรวจสอบ ติดตามสถานะรายวันของทุกกระบวนการในองค์กร ภายในระบบเดียวที่แยกข้อมูลแต่ละบริษัทอย่างสมบูรณ์ปลอดภัย
            </p>
            <div className="mt-7 grid grid-cols-2 gap-3 max-w-md">
              {[
                { i:"shield", t:"Tenant Isolation", s:"ข้อมูลแต่ละบริษัทแยกฐานข้อมูล" },
                { i:"workflow", t:"R / A / C / I", s:"กำหนดบทบาทชัดเจน" },
                { i:"checkCircle", t:"Daily Status", s:"P → A → C → S" },
                { i:"dashboard", t:"Executive Dashboard", s:"มอนิเตอร์ภาพรวมแบบ Real-time" },
              ].map((f,i) => (
                <div key={i} className="rounded-xl border border-white/10 bg-white/5 p-3">
                  <Icon name={f.i} size={16} className="text-indigo-300"/>
                  <div className="text-[13px] font-semibold mt-1.5">{f.t}</div>
                  <div className="text-[11px] text-indigo-200/75 mt-0.5">{f.s}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="text-[11px] text-indigo-200/60 flex items-center justify-between">
            <span>© 2026 RACI Workspace — Demo prototype</span>
            <span className="font-mono">v1.4.0</span>
          </div>
        </div>
      </div>

      {/* RIGHT — form */}
      <div className="flex-1 flex items-center justify-center p-6 bg-ink-50">
        <div className="w-full max-w-[440px]">
          <div className="lg:hidden flex items-center gap-2.5 mb-6">
            <div className="w-9 h-9 rounded-xl bg-ink-900 text-white flex items-center justify-center"><Icon name="layers" size={18}/></div>
            <div className="font-bold text-ink-900">RACI Workspace</div>
          </div>

          {mode === "login" && (
            <form onSubmit={submitLogin} className="bg-white rounded-2xl border border-ink-100 shadow-sm p-7">
              <div className="text-[11px] uppercase tracking-[.2em] text-brand-600 font-semibold">ลงชื่อเข้าใช้</div>
              <h2 className="text-[22px] font-bold text-ink-900 mt-1">ยินดีต้อนรับกลับมา</h2>
              <p className="text-[13px] text-ink-500 mt-1">กรอกอีเมลของคุณ ระบบจะค้นหาบริษัทให้อัตโนมัติ</p>

              <div className="mt-5 space-y-3.5">
                <Field label="อีเมล หรือชื่อผู้ใช้" required>
                  <Input type="email" value={email} onChange={e=>setEmail(e.target.value)} placeholder="you@company.co.th" autoFocus/>
                  {email && !isSuperAdminEmail && tenantMatches.length === 0 && (
                    <div className="mt-1.5 text-[11px] text-amber-600 flex items-center gap-1"><Icon name="alert" size={11}/>ไม่พบอีเมลนี้ในระบบ</div>
                  )}
                </Field>

                {/* Tenant picker — appears when email matches >0 tenants */}
                {!isSuperAdminEmail && tenantMatches.length > 0 && (
                  <Field label="บริษัทที่ต้องการเข้าใช้" hint={tenantMatches.length > 1 ? `คุณมีบัญชีอยู่ ${tenantMatches.length} บริษัท` : "ตรวจพบบริษัทอัตโนมัติ"}>
                    {tenantMatches.length === 1 ? (
                      <div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-emerald-200 bg-emerald-50">
                        <span className="w-7 h-7 rounded-md bg-gradient-to-br from-indigo-500 to-indigo-700 text-white text-[10px] font-bold flex items-center justify-center shrink-0">{tenantMatches[0].tenant.tenant_code}</span>
                        <div className="flex-1 min-w-0">
                          <div className="text-[12.5px] font-semibold text-ink-900 truncate">{tenantMatches[0].tenant.company_short}</div>
                          <div className="text-[10.5px] text-ink-500 truncate">{ROLE_META[tenantMatches[0].role]?.label || tenantMatches[0].role}</div>
                        </div>
                        <Icon name="checkCircle" size={14} className="text-emerald-600"/>
                      </div>
                    ) : (
                      <div className="grid gap-1.5">
                        {tenantMatches.map(m => {
                          const t = m.tenant;
                          const sel = selectedTenantId === t.id;
                          const blocked = t.service_status !== "active";
                          return (
                            <button type="button" key={t.id} onClick={()=>setSelectedTenantId(t.id)}
                              className={`flex items-center gap-2.5 px-3 py-2 rounded-lg border text-left transition ${sel?"border-brand-500 bg-brand-50 ring-2 ring-brand-100":"border-ink-200 hover:bg-ink-50"} ${blocked?"opacity-70":""}`}>
                              <span className="w-7 h-7 rounded-md bg-gradient-to-br from-indigo-500 to-indigo-700 text-white text-[10px] font-bold flex items-center justify-center shrink-0">{t.tenant_code}</span>
                              <div className="flex-1 min-w-0">
                                <div className="text-[12.5px] font-semibold text-ink-900 truncate">{t.company_short}</div>
                                <div className="text-[10.5px] text-ink-500 truncate">{ROLE_META[m.role]?.label || m.role}{blocked ? ` · ${t.service_status === "suspended" ? "ระงับการใช้งาน" : "สิ้นสุดบริการ"}` : ""}</div>
                              </div>
                              {sel && <Icon name="check" size={13} className="text-brand-600"/>}
                            </button>
                          );
                        })}
                      </div>
                    )}
                  </Field>
                )}

                {isSuperAdminEmail && (
                  <div className="px-3 py-2 rounded-lg bg-indigo-50 border border-indigo-100 text-indigo-700 text-[11.5px] flex items-center gap-2">
                    <Icon name="shield" size={12}/>เข้าสู่ระบบในฐานะ <strong>Super Admin (SaaS Owner)</strong>
                  </div>
                )}

                <Field label="รหัสผ่าน" required>
                  <div className="relative">
                    <Input type={showPwd?"text":"password"} value={pwd} onChange={e=>setPwd(e.target.value)} placeholder="••••••••" className="pr-10"/>
                    <button type="button" onClick={()=>setShowPwd(v=>!v)} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-ink-400 hover:text-ink-700">
                      <Icon name={showPwd?"eyeOff":"eye"} size={15}/>
                    </button>
                  </div>
                </Field>
              </div>

              <div className="mt-3 flex items-center justify-between">
                <Checkbox checked={remember} onChange={()=>setRemember(v=>!v)} label="จดจำการเข้าสู่ระบบ"/>
                <button type="button" onClick={()=>setMode("forgot")} className="text-[12.5px] text-brand-600 hover:text-brand-700 font-medium">ลืมรหัสผ่าน?</button>
              </div>

              {err && (
                <div className="mt-4 px-3 py-2.5 rounded-lg bg-rose-50 border border-rose-100 text-rose-700 text-[12.5px] flex items-start gap-2">
                  <Icon name="alert" size={14} className="mt-0.5 shrink-0"/><span>{err}</span>
                </div>
              )}

              <Button size="lg" className="w-full mt-5" type="submit" disabled={busy}>
                {busy ? "กำลังตรวจสอบ…" : "เข้าสู่ระบบ"}
                <Icon name="arrowRight" size={15}/>
              </Button>

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

              <div className="text-center text-[12.5px] text-ink-500">
                ยังไม่มีบัญชี? <button type="button" onClick={()=>setMode("signup")} className="text-brand-600 hover:text-brand-700 font-medium">ขอสร้างบัญชีใหม่</button>
              </div>
            </form>
          )}

          {mode === "signup" && <SignupForm onBack={()=>setMode("login")}/>}
          {mode === "forgot" && <ForgotForm onBack={()=>setMode("login")}/>}

          {/* Demo accounts */}
          <div className="mt-5 bg-white rounded-2xl border border-ink-100 overflow-hidden">
            <button onClick={()=>setDemoOpen(v=>!v)} className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-ink-50/60 transition">
              <div className="flex items-center gap-2">
                <Icon name="sparkles" size={14} className="text-amber-500"/>
                <div className="text-[12.5px] font-semibold text-ink-800">บัญชีทดสอบ (Demo)</div>
              </div>
              <Icon name={demoOpen?"chevronUp":"chevronDown"} size={14} className="text-ink-400"/>
            </button>
            {demoOpen && (
              <div className="px-2 pb-2 grid gap-1.5">
                {DEMO_ACCOUNTS.map((d,i) => (
                  <button key={i} onClick={()=>fillDemo(d)} className="flex items-center gap-2.5 px-2 py-2 hover:bg-ink-50 rounded-lg text-left transition">
                    <span className={`w-7 h-7 rounded-md text-white text-[10px] font-bold flex items-center justify-center ${d.color}`}>
                      {d.tenant_code || "SA"}
                    </span>
                    <div className="flex-1 min-w-0">
                      <div className="text-[12.5px] font-medium text-ink-800 truncate">{d.label}</div>
                      <div className="text-[10.5px] text-ink-500 font-mono truncate">{d.email}</div>
                    </div>
                    <Icon name="arrowRight" size={12} className="text-ink-400"/>
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

const SignupForm = ({ onBack }) => {
  const [submitted, setSubmitted] = useState(false);
  const [email, setEmail] = useState("");
  const [duplicate, setDuplicate] = useState(false);
  const knownEmails = useMemo(() => allKnownEmails(), []);
  const onEmailChange = (v) => {
    setEmail(v);
    setDuplicate(knownEmails.has(v.trim().toLowerCase()));
  };
  return (
    <div className="bg-white rounded-2xl border border-ink-100 shadow-sm p-7">
      <button onClick={onBack} className="text-[12px] text-ink-500 hover:text-ink-800 flex items-center gap-1 mb-2"><Icon name="chevronLeft" size={12}/>กลับ</button>
      <h2 className="text-[20px] font-bold text-ink-900">ขอสร้างบัญชีใหม่</h2>
      <p className="text-[12.5px] text-ink-500 mt-1">คำขอจะถูกส่งให้ผู้ดูแลระบบของบริษัทท่านอนุมัติ</p>
      {!submitted ? (
        <form onSubmit={(e)=>{e.preventDefault(); if (duplicate) return; setSubmitted(true);}} className="mt-4 grid grid-cols-2 gap-3">
          <Field label="ชื่อ-นามสกุล" required className="col-span-2"><Input placeholder="เช่น สมหญิง ใจดี" required/></Field>
          <Field label="รหัสพนักงาน" required><Input placeholder="ABC-0099" required/></Field>
          <Field label="Tenant Code" required><Input className="font-mono uppercase" placeholder="ABC" required/></Field>
          <Field label="อีเมล" required error={duplicate ? "อีเมลนี้มีผู้ใช้อยู่ในระบบแล้ว · กรุณาใช้อีเมลอื่น หรือไปที่หน้า Login แล้วกดลืมรหัสผ่าน" : null} className="col-span-2">
            <Input type="email" value={email} onChange={e=>onEmailChange(e.target.value)} placeholder="you@company.co.th" required/>
            {!duplicate && email && /@/.test(email) && (
              <div className="mt-1.5 text-[11px] text-emerald-600 flex items-center gap-1"><Icon name="checkCircle" size={11}/>อีเมลนี้ยังไม่มีผู้ใช้ — ตั้งได้</div>
            )}
          </Field>
          <Field label="โทรศัพท์"><Input placeholder="08x-xxx-xxxx"/></Field>
          <Field label="หน่วยงาน"><Input placeholder="Accounting"/></Field>
          <Field label="รหัสผ่าน" required><Input type="password" placeholder="••••••••" required/></Field>
          <Field label="ยืนยันรหัสผ่าน" required><Input type="password" placeholder="••••••••" required/></Field>
          <div className="col-span-2 mt-1 text-[11.5px] text-ink-500 px-3 py-2 bg-ink-50 rounded-lg border border-ink-100 flex items-start gap-2">
            <Icon name="info" size={13} className="mt-0.5"/>
            <span>คำขอจะปรากฏใน User Management ของ Company Admin ท่านจะได้รับอีเมลแจ้งเมื่ออนุมัติแล้ว</span>
          </div>
          <Button size="lg" className="col-span-2 mt-2" type="submit" disabled={duplicate || !email}>ส่งคำขอสร้างบัญชี</Button>
        </form>
      ) : (
        <div className="mt-5 px-4 py-5 rounded-xl bg-emerald-50 border border-emerald-100 text-emerald-800 text-center">
          <Icon name="checkCircle" size={26} className="mx-auto mb-2 text-emerald-600"/>
          <div className="font-semibold">ส่งคำขอเรียบร้อยแล้ว</div>
          <div className="text-[12.5px] mt-1">เราจะแจ้งผลการอนุมัติทางอีเมลภายใน 1 วันทำการ</div>
          <Button variant="secondary" className="mt-3" onClick={onBack}>กลับไปหน้าเข้าสู่ระบบ</Button>
        </div>
      )}
    </div>
  );
};

const ForgotForm = ({ onBack }) => {
  const [sent, setSent] = useState(false);
  return (
    <div className="bg-white rounded-2xl border border-ink-100 shadow-sm p-7">
      <button onClick={onBack} className="text-[12px] text-ink-500 hover:text-ink-800 flex items-center gap-1 mb-2"><Icon name="chevronLeft" size={12}/>กลับ</button>
      <h2 className="text-[20px] font-bold text-ink-900">ลืมรหัสผ่าน</h2>
      <p className="text-[12.5px] text-ink-500 mt-1">เราจะส่งลิงก์รีเซ็ตรหัสผ่านไปยังอีเมลที่ลงทะเบียนไว้</p>
      {!sent ? (
        <form onSubmit={(e)=>{e.preventDefault(); setSent(true);}} className="mt-4 space-y-3">
          <Field label="Tenant Code" required><Input className="font-mono uppercase" placeholder="ABC" required/></Field>
          <Field label="อีเมล" required><Input type="email" placeholder="you@company.co.th" required/></Field>
          <Button size="lg" className="w-full mt-1" type="submit">ส่งลิงก์รีเซ็ตรหัสผ่าน</Button>
        </form>
      ) : (
        <div className="mt-4 px-4 py-5 rounded-xl bg-emerald-50 border border-emerald-100 text-emerald-800 text-center">
          <Icon name="checkCircle" size={26} className="mx-auto mb-2 text-emerald-600"/>
          <div className="font-semibold">ส่งอีเมลรีเซ็ตเรียบร้อย</div>
          <div className="text-[12.5px] mt-1">โปรดตรวจสอบกล่องข้อความเข้าของท่าน</div>
          <Button variant="secondary" className="mt-3" onClick={onBack}>กลับ</Button>
        </div>
      )}
    </div>
  );
};

window.LoginScreen = LoginScreen;