// ===== Landing — หน้าหลักหลัง login, เป็นฐานลิงก์ไปยังโมดูลต่างๆ ขององค์กร =====
const MODULES = [
  {
    key: "empinfo",
    title: "EmpInfo",
    subtitle: "ระบบข้อมูลพนักงาน",
    desc: "จัดการข้อมูลบุคลากร ภาพรวมองค์กร รายงาน",
    icon: "users",
    tone: ["#7c5cff", "#5a3eff"],
    internal: true, // อยู่ในแอปเดียวกัน — ไปหน้า dashboard ตรงๆ ไม่เปิดแท็บใหม่
  },
  {
    key: "exit-interview",
    title: "Exit Interview",
    subtitle: "ใบลาออก + สัมภาษณ์ลาออก",
    desc: "ยื่นใบลาออกและแบบสัมภาษณ์ลาออกออนไลน์",
    icon: "user-minus",
    tone: ["#ff5d8f", "#e0407a"],
    href: "https://exit-interview.shmhr90.workers.dev",
  },
  {
    key: "training",
    title: "Training Follow Up",
    subtitle: "ระบบติดตามผลการฝึกอบรม",
    desc: "ติดตามผลการอบรมและพัฒนาบุคลากร",
    icon: "graduation",
    tone: ["#ffc94d", "#e0a800"],
    href: "https://trainingfollowup.pages.dev",
  },
  {
    key: "okr",
    title: "OKR ประเมินผล",
    subtitle: "OKR Evaluation System",
    desc: "ผังองค์กร มอบหมายผู้ประเมิน ประเมินผล OKR + Competency",
    icon: "chart-bar",
    tone: ["#00d4a8", "#00a884"],
    href: "https://okr-evaluation-system.pages.dev",
  },
];

const ModuleCard = ({ mod, onEnter }) => {
  const [opening, setOpening] = React.useState(false);

  async function handleExternalClick(e) {
    e.preventDefault();
    if (opening) return;
    setOpening(true);
    try {
      const url = await window.MEI_AUTH.getHandoffUrl(mod.href);
      window.open(url, "_blank", "noopener,noreferrer");
    } finally {
      setOpening(false);
    }
  }

  const body = (
    <div className="glass card-hover" style={{
      padding: "24px 22px", borderRadius: 18, cursor: "pointer",
      display: "flex", flexDirection: "column", gap: 14, height: "100%",
      transition: "transform 0.15s ease, box-shadow 0.15s ease",
    }}>
      <div style={{
        width: 46, height: 46, borderRadius: 13,
        background: `linear-gradient(135deg, ${mod.tone[0]}, ${mod.tone[1]})`,
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        <Icon name={mod.icon} size={21} color="white" />
      </div>
      <div>
        <div style={{ fontSize: 17, fontWeight: 700, marginBottom: 2 }}>{mod.title}</div>
        <div className="faint" style={{ fontSize: 12, marginBottom: 8 }}>{mod.subtitle}</div>
        <div style={{ fontSize: 13, color: "var(--text-muted, #9aa3bd)", lineHeight: 1.5 }}>{mod.desc}</div>
      </div>
      <div className="spacer" />
      <div className="row gap-6" style={{ color: mod.tone[0], fontSize: 13, fontWeight: 600, alignItems: "center" }}>
        เข้าใช้งาน <Icon name="arrow-right" size={14} />
        {!mod.internal && <span className="faint" style={{ fontSize: 11, fontWeight: 400, marginLeft: 4 }}>(เปิดแท็บใหม่)</span>}
      </div>
    </div>
  );

  if (mod.internal) {
    return <div onClick={onEnter}>{body}</div>;
  }
  return (
    <a href={mod.href} onClick={handleExternalClick} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "inherit" }}>
      {body}
    </a>
  );
};

const LandingScreen = ({ currentUser, onEnterEmpInfo, onLogout }) => {
  return (
    <div className="page-enter" style={{ minHeight: "100vh", position: "relative", overflow: "hidden" }}>
      <GlowBlob color="rgba(124,92,255,0.45)" x={-120} y={-100} size={500} opacity={0.35} />
      <GlowBlob color="rgba(0,212,168,0.4)" x="80vw" y="50vh" size={450} opacity={0.28} />

      <header style={{ position: "relative", zIndex: 2, padding: "24px 32px 0" }}>
        <div className="row gap-12" style={{ alignItems: "center" }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10,
            background: "linear-gradient(135deg, #7c5cff, #00d4a8)",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 17, color: "white", fontWeight: 700,
          }}>M</div>
          <div style={{ fontSize: 16, fontWeight: 700 }}>MyEmpInfo · ศูนย์รวมระบบ</div>
          <div className="spacer" />
          <div className="faint" style={{ fontSize: 12.5 }}>{currentUser?.email || ""}</div>
          <button className="btn btn-ghost btn-sm" onClick={onLogout}>
            <Icon name="logout" size={14} /> ออกจากระบบ
          </button>
        </div>
      </header>

      <div style={{ position: "relative", zIndex: 2, maxWidth: 1080, margin: "0 auto", padding: "48px 32px 64px" }}>
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <div style={{ fontSize: 26, fontWeight: 700, marginBottom: 8 }}>เลือกระบบที่ต้องการใช้งาน</div>
          <div className="faint" style={{ fontSize: 14 }}>รวมระบบงาน HR ทั้งหมดไว้ในที่เดียว</div>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))", gap: 20,
        }}>
          {MODULES.map((mod) => (
            <ModuleCard key={mod.key} mod={mod} onEnter={onEnterEmpInfo} />
          ))}
        </div>
      </div>
    </div>
  );
};