import type { ReactNode } from "react";
import { Eye } from "lucide-react";
import { Button } from "@/components/ui/button";
import { TableCell, TableRow } from "@/components/ui/table";
import type { ApplicationItem, ApplicationStatus } from "@/data/mockApplications";

interface ApplicationIdeaRowProps {
  item: ApplicationItem;
  stt: number;
  statusBadge: (status: ApplicationStatus) => ReactNode;
  status: ApplicationStatus;
  departmentLabel: string;
  groupLabel: string;
  evidenceCell: ReactNode;
  onApprove: (applicationId: string) => void;
  onReject: (applicationId: string) => void;
  onReview: (applicationId: string) => void;
  formatDate: (iso: string | null | undefined, withTime?: boolean) => string;
}

export default function ApplicationIdeaRow({
  item,
  stt,
  statusBadge,
  status,
  departmentLabel,
  groupLabel,
  evidenceCell,
  onApprove,
  onReject,
  onReview,
  formatDate,
}: ApplicationIdeaRowProps) {
  return (
    <TableRow>
      <TableCell>{stt}</TableCell>
      <TableCell>{formatDate(item.submittedDate, true)}</TableCell>
      <TableCell className="max-w-[260px] truncate font-semibold" title={item.name}>
        {item.name}
      </TableCell>
      <TableCell>
        <div className="space-y-0.5">
          <div className="font-semibold">{item.author.name}</div>
          <div className="text-xs text-muted-foreground">{item.author.email ?? ""}</div>
          <div className="text-xs text-muted-foreground">{item.author.phone ?? ""}</div>
        </div>
      </TableCell>
      <TableCell className="max-w-[200px] align-top">
        <span className="line-clamp-3" title={departmentLabel}>
          {departmentLabel || "—"}
        </span>
      </TableCell>
      <TableCell>{item.reviewer?.name ?? "—"}</TableCell>
      <TableCell>{item.supervisor?.name ?? "—"}</TableCell>
      <TableCell className="max-w-[220px] align-top">
        <span className="line-clamp-4" title={groupLabel || undefined}>
          {groupLabel || "—"}
        </span>
      </TableCell>
      <TableCell>{statusBadge(status)}</TableCell>
      <TableCell className="text-center">{evidenceCell}</TableCell>
      <TableCell className="text-center">
        <Button
          size="sm"
          className="mr-2 bg-black text-white hover:bg-black/90"
          onClick={() => onApprove(item.id)}
        >
          Duyệt
        </Button>
        <Button size="sm" variant="destructive" onClick={() => onReject(item.id)}>
          Từ chối
        </Button>
      </TableCell>
      <TableCell className="text-center">
        <Button size="icon" variant="outline" onClick={() => onReview(item.id)} aria-label="Xem hồ sơ">
          <Eye className="h-4 w-4" />
        </Button>
      </TableCell>
    </TableRow>
  );
}

