// ===== Dashboard =====

const Dashboard = ({ onOpenDrill, onTabChange, onOpenProfile, onAddEmployee, onResign, onLogout, currentUser }) => {
  const { DEPARTMENTS, EMPLOYEES, ACTIVITY } = window.MEI_DATA;

  // ===== Compute stats =====
  const active = EMPLOYEES.filter(e => e.status === "active");
  const resigned = EMPLOYEES.filter(e => e.status === "resigned");

  const byDept = DEPARTMENTS.map(d => ({
    label: d.name, value: active.filter(e => e.deptId === d.id).length,
    color: d.color, dept: d, _all: active.filter(e => e.deptId === d.id),
  }));

  const genderCounts = [
    { label: "ชาย",  value: active.filter(e => e.gender === "ชาย").length,  color: "#4ec3ff", _all: active.filter(e => e.gender === "ชาย") },
    { label: "หญิง", value: active.filter(e => e.gender === "หญิง").length, color: "#ff5d8f", _all: active.filter(e => e.gender === "หญิง") },
  ];

  const months = ["ม.ค.","ก.พ.","มี.ค.","เม.ย.","พ.ค.","มิ.ย.","ก.ค.","ส.ค.","ก.ย.","ต.ค.","พ.ย.","ธ.ค."];
  const monthlyIn = months.map((_, m) => EMPLOYEES.filter(e => {
    const d = new Date(e.startDate);
    return d.getFullYear() === 2026 && d.getMonth() === m && m <= 4; // up to May
  }).length);
  const monthlyOut = months.map((_, m) => EMPLOYEES.filter(e => {
    if (!e.endDate) return false;
    const d = new Date(e.endDate);
    return d.getFullYear() === 2026 && d.getMonth() === m && m <= 4;
  }).length);

  const ageBuckets = [
    { range: "22-25", min: 22, max: 25 },
    { range: "26-30", min: 26, max: 30 },
    { range: "31-35", min: 31, max: 35 },
    { range: "36-40", min: 36, max: 40 },
    { range: "41-45", min: 41, max: 45 },
    { range: "46-50", min: 46, max: 50 },
    { range: "51-57", min: 51, max: 57 },
  ].map(b => ({
    label: b.range,
    value: active.filter(e => e.age >= b.min && e.age <= b.max).length,
    _all: active.filter(e => e.age >= b.min && e.age <= b.max),
    range: b.range,
  }));

  const tenureBuckets = [
    { range: "0-1 ปี", min: 0, max: 1 },
    { range: "1-2 ปี", min: 1, max: 2 },
    { range: "2-3 ปี", min: 2, max: 3 },
    { range: "3-5 ปี", min: 3, max: 5 },
    { range: "5-7 ปี", min: 5, max: 7 },
    { range: "7-10 ปี", min: 7, max: 10 },
    { range: "10+ ปี", min: 10, max: 99 },
  ].map(b => {
    const matches = active.filter(e => {
      const months = (new Date(2026, 4, 14) - new Date(e.startDate)) / (1000*60*60*24*30.4);
      const years = months / 12;
      return years >= b.min && years < b.max;
    });
    return { label: b.range, value: matches.length, color: "#7c5cff", _all: matches, range: b.range };
  });

  const avgAge = active.reduce((s, e) => s + e.age, 0) / Math.max(active.length, 1);
  const largestDept = byDept.reduce((a, b) => b.value > a.value ? b : a, byDept[0]);
  const totalResigned2026 = resigned.filter(e => e.endDate && new Date(e.endDate).getFullYear() === 2026).length;

  // birthday this month
  const currentMonth = 5; // May
  const birthdayThisMonth = active.filter(e => {
    const [d, m] = e.birthDate.split("/").map(Number);
    return m === currentMonth;
  });

  const newThisMonth = active.filter(e => {
    const d = new Date(e.startDate);
    return d.getFullYear() === 2026 && d.getMonth() === 4;
  });
  const resignedThisMonth = resigned.filter(e => {
    if (!e.endDate) return false;
    const d = new Date(e.endDate);
    return d.getFullYear() === 2026 && d.getMonth() === 4;
  });

  return (
    <div className="page-enter">
      {/* ============ TOP NAV / HEADER ============ */}
      <header style={{
        position: "sticky", top: 0, zIndex: 50,
        padding: "18px 32px 0",
        backdropFilter: "blur(12px)",
        background: "linear-gradient(to bottom, var(--bg-0) 60%, transparent)",
      }}>
        <div className="row gap-16" style={{ marginBottom: 18 }}>
          <div className="row gap-12">
            <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 className="col">
              <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: -0.3, lineHeight: 1.1 }}>
                Employee Dashboard
              </div>
              <div className="faint" style={{ fontSize: 11.5, marginTop: 2 }}>
                อัปเดตจาก Database ({EMPLOYEES.length} คน) — 14 พฤษภาคม 2569
              </div>
            </div>
          </div>

          <div className="spacer" />

          {/* Quick stats pills in header */}
          <div className="chip chip-teal">
            <Icon name="users" size={14} /> {active.length} Active
          </div>
          <button className="btn btn-ghost btn-sm" onClick={() => window.location.reload()}>
            <Icon name="refresh" size={14} /> Reload
          </button>
          <button className="btn btn-sm" onClick={onAddEmployee}
            style={{ background: "rgba(0,212,168,0.12)", borderColor: "rgba(0,212,168,0.3)", color: "var(--teal)" }}>
            <Icon name="user-plus" size={14} /> เพิ่มพนักงาน
          </button>

          <button className="btn btn-ghost btn-icon" style={{ position: "relative" }}>
            <Icon name="bell" size={16} />
            <span className="notif-dot" />
          </button>

          <button className="btn btn-ghost" onClick={onLogout} style={{ paddingLeft: 6 }}>
            <Avatar person={{ initials: "AD", tone: ["#7c5cff", "#5a3eff"] }} size={28} />
            <div className="col" style={{ alignItems: "flex-start", lineHeight: 1.1 }}>
              <span style={{ fontSize: 12.5, fontWeight: 600 }}>System Administrator</span>
              <span className="faint" style={{ fontSize: 11 }}>HR Admin</span>
            </div>
            <Icon name="chevron-d" size={14} color="var(--text-faint)" />
          </button>
        </div>

        {/* ===== Tab pills ===== */}
        <div className="row gap-8" style={{ paddingBottom: 16, overflowX: "auto" }}>
          <button className="tab-pill active"><Icon name="chart-bar" size={14} /> ภาพรวม</button>
          <button className="tab-pill" onClick={() => onTabChange("employees")}><Icon name="building" size={14} /> แผนก / ฝ่าย</button>
          <button className="tab-pill" onClick={() => onTabChange("employees")}><Icon name="user" size={14} /> ข้อมูลบุคคล</button>
          <button className="tab-pill" onClick={() => onOpenDrill({ title: "ประวัติการลาออก", employees: resigned })}>
            <Icon name="user-minus" size={14} /> การลาออก
          </button>
          <button className="tab-pill" onClick={() => onOpenDrill({ title: "ลาออกเดือนนี้ (พฤษภาคม 2569)", employees: resignedThisMonth })}>
            <Icon name="calendar" size={14} /> ลาออกเดือนนี้ <span className="chip chip-red" style={{ padding: "1px 7px", fontSize: 10.5 }}>{resignedThisMonth.length}</span>
          </button>
          <button className="tab-pill" onClick={() => onOpenDrill({ title: "เริ่มงานใหม่เดือนนี้", employees: newThisMonth })}>
            <Icon name="user-plus" size={14} /> เริ่มงานใหม่เดือนนี้ <span className="chip chip-teal" style={{ padding: "1px 7px", fontSize: 10.5 }}>{newThisMonth.length}</span>
          </button>
          <button className="tab-pill" onClick={() => onTabChange("employees")}>
            <Icon name="users" size={14} /> รายชื่อพนักงาน
          </button>
          <button className="tab-pill" onClick={() => onOpenDrill({ title: "พนักงานเกิดเดือนนี้ (พ.ค.)", employees: birthdayThisMonth })}>
            <Icon name="cake" size={14} /> เกิดเดือนนี้ <span className="chip chip-yellow" style={{ padding: "1px 7px", fontSize: 10.5 }}>{birthdayThisMonth.length}</span>
          </button>
        </div>
      </header>

      {/* ============ MAIN GRID ============ */}
      <div style={{ padding: "8px 32px 32px" }}>

        {/* ===== Top stat cards ===== */}
        <div className="stagger" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 16,
          marginBottom: 16,
        }}>
          <StatCard accent="#00d4a8" icon="check" iconBg="rgba(0,212,168,0.18)" iconColor="#00d4a8"
            number={active.length} numberColor="#00d4a8"
            title="พนักงานปัจจุบัน (Active)"
            sub={`${EMPLOYEES.length} คนทั้งหมด`}
            onClick={() => onOpenDrill({ title: "พนักงานปัจจุบัน (Active)", employees: active })} />

          <StatCard accent="#7c5cff" icon="building" iconBg="rgba(124,92,255,0.18)" iconColor="#a48cff"
            number={DEPARTMENTS.length} numberColor="#a48cff"
            title="ฝ่าย / แผนก"
            sub={`ฝ่าย${largestDept.label} ใหญ่สุด (${largestDept.value} คน)`}
            onClick={() => onTabChange("employees")} />

          <StatCard accent="#ff5d8f" icon="user-minus" iconBg="rgba(255,93,143,0.18)" iconColor="#ff5d8f"
            number={totalResigned2026} numberColor="#ff5d8f"
            title="ลาออกปี 2026"
            sub={`สะสมทั้งหมด ${resigned.length} คน (ทุกปี)`}
            onClick={() => onOpenDrill({ title: "ลาออกปี 2026", employees: resigned.filter(e => e.endDate && new Date(e.endDate).getFullYear() === 2026) })} />

          <StatCard accent="#ffc94d" icon="hourglass" iconBg="rgba(255,201,77,0.18)" iconColor="#ffc94d"
            number={avgAge} decimals={1} numberColor="#ffc94d"
            title="อายุเฉลี่ย (ปี)"
            sub={`ช่วง ${Math.min(...active.map(e => e.age))} – ${Math.max(...active.map(e => e.age))} ปี`}
            onClick={() => onOpenDrill({ title: "การกระจายอายุพนักงาน", employees: active })} />
        </div>

        {/* ===== Row: Department Bar + Gender Donut + Tenure ===== */}
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1.2fr", gap: 16, marginBottom: 16 }}>

          <div className="glass glass-hover" style={{ padding: 22 }}>
            <div className="row" style={{ marginBottom: 12 }}>
              <div className="col gap-4">
                <div className="row gap-8" style={{ fontSize: 14, fontWeight: 600 }}>
                  <Icon name="chart-bar" size={16} color="var(--teal)" /> จำนวนพนักงานแยกตามฝ่าย
                </div>
                <div className="faint" style={{ fontSize: 12 }}>คลิกที่แท่งเพื่อดูรายชื่อในฝ่ายนั้น</div>
              </div>
              <div className="spacer" />
              <span className="chip">{active.length} คน Active</span>
            </div>
            <BarChart
              data={byDept}
              height={240}
              onBarClick={(d) => onOpenDrill({
                title: `ฝ่าย ${d.label}`,
                subtitle: `พนักงานปัจจุบันในฝ่าย ${d.label} จำนวน ${d.value} คน`,
                employees: d._all,
                accent: d.color,
              })}
            />
          </div>

          <div className="glass glass-hover" style={{ padding: 22 }}>
            <div className="col gap-4" style={{ marginBottom: 12 }}>
              <div className="row gap-8" style={{ fontSize: 14, fontWeight: 600 }}>
                <Icon name="chart-pie" size={16} color="var(--pink)" /> สัดส่วนเพศ
              </div>
              <div className="faint" style={{ fontSize: 12 }}>พนักงานปัจจุบัน {active.length} คน</div>
            </div>
            <div style={{ display: "flex", justifyContent: "center", padding: "8px 0" }}>
              <DonutChart data={genderCounts} size={200} thickness={28}
                onSliceClick={(d) => onOpenDrill({
                  title: `พนักงานเพศ${d.label}`,
                  subtitle: `${d.value} คน (${((d.value / active.length) * 100).toFixed(1)}%)`,
                  employees: d._all,
                  accent: d.color,
                })} />
            </div>
            <div className="row gap-16" style={{ justifyContent: "center", marginTop: 8 }}>
              {genderCounts.map((g, i) => (
                <div key={i} className="row gap-8">
                  <span className="dot" style={{ background: g.color }} />
                  <span style={{ fontSize: 13 }}>{g.label}</span>
                  <span className="num-display faint" style={{ fontSize: 12 }}>{g.value}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="glass glass-hover" style={{ padding: 22 }}>
            <div className="col gap-4" style={{ marginBottom: 12 }}>
              <div className="row gap-8" style={{ fontSize: 14, fontWeight: 600 }}>
                <Icon name="hourglass" size={16} color="#a48cff" /> อายุงาน (Tenure)
              </div>
              <div className="faint" style={{ fontSize: 12 }}>จำนวนปีที่ทำงานกับองค์กร</div>
            </div>
            <BarChart
              data={tenureBuckets}
              height={220}
              onBarClick={(d) => onOpenDrill({
                title: `อายุงาน ${d.label}`,
                subtitle: `${d.value} คน ที่มีอายุงานในช่วงนี้`,
                employees: d._all,
                accent: "#7c5cff",
              })}
            />
          </div>
        </div>

        {/* ===== Row: Line chart + Histogram + Activity ===== */}
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1.2fr 1fr", gap: 16, marginBottom: 16 }}>

          <div className="glass glass-hover" style={{ padding: 22 }}>
            <div className="row" style={{ marginBottom: 12 }}>
              <div className="col gap-4">
                <div className="row gap-8" style={{ fontSize: 14, fontWeight: 600 }}>
                  <Icon name="trend" size={16} color="var(--blue)" /> พนักงานเข้า / ออก รายเดือน
                </div>
                <div className="faint" style={{ fontSize: 12 }}>ปี 2026 (ม.ค. – พ.ค.) — คลิกที่จุดเพื่อดูรายชื่อ</div>
              </div>
              <div className="spacer" />
              <div className="row gap-12">
                <div className="row gap-6"><span className="dot" style={{ background: "#00d4a8" }} /><span style={{ fontSize: 12 }}>เข้าใหม่</span></div>
                <div className="row gap-6"><span className="dot" style={{ background: "#ff5d8f" }} /><span style={{ fontSize: 12 }}>ลาออก</span></div>
              </div>
            </div>
            <LineChart
              labels={months}
              series={[
                { label: "เข้าใหม่", color: "#00d4a8", data: monthlyIn },
                { label: "ลาออก",   color: "#ff5d8f", data: monthlyOut },
              ]}
              height={240}
              onPointClick={(s, i) => {
                const mList = s === 0
                  ? EMPLOYEES.filter(e => { const d = new Date(e.startDate); return d.getFullYear() === 2026 && d.getMonth() === i; })
                  : EMPLOYEES.filter(e => { if (!e.endDate) return false; const d = new Date(e.endDate); return d.getFullYear() === 2026 && d.getMonth() === i; });
                onOpenDrill({
                  title: `${s === 0 ? "พนักงานเข้าใหม่" : "พนักงานลาออก"} เดือน${months[i]} 2569`,
                  employees: mList,
                  accent: s === 0 ? "#00d4a8" : "#ff5d8f",
                });
              }}
            />
          </div>

          <div className="glass glass-hover" style={{ padding: 22 }}>
            <div className="col gap-4" style={{ marginBottom: 12 }}>
              <div className="row gap-8" style={{ fontSize: 14, fontWeight: 600 }}>
                <Icon name="users" size={16} color="#ffc94d" /> ช่วงอายุ
              </div>
              <div className="faint" style={{ fontSize: 12 }}>พนักงานปัจจุบัน แยกตามช่วงอายุ</div>
            </div>
            <Histogram data={ageBuckets} color="#ffc94d" height={240}
              onBarClick={(d) => onOpenDrill({
                title: `พนักงานอายุ ${d.label} ปี`,
                subtitle: `${d.value} คน ในช่วงอายุนี้`,
                employees: d._all,
                accent: "#ffc94d",
              })}
            />
          </div>

          <div className="glass" style={{ padding: 22, display: "flex", flexDirection: "column" }}>
            <div className="row" style={{ marginBottom: 12 }}>
              <div className="row gap-8" style={{ fontSize: 14, fontWeight: 600 }}>
                <Icon name="sparkle" size={16} color="var(--teal)" /> Activity Log
              </div>
              <div className="spacer" />
              <span className="chip chip-teal" style={{ padding: "2px 8px", fontSize: 11 }}>Live</span>
            </div>
            <div className="col gap-12" style={{ overflowY: "auto", flex: 1 }}>
              {ACTIVITY.map((a, i) => (
                <ActivityRow key={i} a={a} />
              ))}
            </div>
          </div>

        </div>

        {/* ===== Bottom row: Quick info ===== */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>

          <div className="glass glass-hover" style={{ padding: 22 }}>
            <div className="row" style={{ marginBottom: 14 }}>
              <div className="row gap-8" style={{ fontSize: 14, fontWeight: 600 }}>
                <Icon name="cake" size={16} color="#ffc94d" /> วันเกิดเดือนนี้
              </div>
              <div className="spacer" />
              <span className="faint" style={{ fontSize: 12 }}>{birthdayThisMonth.length} คน</span>
            </div>
            <div className="col gap-10">
              {birthdayThisMonth.slice(0, 4).map(p => (
                <div key={p.id} className="row gap-10 cursor-pointer"
                  onClick={() => onOpenProfile(p)}>
                  <Avatar person={p} size={32} />
                  <div className="col" style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{p.fullName}</div>
                    <div className="faint" style={{ fontSize: 11.5 }}>{p.deptName} · เกิด {p.birthDate}/2569</div>
                  </div>
                  <div className="chip chip-yellow" style={{ padding: "3px 9px", fontSize: 11 }}>{p.birthDate}</div>
                </div>
              ))}
              {birthdayThisMonth.length > 4 && (
                <button className="btn btn-ghost btn-sm" style={{ justifyContent: "center" }}
                  onClick={() => onOpenDrill({ title: "พนักงานเกิดเดือนนี้", employees: birthdayThisMonth })}>
                  ดูทั้งหมด {birthdayThisMonth.length} คน <Icon name="chevron-r" size={12} />
                </button>
              )}
            </div>
          </div>

          <div className="glass glass-hover" style={{ padding: 22 }}>
            <div className="row" style={{ marginBottom: 14 }}>
              <div className="row gap-8" style={{ fontSize: 14, fontWeight: 600 }}>
                <Icon name="user-plus" size={16} color="var(--teal)" /> เริ่มงานใหม่ — พฤษภาคม
              </div>
              <div className="spacer" />
              <span className="chip chip-teal" style={{ padding: "2px 8px", fontSize: 11 }}>+{newThisMonth.length}</span>
            </div>
            <div className="col gap-10">
              {newThisMonth.slice(0, 4).map(p => (
                <div key={p.id} className="row gap-10 cursor-pointer" onClick={() => onOpenProfile(p)}>
                  <Avatar person={p} size={32} />
                  <div className="col" style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{p.fullName}</div>
                    <div className="faint" style={{ fontSize: 11.5 }}>{p.position} · {p.deptName}</div>
                  </div>
                  <div className="faint" style={{ fontSize: 11.5 }}>{fmtThaiDate(p.startDate)}</div>
                </div>
              ))}
              {newThisMonth.length === 0 && (
                <div className="faint" style={{ fontSize: 13, padding: "12px 0" }}>ยังไม่มีพนักงานเข้าใหม่ในเดือนนี้</div>
              )}
            </div>
          </div>

          <div className="glass glass-hover" style={{ padding: 22 }}>
            <div className="row" style={{ marginBottom: 14 }}>
              <div className="row gap-8" style={{ fontSize: 14, fontWeight: 600 }}>
                <Icon name="user-minus" size={16} color="var(--pink)" /> ลาออก — พฤษภาคม
              </div>
              <div className="spacer" />
              <span className="chip chip-red" style={{ padding: "2px 8px", fontSize: 11 }}>−{resignedThisMonth.length}</span>
            </div>
            <div className="col gap-10">
              {resignedThisMonth.slice(0, 4).map(p => (
                <div key={p.id} className="row gap-10 cursor-pointer" onClick={() => onOpenProfile(p)}>
                  <Avatar person={p} size={32} />
                  <div className="col" style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{p.fullName}</div>
                    <div className="faint" style={{ fontSize: 11.5 }}>{p.deptName} · อายุงาน {fmtTenure(p.startDate, p.endDate)}</div>
                  </div>
                  <div className="faint" style={{ fontSize: 11.5 }}>{fmtThaiDate(p.endDate)}</div>
                </div>
              ))}
              {resignedThisMonth.length === 0 && (
                <div className="faint" style={{ fontSize: 13, padding: "12px 0" }}>ไม่มีการลาออกในเดือนนี้</div>
              )}
            </div>
          </div>

        </div>

      </div>
    </div>
  );
};

// ----- StatCard component -----
const StatCard = ({ accent, icon, iconBg, iconColor, number, decimals = 0, numberColor, title, sub, onClick }) => (
  <div className="glass glass-hover stat-card cursor-pointer" style={{ "--accent": accent }} onClick={onClick}>
    <div style={{
      width: 38, height: 38, borderRadius: 10,
      background: iconBg,
      display: "flex", alignItems: "center", justifyContent: "center",
      color: iconColor, marginBottom: 14,
    }}>
      <Icon name={icon} size={20} />
    </div>
    <div className="num-display" style={{ fontSize: 46, color: numberColor, lineHeight: 1, letterSpacing: -1 }}>
      <AnimatedCounter value={number} decimals={decimals} />
    </div>
    <div style={{ fontSize: 13, color: "var(--text)", marginTop: 12 }}>{title}</div>
    <div className="faint" style={{ fontSize: 11.5, marginTop: 4 }}>{sub}</div>
  </div>
);

// ----- Activity row -----
const ActivityRow = ({ a }) => {
  const cfg = {
    new:    { icon: "user-plus",  color: "var(--teal)",  bg: "rgba(0,212,168,0.14)",  text: "เพิ่มพนักงานใหม่" },
    edit:   { icon: "edit",       color: "var(--blue)",  bg: "rgba(78,195,255,0.14)", text: "แก้ไขข้อมูล" },
    resign: { icon: "user-minus", color: "var(--pink)",  bg: "rgba(255,93,143,0.14)", text: "บันทึกการลาออก" },
    photo:  { icon: "camera",     color: "#a48cff",      bg: "rgba(124,92,255,0.14)", text: "อัปโหลดรูปภาพ" },
    import: { icon: "download",   color: "var(--yellow)", bg: "rgba(255,201,77,0.14)", text: "นำเข้าข้อมูล" },
  }[a.type];
  return (
    <div className="row gap-10">
      <div style={{
        width: 30, height: 30, borderRadius: 8,
        background: cfg.bg, color: cfg.color,
        display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
      }}>
        <Icon name={cfg.icon} size={14} />
      </div>
      <div className="col" style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12.5, lineHeight: 1.4 }}>
          <span style={{ fontWeight: 500 }}>{cfg.text}</span>
          {a.field && <span className="faint"> ({a.field})</span>}
        </div>
        <div className="faint" style={{ fontSize: 11.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          {a.who} {a.dept ? `· ${a.dept}` : ""}
        </div>
        <div className="faint" style={{ fontSize: 10.5, marginTop: 2 }}>{a.time} · โดย {a.by}</div>
      </div>
    </div>
  );
};

window.Dashboard = Dashboard;