// LeaveRequestList：历史请假列表
// 依据：02-architecture-design.md §15 组件设计
// - 按状态筛选（all/pending/approved/rejected）
// - 显示请假类型 / 日期 / 原因 / 状态徽标 / 审批评论

"use client";

import { useState } from "react";
import type { LeaveRequest, LeaveStatus, LeaveType } from "@/types";
import { cn, formatDate } from "@/lib/utils";

const TYPE_LABELS: Record<LeaveType, string> = {
  sick: "病假",
  personal: "事假",
  family: "家庭假",
  other: "其他",
};

const STATUS_LABELS: Record<LeaveStatus, string> = {
  pending: "待审批",
  approved: "已批准",
  rejected: "已驳回",
  cancelled: "已取消",
};

const STATUS_STYLES: Record<LeaveStatus, string> = {
  pending: "text-warning",
  approved: "text-success",
  rejected: "text-danger",
  cancelled: "text-ink-muted",
};

type FilterValue = "all" | LeaveStatus;

const FILTERS: { value: FilterValue; label: string }[] = [
  { value: "all", label: "全部" },
  { value: "pending", label: "待审批" },
  { value: "approved", label: "已批准" },
  { value: "rejected", label: "已驳回" },
];

interface LeaveRequestListProps {
  leaveRequests: LeaveRequest[];
}

export function LeaveRequestList({ leaveRequests }: LeaveRequestListProps) {
  const [filter, setFilter] = useState<FilterValue>("all");

  const filtered =
    filter === "all"
      ? leaveRequests
      : leaveRequests.filter((l) => l.status === filter);

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-2" role="tablist" aria-label="请假状态筛选">
        {FILTERS.map((f) => (
          <button
            key={f.value}
            type="button"
            role="tab"
            aria-selected={filter === f.value}
            onClick={() => setFilter(f.value)}
            className={cn(
              "rounded px-3 py-1 text-sm transition-colors",
              filter === f.value
                ? "bg-accent text-paper"
                : "border border-rule text-ink-muted hover:bg-paper-elevated",
            )}
          >
            {f.label}
          </button>
        ))}
      </div>

      {filtered.length === 0 ? (
        <p className="rounded border border-rule bg-paper-elevated p-4 text-sm text-ink-muted">
          暂无请假记录
        </p>
      ) : (
        <div className="space-y-3">
          {filtered.map((leave) => (
            <div
              key={leave.id}
              className="rounded border border-rule bg-paper-elevated p-4"
            >
              <div className="flex items-start justify-between">
                <div>
                  <h3 className="font-serif text-base">
                    {TYPE_LABELS[leave.type]}
                  </h3>
                  <p className="mt-1 text-xs text-ink-muted">
                    {leave.childName ?? ""}
                    {leave.className ? ` · ${leave.className}` : ""}
                  </p>
                </div>
                <span
                  className={cn(
                    "text-sm font-medium",
                    STATUS_STYLES[leave.status],
                  )}
                  role="status"
                >
                  {STATUS_LABELS[leave.status]}
                </span>
              </div>

              <div className="mt-3 flex flex-wrap gap-x-6 gap-y-1 text-xs text-ink-muted">
                <span>
                  起始：{formatDate(leave.startDate)}
                </span>
                <span>
                  结束：{formatDate(leave.endDate)}
                </span>
                <span>
                  提交于：{formatDate(leave.submittedAt)}
                </span>
              </div>

              <p className="mt-2 text-sm">{leave.reason}</p>

              {leave.reviewComment && (
                <div className="mt-2 border-t border-rule pt-2">
                  <p className="text-xs text-ink-muted">
                    审批人：{leave.reviewerName ?? "—"}
                  </p>
                  <p className="mt-1 text-sm mark-left">{leave.reviewComment}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default LeaveRequestList;
