/**
 * Showcase · table-tree-rows — ツリー行 (V12)
 *
 * Tree / hierarchical rows inside the real @godxjp/ui DataTable.
 *
 * The lib's `Tree` owns the standalone tree view, but it is single-column — it
 * cannot express a *tabular* hierarchy with per-row metrics, a parent-only
 * disclosure twirl, and DataTable chrome (sticky header, density, sortable
 * columns). So this composes the behaviour from real primitives:
 *
 *   row model ........ flatten an org tree to rows carrying { depth, hasChildren,
 *                      expanded }, then derive `visibleRows` from the open set.
 *   tree column ...... ColumnDef.render indents one --table-cell-indent-space-step
 *                      per level (the token `<TableCell indent>` reads) + a twirl
 *                      chevron Button (ghost icon-sm) that rotates 90° when
 *                      expanded — rendered ONLY on parent rows; leaves get an
 *                      aligning spacer.
 *   metrics .......... 出勤率 / 遅刻 / 残業 as tabular-nums columns; 承認状態 as Badge(tone).
 *   chrome ........... DataTable.Toolbar + DensityToggle + sticky header (built in).
 *
 * DNA: compact density, small headings, tabular-nums on numbers, fixed color
 * signaling (success 若竹 / warning 山吹 / attention 朱 via tone), quiet JP copy,
 * no emoji. 部署 → チーム → 従業員 の勤怠ロールアップ。
 */
import * as React from "react";
import { ChevronRight } from "lucide-react";

import { Badge, DataTable, type ColumnDef } from "@godxjp/ui/data-display";
import { Button, Text } from "@godxjp/ui/general";
import { Card, CardContent, CardHeader, CardTitle } from "@godxjp/ui/data-display";
import { Flex, PageContainer } from "@godxjp/ui/layout";

// ── Org tree (部署 → チーム → 従業員) ───────────────────────────────────────────

type ApprovalKey = "approved" | "pending" | "late";

type Node = {
  id: string;
  /** 部署 / チーム / 従業員 名 */
  name: string;
  /** 区分ラベル（部署・チーム・従業員） */
  kind: "部署" | "チーム" | "従業員";
  /** 出勤率 (%) — ロールアップ済み */
  attendance: number;
  /** 当月の遅刻回数 */
  late: number;
  /** 当月の残業時間 (h) */
  overtime: number;
  /** 申請の承認状態 */
  approval: ApprovalKey;
  children?: Node[];
};

const TREE: Node[] = [
  {
    id: "dpt-sales",
    name: "営業部",
    kind: "部署",
    attendance: 97.2,
    late: 5,
    overtime: 142.5,
    approval: "pending",
    children: [
      {
        id: "tm-sales-1",
        name: "第一営業チーム",
        kind: "チーム",
        attendance: 98.1,
        late: 2,
        overtime: 78.0,
        approval: "approved",
        children: [
          {
            id: "emp-1001",
            name: "佐藤 健太",
            kind: "従業員",
            attendance: 100.0,
            late: 0,
            overtime: 22.5,
            approval: "approved",
          },
          {
            id: "emp-1002",
            name: "鈴木 美咲",
            kind: "従業員",
            attendance: 96.4,
            late: 2,
            overtime: 31.0,
            approval: "approved",
          },
          {
            id: "emp-1003",
            name: "高橋 大輔",
            kind: "従業員",
            attendance: 98.0,
            late: 0,
            overtime: 24.5,
            approval: "approved",
          },
        ],
      },
      {
        id: "tm-sales-2",
        name: "第二営業チーム",
        kind: "チーム",
        attendance: 96.3,
        late: 3,
        overtime: 64.5,
        approval: "pending",
        children: [
          {
            id: "emp-1004",
            name: "田中 由紀",
            kind: "従業員",
            attendance: 94.1,
            late: 3,
            overtime: 38.0,
            approval: "late",
          },
          {
            id: "emp-1005",
            name: "伊藤 翔",
            kind: "従業員",
            attendance: 98.5,
            late: 0,
            overtime: 26.5,
            approval: "pending",
          },
        ],
      },
    ],
  },
  {
    id: "dpt-cs",
    name: "カスタマーサポート部",
    kind: "部署",
    attendance: 95.0,
    late: 8,
    overtime: 96.0,
    approval: "late",
    children: [
      {
        id: "tm-cs-1",
        name: "問い合わせ窓口チーム",
        kind: "チーム",
        attendance: 94.2,
        late: 6,
        overtime: 58.0,
        approval: "late",
        children: [
          {
            id: "emp-2001",
            name: "渡辺 さくら",
            kind: "従業員",
            attendance: 92.0,
            late: 4,
            overtime: 33.5,
            approval: "late",
          },
          {
            id: "emp-2002",
            name: "山本 拓也",
            kind: "従業員",
            attendance: 96.4,
            late: 2,
            overtime: 24.5,
            approval: "pending",
          },
        ],
      },
    ],
  },
];

// ── Flatten + visibility ───────────────────────────────────────────────────────

type Row = {
  id: string;
  name: string;
  kind: Node["kind"];
  attendance: number;
  late: number;
  overtime: number;
  approval: ApprovalKey;
  depth: number;
  hasChildren: boolean;
};

/** Depth-first flatten; only descend into expanded parents. */
function flatten(nodes: Node[], open: Set<string>, depth = 0, out: Row[] = []): Row[] {
  for (const n of nodes) {
    const hasChildren = !!n.children && n.children.length > 0;
    out.push({
      id: n.id,
      name: n.name,
      kind: n.kind,
      attendance: n.attendance,
      late: n.late,
      overtime: n.overtime,
      approval: n.approval,
      depth,
      hasChildren,
    });
    if (hasChildren && open.has(n.id)) {
      flatten(n.children!, open, depth + 1, out);
    }
  }
  return out;
}

/** All parent ids — for the fully-expanded static demo. */
function allParentIds(nodes: Node[], acc: Set<string> = new Set()): Set<string> {
  for (const n of nodes) {
    if (n.children && n.children.length > 0) {
      acc.add(n.id);
      allParentIds(n.children, acc);
    }
  }
  return acc;
}

// ── Approval badge mapping (fixed color signaling) ───────────────────────────────

const APPROVAL: Record<
  ApprovalKey,
  { label: string; tone: "success" | "warning" | "destructive" }
> = {
  // 承認済み → 若竹 / 申請中 → 山吹 / 遅刻あり要確認 → 朱(attention, non-destructive)
  approved: { label: "承認済み", tone: "success" },
  pending: { label: "申請中", tone: "warning" },
  late: { label: "遅刻あり", tone: "destructive" },
};

const pct = new Intl.NumberFormat("ja-JP", {
  style: "percent",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1,
});

const hours = new Intl.NumberFormat("ja-JP", {
  minimumFractionDigits: 1,
  maximumFractionDigits: 1,
});

// ── Tree name cell ───────────────────────────────────────────────────────────────
// One `--table-cell-indent-space-step` per level — the SAME token `<TableCell indent>`
// reads, so the tree and a hand-authored table indent on one contract and a service
// retunes the step in one place. DataTable owns the `<td>` here (the column `render`
// receives no cell), so the level is applied to the cell's content instead of the cell.
// Twirl chevron is rendered ONLY on parent rows; leaves get a spacer so names stay
// aligned at the same depth.

function TreeCell({
  row,
  expanded,
  onToggle,
}: {
  row: Row;
  expanded: boolean;
  onToggle: (id: string) => void;
}) {
  return (
    <Flex
      align="center"
      gap="xs"
      style={{
        paddingInlineStart: `calc(var(--table-cell-indent-space-step) * ${row.depth})`,
      }}
    >
      {row.hasChildren ? (
        <Button
          variant="ghost"
          size="icon-sm"
          aria-label={expanded ? `${row.name} を折りたたむ` : `${row.name} を展開`}
          aria-expanded={expanded}
          onClick={(e) => {
            e.stopPropagation();
            onToggle(row.id);
          }}
        >
          <ChevronRight
            aria-hidden="true"
            className="transition-transform"
            style={{ transform: expanded ? "rotate(90deg)" : undefined }}
          />
        </Button>
      ) : (
        // leaf spacer: same footprint as the icon-sm button so titles align
        <span
          aria-hidden="true"
          className="inline-block size-[calc(var(--control-height)-0.5rem)] shrink-0"
        />
      )}
      <Flex align="center" gap="sm" className="min-w-0">
        <Text weight={row.kind === "従業員" ? "regular" : "medium"} truncate>
          {row.name}
        </Text>
        <Badge variant="outline" tone="neutral" className="shrink-0">
          {row.kind}
        </Badge>
      </Flex>
    </Flex>
  );
}

// ── Shared metric columns (used by both demos) ───────────────────────────────────

function metricColumns(): ColumnDef<Row>[] {
  return [
    {
      key: "attendance",
      header: "出勤率",
      align: "right",
      width: "w-24",
      render: (row) => <Text tabular>{pct.format(row.attendance / 100)}</Text>,
    },
    {
      key: "late",
      header: "遅刻",
      align: "right",
      width: "w-20",
      hiddenOnMobile: true,
      render: (row) =>
        row.late > 0 ? (
          <Text tone="warning" tabular>
            {row.late}回
          </Text>
        ) : (
          <Text tone="muted" tabular>
            0回
          </Text>
        ),
    },
    {
      key: "overtime",
      header: "残業",
      align: "right",
      width: "w-24",
      hiddenOnMobile: true,
      render: (row) => <Text tabular>{hours.format(row.overtime)}h</Text>,
    },
    {
      key: "approval",
      header: "承認状態",
      align: "center",
      width: "w-28",
      render: (row) => {
        const a = APPROVAL[row.approval];
        return (
          <Badge tone={a.tone} variant="outline">
            {a.label}
          </Badge>
        );
      },
    },
  ];
}

// ── Interactive tree DataTable ───────────────────────────────────────────────────

function InteractiveTree() {
  // One branch pre-expanded at rest (Rule #2 — tree behaviour visible without clicks).
  const [open, setOpen] = React.useState<Set<string>>(() => new Set(["dpt-sales", "tm-sales-1"]));

  const toggle = React.useCallback((id: string) => {
    setOpen((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }, []);

  const rows = React.useMemo(() => flatten(TREE, open), [open]);

  const columns: ColumnDef<Row>[] = React.useMemo(
    () => [
      {
        key: "name",
        header: "組織 / 従業員",
        render: (row) => <TreeCell row={row} expanded={open.has(row.id)} onToggle={toggle} />,
      },
      ...metricColumns(),
    ],
    [open, toggle],
  );

  return (
    <DataTable data={rows} columns={columns} getRowId={(row) => row.id} density="compact">
      <DataTable.Toolbar>
        <Text size="xs" tone="muted">
          {rows.length} 行表示 · 部署 {TREE.length} 件
        </Text>
        <DataTable.DensityToggle />
      </DataTable.Toolbar>
      <DataTable.Content />
    </DataTable>
  );
}

// ── Fully-expanded static tree (proves all depth levels + the per-level indent) ──

function ExpandedTree() {
  const open = React.useMemo(() => allParentIds(TREE), []);
  const rows = React.useMemo(() => flatten(TREE, open), [open]);

  const columns: ColumnDef<Row>[] = React.useMemo(
    () => [
      {
        key: "name",
        header: "組織 / 従業員",
        // Static demo: twirls are all open and inert (no toggle handler wired).
        render: (row) => <TreeCell row={row} expanded onToggle={() => {}} />,
      },
      ...metricColumns(),
    ],
    [],
  );

  return <DataTable data={rows} columns={columns} getRowId={(row) => row.id} density="compact" />;
}

export default function Demo() {
  return (
    <PageContainer
      title="ツリー行"
      subtitle="階層行 (部署 → チーム → 従業員) · 階層ごとのインデント · 親行のみ開閉トグル · 勤怠ロールアップ"
      density="compact"
    >
      <Flex direction="col" gap="lg">
        <Card>
          <CardHeader>
            <CardTitle level={2}>開閉可能なツリー</CardTitle>
          </CardHeader>
          <CardContent flush>
            <InteractiveTree />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>全展開（3階層・インデントの確認）</CardTitle>
          </CardHeader>
          <CardContent flush>
            <ExpandedTree />
          </CardContent>
        </Card>
      </Flex>
    </PageContainer>
  );
}