/** The attendance desk — presence per person per day, corrected in place. */
import { useState } from "react";
import { Text } from "@lotics/ui/text";
import { colors, solid } from "@lotics/ui/colors";
import { ActionMenu } from "@lotics/ui/action_menu";
import { Avatar } from "@lotics/ui/avatar";
import { Status } from "@lotics/ui/status";
import { Box } from "@lotics/ui/box";
import { Button } from "@lotics/ui/button";
import { Card } from "@lotics/ui/card";
import { Divider } from "@lotics/ui/divider";
import { Drawer, DrawerScrollArea } from "@lotics/ui/drawer";
import { ScrollArea } from "@lotics/ui/scroll_area";
import { Stack } from "@lotics/ui/stack";
import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
import { MetricStrip } from "@lotics/ui/metric_strip";
import { Select } from "@lotics/ui/select";
import { StateMatrix, type StateMatrixState } from "@lotics/ui/state_matrix";
import { Tabs } from "@lotics/ui/tabs";

// ─────────────────────────────────────────────────────────────────────────────
// Template, Attendance. The daily attendance desk: who is in, who
// is late, who is out, plus the weekly per-person grid. Emerald = presence;
// badge colors carry the status meaning (amber late / red absent / blue leave).
//
// Grammar: zinc-50 canvas, header + month Select, MetricStrip (four counts),
// Tabs Today / This week. "Today" = one banded roster Card — each row
// press-opens the employee workspace Drawer (◀ ▶ sequencing) and carries a
// ⋯ ActionMenu with the day's quick fixes. "This week" = one StateMatrix —
// a person per row, the weekdays named once across the top, a glyph per day;
// a cell opens the same workspace Drawer.
// ─────────────────────────────────────────────────────────────────────────────

type TrangThai = "co_mat" | "di_muon" | "vang" | "nghi_phep";
type NgayCong = "du" | "muon" | "vang" | "phep";

interface NhanVien {
  id: string;
  ten: string;
  chucVu: string;
  vao?: string;
  ra?: string;
  trangThai: TrangThai;
  /** Minutes late — only for di_muon rows; feeds the badge label. */
  muonPhut?: number;
  /** Hours worked today — only once the person has checked out. */
  tongGio?: string;
  /** T2 → T6 of the current week. */
  tuan: NgayCong[];
  tongTuan: string;
}

const NHAN_VIEN: NhanVien[] = [
  { id: "NV-01", ten: "Daniel Reed", chucVu: "Plant supervisor", vao: "07:52", ra: "17:05", trangThai: "co_mat", tongGio: "9,2h", tuan: ["du", "du", "du", "du", "du"], tongTuan: "42,1h" },
  { id: "NV-02", ten: "Tessa Tran", chucVu: "Accountant", vao: "07:58", trangThai: "co_mat", tuan: ["du", "du", "muon", "du", "du"], tongTuan: "40,6h" },
  { id: "NV-03", ten: "Martin Pike", chucVu: "Sales rep", vao: "08:12", trangThai: "di_muon", muonPhut: 12, tuan: ["muon", "du", "du", "muon", "muon"], tongTuan: "39,8h" },
  { id: "NV-04", ten: "Helen Lee", chucVu: "Warehouse keeper", vao: "07:45", ra: "17:02", trangThai: "co_mat", tongGio: "9,3h", tuan: ["du", "du", "du", "du", "du"], tongTuan: "41,9h" },
  { id: "NV-05", ten: "Nolan Hayes", chucVu: "Delivery driver", trangThai: "vang", tuan: ["du", "vang", "du", "du", "vang"], tongTuan: "24,3h" },
  { id: "NV-06", ten: "Maria Vu", chucVu: "HR & admin", trangThai: "nghi_phep", tuan: ["du", "du", "phep", "phep", "phep"], tongTuan: "16,4h" },
  { id: "NV-07", ten: "Bruno Dale", chucVu: "Machine operator", vao: "07:49", trangThai: "co_mat", tuan: ["du", "du", "du", "du", "du"], tongTuan: "42,0h" },
  { id: "NV-08", ten: "Nina Burke", chucVu: "Sales rep", vao: "08:27", trangThai: "di_muon", muonPhut: 27, tuan: ["du", "muon", "du", "du", "muon"], tongTuan: "40,2h" },
  { id: "NV-09", ten: "Theo Nash", chucVu: "Maintenance", vao: "07:56", ra: "16:45", trangThai: "co_mat", tongGio: "8,8h", tuan: ["du", "du", "du", "du", "du"], tongTuan: "41,7h" },
];

const TRANG_THAI: Record<TrangThai, { label: string; color: "emerald" | "amber" | "red" | "blue" }> = {
  co_mat: { label: "Present", color: "emerald" },
  di_muon: { label: "Late", color: "amber" },
  vang: { label: "Absent", color: "red" },
  nghi_phep: { label: "On leave", color: "blue" },
};

const NGAY_CONG: (StateMatrixState & { key: NgayCong })[] = [
  { key: "du", label: "Full day", color: "emerald" },
  { key: "muon", label: "Late", color: "amber" },
  { key: "vang", label: "Absent", color: "red", shape: "hollow" },
  { key: "phep", label: "On leave", color: "blue", shape: "dot" },
];
const ngayCong = (k: NgayCong) => NGAY_CONG.find((n) => n.key === k) ?? NGAY_CONG[0];

const THANG = [
  { label: "April 2026", value: "2026-04" },
  { label: "May 2026", value: "2026-05" },
  { label: "June 2026", value: "2026-06" },
];

const TAB = [
  { label: "Today", value: "hom_nay" },
  { label: "This week", value: "tuan_nay" },
];

const NGAY_TUAN = ["T2", "T3", "T4", "T5", "T6"];
const NGAY_TUAN_DAY = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];

const COLUMNS: TableColumn[] = [
  { key: "ten", label: "Employee", flex: 1, sortable: true, lines: 2 },
  { key: "vao", label: "In – out", width: 112, align: "right", sortable: true },
  { key: "trangThai", label: "Status", width: 124, sortable: true },
  { key: "tongGio", label: "Hours", width: 72, align: "right", sortable: true },
];

function badgeLabel(nv: NhanVien): string {
  const tt = TRANG_THAI[nv.trangThai];
  return nv.trangThai === "di_muon" && nv.muonPhut !== undefined ? `${tt.label} ${nv.muonPhut}ph` : tt.label;
}

/** One weekday marker in the drawer's day list — the same glyph the week grid draws. */
function DayCell({ ngay }: { ngay: NgayCong }) {
  const s = ngayCong(ngay);
  const hollow = s.shape === "hollow";
  const dot = s.shape === "dot";
  return (
    <Box style={{ width: 22, flexShrink: 0, alignItems: "center" }}>
      <Box
        style={{
          width: dot ? 6 : 12,
          height: dot ? 6 : 12,
          flexShrink: 0,
          borderRadius: dot
            ? "var(--lotics-radius-full)"
            : "calc(var(--lotics-radius-control) - var(--lotics-space-8))",
          background: hollow ? colors.white : solid(s.color),
          border: hollow ? `1.5px solid ${solid(s.color)}` : undefined,
        }}
      />
    </Box>
  );
}

/** The day's quick fixes for one person — the ⋯ door; the row press is the workspace door. */
function HomNayMenu({ nv }: { nv: NhanVien }) {
  return (
    <ActionMenu
      accessibilityLabel={`Actions for ${nv.ten}`}
      items={[
        { key: "sua_gio", label: "Adjust hours", icon: "pencil", onPress: () => {} },
        { key: "nghi_phep", label: "Record leave", icon: "calendar-off", onPress: () => {} },
        { key: "nhac", label: "Remind to clock in", icon: "bell", disabled: nv.vao !== undefined, onPress: () => {} },
        { key: "danh_dau_vang", label: "Mark absent", icon: "ban", danger: true, disabled: nv.trangThai === "vang", onPress: () => {} },
      ]}
    />
  );
}

function HomNayRow({ nv, selected, onPress }: { nv: NhanVien; selected: boolean; onPress: () => void }) {
  const tt = TRANG_THAI[nv.trangThai];
  return (
    <TableRow
      onPress={onPress}
      selected={selected}
      accessibilityLabel={`Open ${nv.ten}'s day`}
      trailing={<HomNayMenu nv={nv} />}
    >
      <TableCell>
        <Stack direction="row" align="center" gap="none" style={{ gap: 10 }}>
          <Avatar name={nv.ten} size="md" />
          <Stack gap="none" style={{ flex: 1, gap: 2, minWidth: 0 }}>
            <Text weight="medium" lines={1}>{nv.ten}</Text>
            <Text size="sm" color="muted" lines={1}>{nv.chucVu}</Text>
          </Stack>
        </Stack>
      </TableCell>
      <TableCell>
        <Text size="sm">{`${nv.vao ?? "—"} – ${nv.ra ?? "—"}`}</Text>
      </TableCell>
      <TableCell>
        <Status variant="dot" label={badgeLabel(nv)} color={tt.color} />
      </TableCell>
      <TableCell>
        <Text size="sm" weight="medium">{nv.tongGio ?? "—"}</Text>
      </TableCell>
    </TableRow>
  );
}

function KVRow({ label, value }: { label: string; value: string }) {
  return (
    <Stack direction="row" align="center" gap="none" style={{ gap: 12, minHeight: 24 }}>
      <Text size="sm" color="muted" style={{ width: 140 }}>{label}</Text>
      <Text size="sm">{value}</Text>
    </Stack>
  );
}

// The drawer body — compact: identity + today's facts + the week at a glance.
// Keyed by nv.id from the caller so it resets when ◀ ▶ steps.
function NhanVienWorkspace({ nv }: { nv: NhanVien }) {
  const tt = TRANG_THAI[nv.trangThai];
  return (
    <>
      <DrawerScrollArea>
        <Stack gap="none" style={{ gap: 16 }}>
          <Stack direction="row" align="center" gap="none" style={{ gap: 12 }}>
            <Avatar name={nv.ten} size="lg" />
            <Stack gap="none" style={{ flex: 1, gap: 2 }}>
              <Text size="sm" color="muted">{nv.chucVu}</Text>
            </Stack>
            <Status label={badgeLabel(nv)} color={tt.color} />
          </Stack>
          <Stack gap="none" style={{ gap: 6 }}>
            <KVRow label="Clock-in" value={nv.vao ?? "Not clocked"} />
            <KVRow label="Clock-out" value={nv.ra ?? "Not clocked"} />
            <KVRow label="Hours today" value={nv.tongGio ?? "—"} />
          </Stack>
          <Divider />
          <Stack gap="none" style={{ gap: 10 }}>
            <Stack direction="row" align="center" gap="none">
              <Box style={{ flex: 1 }}>
                <Text size="xs" color="muted" weight="medium">This week</Text>
              </Box>
              <Text size="sm" weight="medium">{nv.tongTuan}</Text>
            </Stack>
            <Stack gap="none" style={{ gap: 6 }}>
              {nv.tuan.map((ngay, i) => (
                <Stack key={NGAY_TUAN[i]} direction="row" align="center" gap="none" style={{ gap: 10, minHeight: 24 }}>
                  <Text size="xs" color="muted" style={{ width: 24 }}>{NGAY_TUAN[i]}</Text>
                  <DayCell ngay={ngay} />
                  <Text size="sm">{ngayCong(ngay).label}</Text>
                </Stack>
              ))}
            </Stack>
          </Stack>
        </Stack>
      </DrawerScrollArea>
      {/* pinned footer — the workspace's one primary fix action */}
      <Stack direction="row" align="center" gap="none" style={{ borderTop: `1px solid ${colors.border}`, paddingInline: 16, paddingBlock: 12, gap: 12 }}>
        <Text size="xs" color="muted" style={{ flex: 1 }}>Missed punches get fixed here — every change is audited.</Text>
        <Button title="Adjust hours" color="primary" onPress={() => {}} />
      </Stack>
    </>
  );
}

export function TplAttendance() {
  const [tab, setTab] = useState<string>("hom_nay");
  const [thang, setThang] = useState<string>("2026-06");
  const [openId, setOpenId] = useState<string | null>(null);
  const [sort, setSort] = useState<SortState | null>(null);
  const onSort = (key: string) => setSort(cycleSort(sort, key));

  const dem = (tt: TrangThai) => NHAN_VIEN.filter((nv) => nv.trangThai === tt).length;

  // The Today roster, ordered by the active sort (Hours sorts numerically).
  const sorted = sortBy(NHAN_VIEN, sort, (nv, key) =>
    key === "vao" ? (nv.vao ?? "")
    : key === "trangThai" ? TRANG_THAI[nv.trangThai].label
    : key === "tongGio" ? parseFloat((nv.tongGio ?? "0").replace(",", "."))
    : nv.ten.toLowerCase(),
  );

  // The drawer sequences over the roster's visible (sorted) ordering.
  const openNv = NHAN_VIEN.find((nv) => nv.id === openId) ?? null;
  const seqIndex = openNv ? sorted.findIndex((nv) => nv.id === openNv.id) : -1;

  return (
    <ScrollArea style={{ flex: 1, background: colors.white }}>
      <Box padding={24}>
        <Stack gap={16} style={{ width: "100%", maxWidth: 920, alignSelf: "center" }}>
          {/* header band */}
          <Stack direction="row" align="end" gap="none" style={{ gap: 12 }}>
            <Stack gap="none" style={{ gap: 2, flex: 1 }}>
              <Text size="xxl" weight="semibold">Attendance</Text>
              <Text size="sm" color="muted">Today, Friday 12/06 — in/out times for 9 employees</Text>
            </Stack>
            <Select
              native
              options={THANG}
              value={thang}
              onValueChange={(m) => { if (m !== null) setThang(m); }}
              placeholder="Pick a month"
              style={{ width: 150 }}
            />
          </Stack>

          <MetricStrip
            items={[
              { label: "Present", value: dem("co_mat"), format: "number" },
              { label: "Late", value: dem("di_muon"), format: "number" },
              { label: "Absent", value: dem("vang"), format: "number", tone: "danger" },
              { label: "On leave", value: dem("nghi_phep"), format: "number" },
            ]}
          />

          <Tabs accessibilityLabel="Attendance scope" options={TAB} selectedTab={tab} onSelectTab={setTab} />

          {tab === "hom_nay" ? (
            <Card padding="none">
              <Table columns={COLUMNS} trailing={28} sort={sort} onSort={onSort}>
                {sorted.map((nv) => (
                  <HomNayRow key={nv.id} nv={nv} selected={nv.id === openId} onPress={() => setOpenId(nv.id)} />
                ))}
              </Table>
            </Card>
          ) : (
            <Card>
              {/* The grid owns its axis, its legend and its scroll; a cell is a door to the
                  same workspace the roster opens. Absent is HOLLOW and leave is a DOT so the
                  two kinds of "not here" read apart before the legend is consulted. */}
              <StateMatrix
                columns={NGAY_TUAN.map((d, i) => ({ key: d, label: d, current: i === 2 }))}
                states={NGAY_CONG}
                rows={NHAN_VIEN.map((nv) => ({
                  key: nv.id,
                  leading: <Avatar name={nv.ten} size="sm" />,
                  label: nv.ten,
                  total: nv.tongTuan,
                  cells: nv.tuan.map((ngay, i) => ({
                    state: ngay,
                    pressable: true,
                    name: `${nv.ten}, ${NGAY_TUAN_DAY[i]}: ${ngayCong(ngay).label}`,
                  })),
                }))}
                onPressCell={(rowKey) => setOpenId(rowKey)}
                rowLabelWidth={220}
              />
            </Card>
          )}
        </Stack>

        {/* The overlay is RENDERED and its `open` toggles — a `{cond ? <Drawer/> : null}` is the
            one shape an overlay may not take. Only the BODY is conditional, keyed by id so its
            state resets on ◀ ▶ / ←→ steps. */}
        <Drawer
          open={openNv !== null} onOpenChange={(o) => !o && setOpenId(null)} title={openNv?.ten} width={440}
          onPrev={seqIndex > 0 ? () => setOpenId(NHAN_VIEN[seqIndex - 1].id) : undefined}
          onNext={seqIndex >= 0 && seqIndex < NHAN_VIEN.length - 1 ? () => setOpenId(NHAN_VIEN[seqIndex + 1].id) : undefined}
          position={seqIndex >= 0 ? { index: seqIndex + 1, total: NHAN_VIEN.length } : undefined}
        >
          {openNv ? <NhanVienWorkspace key={openNv.id} nv={openNv} /> : null}
        </Drawer>
      </Box>
    </ScrollArea>
  );
}