"use client"

import { useState } from "react"
import { useTranslations } from "next-intl"
import { CalendarDays } from "lucide-react"

import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { EmptyState } from "@/shared/components/ui/empty-state"
import type { LeaveRequestListItem } from "../types"
import { LeaveReviewDialog } from "./leave-review-dialog"

/**
 * 教师审批列表（带审批按钮）。
 *
 * 列表展示待审批/已审批的请假申请；点击「审批」按钮打开对话框。
 * 审批成功后调用 onReviewed 回调（父组件刷新列表）。
 */
export function LeaveReviewList({
  items,
  onReviewed,
  emptyTitle,
  emptyDescription,
}: {
  items: LeaveRequestListItem[]
  onReviewed?: () => void
  emptyTitle: string
  emptyDescription: string
}) {
  const t = useTranslations("leave")
  const [selected, setSelected] = useState<LeaveRequestListItem | null>(null)
  const [open, setOpen] = useState(false)

  if (items.length === 0) {
    return (
      <EmptyState
        icon={CalendarDays}
        title={emptyTitle}
        description={emptyDescription}
        className="border-none shadow-none"
      />
    )
  }

  const handleReviewClick = (item: LeaveRequestListItem) => {
    if (item.status !== "pending") return
    setSelected(item)
    setOpen(true)
  }

  return (
    <>
      <div className="space-y-3">
        {items.map((item) => {
          const isPending = item.status === "pending"
          return (
            <Card key={item.id}>
              <CardHeader className="pb-3">
                <div className="flex items-start justify-between gap-3">
                  <div className="space-y-1">
                    <CardTitle className="text-base">
                      {item.studentName}
                      <span className="ml-2 text-muted-foreground font-normal">·</span>
                      <span className="ml-2 text-muted-foreground font-normal">{item.className}</span>
                    </CardTitle>
                    <p className="text-sm text-muted-foreground">
                      {t("types." + item.leaveType)} · {item.startDate} ~ {item.endDate}
                    </p>
                  </div>
                  <div className="flex items-center gap-2">
                    <Badge variant={isPending ? "secondary" : "outline"}>
                      {t("status." + item.status)}
                    </Badge>
                    {isPending && (
                      <Button size="sm" variant="default" onClick={() => handleReviewClick(item)}>
                        {t("review.openButton")}
                      </Button>
                    )}
                  </div>
                </div>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="text-sm">
                  <span className="text-muted-foreground">{t("list.reason")}：</span>
                  <span>{item.reason}</span>
                </div>
                {item.reviewerName && item.reviewedAt && (
                  <div className="text-sm text-muted-foreground">
                    {t("list.reviewedBy", { name: item.reviewerName, date: item.reviewedAt.slice(0, 10) })}
                  </div>
                )}
                {item.reviewComment && (
                  <div className="rounded-md bg-muted/50 p-2 text-sm">
                    <span className="text-muted-foreground">{t("list.reviewComment")}：</span>
                    <span>{item.reviewComment}</span>
                  </div>
                )}
                {item.attendanceSynced && (
                  <div className="text-xs text-emerald-600 dark:text-emerald-400">
                    {t("list.attendanceSynced")}
                  </div>
                )}
              </CardContent>
            </Card>
          )
        })}
      </div>

      <LeaveReviewDialog
        leaveRequest={selected}
        open={open}
        onOpenChange={setOpen}
        onReviewed={onReviewed}
      />
    </>
  )
}
