/**
 * Showcase · case2 — 従業員ダッシュボード (/me)
 *
 * The employee self-service home (`/me/dashboard`), built ENTIRELY from real
 * @godxjp/ui primitives. reference-design handoff recreated as a "skeleton"
 * (intent + look), not a transcription of its prototype DOM.
 *
 * Composition map (prototype block → @godxjp/ui primitive):
 *   page chrome ............ AppShell + Sidebar + Topbar slots
 *   page header + status ... PageContainer (extra slot) + Badge(tone)
 *   PunchCard FSM .......... Card + Button + Badge(tone) + Alert — renders ONLY
 *                            the valid actions for the current session state
 *                            (Off → Working → Break → Closed); checkout locked
 *                            on break shown via Alert tone="warning".
 *   month KPI 2×2 .......... ResponsiveGrid + StatCard (tabular value + delta)
 *   7-day attendance ....... Card + Table + Badge(tone), tabular-nums
 *   today summary .......... Card + Descriptions-style key/value rows
 *
 * DNA applied: default density (comfortable touch on the punch buttons where
 * tapped), small headings, fixed color signaling (success 若竹 / warning 山吹 /
 * attention 朱 / info 群青), tabular numerics, bilingual JP·VI labels on the
 * shared employee surface, quiet factual copy, no emoji.
 */
import * as React from "react";
import {
  CalendarDays,
  ClipboardList,
  Clock,
  Coffee,
  LayoutDashboard,
  LogIn,
  MapPin,
  RotateCcw,
  Settings,
  Square,
} from "lucide-react";

import { Button, Text } from "@godxjp/ui/general";
import { Alert, AlertDescription, AlertTitle } from "@godxjp/ui/feedback";
import {
  Badge,
  Card,
  CardAction,
  CardContent,
  CardHeader,
  CardTitle,
  Descriptions,
  StatCard,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  type BadgeProps,
} from "@godxjp/ui/data-display";
import {
  AppShell,
  Flex,
  PageContainer,
  ResponsiveGrid,
  Separator,
  Sidebar,
  type SidebarSectionProp,
} from "@godxjp/ui/layout";

/** Badge tone vocabulary (derive from BadgeProps — not separately re-exported). */
type BadgeTone = NonNullable<BadgeProps["tone"]>;

// ── /me sidebar (single section — the employee surface is minimal) ────────────

const NAV_SECTIONS: SidebarSectionProp[] = [
  {
    label: "マイページ",
    items: [
      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
      { id: "my-shifts", label: "マイシフト", icon: CalendarDays },
      { id: "timesheet", label: "勤怠表", icon: ClipboardList },
      { id: "settings", label: "設定", icon: Settings },
    ],
  },
];

// ── Punch FSM ─────────────────────────────────────────────────────────────────
//
// The cardinal attendance UX rule: render ONLY the actions valid for the current
// session state — never four disabled buttons. State derives from the last punch
// log (CheckIn / BreakStart / BreakEnd / CheckOut).

type PunchState = "off" | "working" | "break" | "closed";

const PUNCH_STATUS: Record<
  PunchState,
  { label: string; tone: Extract<BadgeTone, "success" | "warning" | "neutral">; meta: string }
> = {
  off: { label: "未出勤 · Chưa chấm công", tone: "neutral", meta: "本日の打刻はまだありません" },
  working: {
    label: "勤務中 · Đang làm",
    tone: "success",
    meta: "出勤 09:30 · 渋谷店 · 経過 4時間12分",
  },
  break: { label: "休憩中 · Nghỉ giải lao", tone: "warning", meta: "休憩開始 13:48 · 経過 12分" },
  closed: {
    label: "退勤済 · Đã tan ca",
    tone: "neutral",
    meta: "09:30 → 18:12 · 休憩 24分 · 残業 0時間",
  },
};

/** A punch button descriptor. `comfortable` density floors these at the 44px touch target. */
type PunchAction = {
  key: string;
  label: string;
  icon: React.ComponentType<{ className?: string }>;
  variant: NonNullable<React.ComponentProps<typeof Button>["variant"]>;
  next: PunchState;
};

const PUNCH_ACTIONS: Record<PunchState, PunchAction[]> = {
  off: [{ key: "in", label: "出勤 · Check In", icon: LogIn, variant: "default", next: "working" }],
  working: [
    {
      key: "break-start",
      label: "休憩開始 · Nghỉ",
      icon: Coffee,
      variant: "outline",
      next: "break",
    },
    { key: "out", label: "退勤 · Check Out", icon: Square, variant: "destructive", next: "closed" },
  ],
  break: [
    {
      key: "break-end",
      label: "休憩終了 · Kết thúc nghỉ",
      icon: RotateCcw,
      variant: "default",
      next: "working",
    },
  ],
  closed: [],
};

function PunchCard() {
  // Seeded "working" so the open/active state is visible at rest (no click needed).
  const [state, setState] = React.useState<PunchState>("working");
  const [clock, setClock] = React.useState("13:42");
  const status = PUNCH_STATUS[state];
  const actions = PUNCH_ACTIONS[state];

  // The defining behaviour: on break, Check Out is locked until the break ends.
  const checkoutLocked = state === "break";

  return (
    <Card density="cozy" className="self-start" accent={state === "break" ? "warning" : undefined}>
      <CardHeader>
        <CardTitle level={2} className="whitespace-nowrap">
          打刻 · Chấm công
        </CardTitle>
        <CardAction>
          <Badge tone={status.tone} variant="outline" className="whitespace-nowrap">
            {status.label}
          </Badge>
        </CardAction>
      </CardHeader>
      <CardContent>
        <Flex direction="col" gap="md">
          {/* Big tabular clock — the signature employee block. */}
          <Flex direction="col" gap="xs">
            {/* Hero numeral at the system's max step (2xl) — the golden scale tops here by design. */}
            <Text as="div" size="2xl" weight="bold" tabular className="leading-none">
              {clock}
            </Text>
            <Text as="div" size="sm" tone="muted">
              {status.meta}
            </Text>
          </Flex>

          {/* Checkout-locked notice (attention, not destructive — it's a fixable hold). */}
          {checkoutLocked ? (
            <Alert tone="warning">
              <AlertTitle>退勤は休憩終了後 · Check Out đang khoá</AlertTitle>
              <AlertDescription>
                休憩中は退勤できません。先に「休憩終了」を打刻してください。
              </AlertDescription>
            </Alert>
          ) : null}

          {/* Valid actions only — comfortable density floors each button at 44px (touch). */}
          {state === "closed" ? (
            <div className="ui-density-comfortable">
              <Button variant="outline" disabled className="w-full">
                <Clock aria-hidden="true" />
                本日の勤務は完了 · Đã hoàn thành
              </Button>
            </div>
          ) : (
            <Flex direction="col" gap="sm">
              <ResponsiveGrid
                columns={{ sm: 2, md: 2, lg: 2 }}
                gap="sm"
                className="ui-density-comfortable"
              >
                {actions.map((a) => {
                  const Icon = a.icon;
                  return (
                    <Button
                      key={a.key}
                      variant={a.variant}
                      className="w-full"
                      onClick={() => {
                        setState(a.next);
                        if (a.next === "closed") setClock("18:12");
                      }}
                    >
                      <Icon aria-hidden="true" />
                      {a.label}
                    </Button>
                  );
                })}
              </ResponsiveGrid>
            </Flex>
          )}

          {/* Geofence caption — the documented punch footer line. */}
          <Flex direction="row" align="center" gap="xs">
            <MapPin className="text-muted-foreground size-3.5 shrink-0" aria-hidden="true" />
            <Text size="2xs" tone="muted" tabular>
              位置情報: 渋谷店 (35.659, 139.700) · 134m
            </Text>
          </Flex>

          {/* Demo state stepper — lets a reader walk every FSM state at rest. */}
          <Separator />
          <Flex direction="row" wrap gap="xs">
            <Text size="2xs" tone="muted" className="self-center">
              状態:
            </Text>
            {(["off", "working", "break", "closed"] as PunchState[]).map((s) => (
              <Button
                key={s}
                variant={s === state ? "secondary" : "ghost"}
                size="xs"
                onClick={() => {
                  setState(s);
                  setClock(s === "closed" ? "18:12" : "13:42");
                }}
              >
                {PUNCH_STATUS[s].label.split(" · ")[0]}
              </Button>
            ))}
          </Flex>
        </Flex>
      </CardContent>
    </Card>
  );
}

// ── Month KPI 2×2 ──────────────────────────────────────────────────────────────

const KPIS: Array<{
  label: string;
  value: string;
  hint: string;
  delta?: string;
  inverse?: boolean;
}> = [
  { label: "勤務時間 · Giờ làm", value: "96.5h", hint: "計画 168h · 達成 57%", delta: "+2.0h" },
  { label: "残業 · Overtime", value: "4.2h", hint: "先月比", delta: "-1.8h", inverse: true },
  { label: "出勤日数 · Ngày đi làm", value: "13", hint: "22営業日中" },
  { label: "遅刻 · Đến trễ", value: "1", hint: "12分 · 5/7", delta: "+1", inverse: true },
];

// ── 7-day attendance ────────────────────────────────────────────────────────────

type DayStatus = "present" | "late" | "leave" | "holiday";

const STATUS_DEF: Record<
  DayStatus,
  { label: string; tone: BadgeTone; variant: BadgeProps["variant"] }
> = {
  present: { label: "通常 · Bình thường", tone: "success", variant: "outline" },
  late: { label: "遅刻 · Đến trễ", tone: "warning", variant: "outline" },
  leave: { label: "有給 · Nghỉ phép", tone: "info", variant: "outline" },
  holiday: { label: "休日 · Nghỉ", tone: "neutral", variant: "outline" },
};

const DAYS: Array<{
  date: string;
  weekday: string;
  work: string;
  ot: string;
  status: DayStatus;
}> = [
  { date: "5/08", weekday: "木", work: "8.0h", ot: "0.0h", status: "present" },
  { date: "5/07", weekday: "水", work: "8.5h", ot: "0.5h", status: "present" },
  { date: "5/06", weekday: "火", work: "7.7h", ot: "0.0h", status: "late" },
  { date: "5/05", weekday: "月", work: "—", ot: "—", status: "holiday" },
  { date: "5/04", weekday: "日", work: "—", ot: "—", status: "holiday" },
  { date: "5/03", weekday: "土", work: "—", ot: "—", status: "leave" },
  { date: "5/02", weekday: "金", work: "8.2h", ot: "1.0h", status: "present" },
];

// ── Today summary ────────────────────────────────────────────────────────────────

const SUMMARY: Array<{ label: string; value: string }> = [
  { label: "シフト · Ca", value: "早番 09:00–18:00" },
  { label: "出勤 · Check In", value: "09:30" },
  { label: "休憩 · Nghỉ", value: "12:00–12:24 (24分)" },
  { label: "退勤予定 · Dự kiến", value: "18:00" },
  { label: "勤務地 · Nơi làm", value: "渋谷店" },
];

export default function EmployeeMeShowcase() {
  const [activeNav, setActiveNav] = React.useState("dashboard");

  const sidebar = (
    <Sidebar
      activeId={activeNav}
      onSelect={setActiveNav}
      sections={NAV_SECTIONS}
      product={{ name: "Acme", role: "田中 美咲 · 渋谷店" }}
    />
  );

  return (
    <AppShell
      sidebar={sidebar}
      topbarLeft={<Text as="strong">マイページ</Text>}
      topbarRight={
        <Flex direction="row" align="center" gap="sm">
          <Badge tone="success" variant="outline" className="whitespace-nowrap">
            勤務中 · 4時間12分
          </Badge>
          <Text size="xs" tone="muted" tabular className="hidden sm:inline">
            2026年5月8日 · 木曜日
          </Text>
        </Flex>
      }
    >
      <PageContainer title="ダッシュボード" subtitle="田中 美咲 · 渋谷店 · 5月度" density="default">
        <Flex direction="col" gap="lg">
          {/* Punch (left) + month KPI 2×2 (right) — stack <lg, side-by-side ≥lg */}
          <ResponsiveGrid columns={{ sm: 1, lg: 3 }} gap="md">
            <div className="lg:col-span-1">
              <PunchCard />
            </div>

            <div className="lg:col-span-2">
              <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 2 }}>
                {KPIS.map((k) => (
                  <StatCard
                    key={k.label}
                    label={k.label}
                    value={k.value}
                    hint={k.hint}
                    delta={k.delta}
                    inverse={k.inverse}
                  />
                ))}
              </ResponsiveGrid>
            </div>
          </ResponsiveGrid>

          {/* 7-day attendance (left, wide) + today summary (right) */}
          <ResponsiveGrid columns={{ sm: 1, lg: 3 }} gap="md">
            <Card className="self-start lg:col-span-2">
              <CardHeader>
                <CardTitle level={2} className="whitespace-nowrap">
                  最近7日 · 7 ngày gần nhất
                </CardTitle>
                <CardAction>
                  <Text size="xs" tone="muted" className="whitespace-nowrap">
                    勤務 47.4h · 残業 1.5h
                  </Text>
                </CardAction>
              </CardHeader>
              <CardContent flush>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="whitespace-nowrap">日付</TableHead>
                      <TableHead className="text-end whitespace-nowrap">勤務</TableHead>
                      <TableHead className="text-end whitespace-nowrap">残業</TableHead>
                      <TableHead className="whitespace-nowrap">状態</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {DAYS.map((d) => {
                      const def = STATUS_DEF[d.status];
                      return (
                        <TableRow key={d.date}>
                          <TableCell className="whitespace-nowrap tabular-nums">
                            {d.date}
                            <Text tone="muted">({d.weekday})</Text>
                          </TableCell>
                          <TableCell className="text-end tabular-nums">{d.work}</TableCell>
                          <TableCell className="text-end tabular-nums">{d.ot}</TableCell>
                          <TableCell>
                            <Badge
                              tone={def.tone}
                              variant={def.variant}
                              className="whitespace-nowrap"
                            >
                              {def.label}
                            </Badge>
                          </TableCell>
                        </TableRow>
                      );
                    })}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>

            <Card className="self-start lg:col-span-1">
              <CardHeader>
                <CardTitle level={2} className="whitespace-nowrap">
                  本日のサマリー · Hôm nay
                </CardTitle>
              </CardHeader>
              <CardContent>
                <Descriptions columns={1} layout="horizontal" labelAlign="start">
                  {SUMMARY.map((s) => (
                    <Descriptions.Item key={s.label} label={s.label}>
                      <Text size="sm" weight="medium" tabular>
                        {s.value}
                      </Text>
                    </Descriptions.Item>
                  ))}
                </Descriptions>
              </CardContent>
            </Card>
          </ResponsiveGrid>
        </Flex>
      </PageContainer>
    </AppShell>
  );
}