import { Edit, Trash2 } from "lucide-react";
import { Company } from "@/types/company";
import { COMPANY_TABLE_COLUMNS } from "@/constants/company";
import { Button } from "@/components/ui/button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

interface CompanyTableProps {
  companies: Company[];
  isLoading: boolean;
  onEdit: (company: Company) => void;
  onDelete: (company: Company) => void;
}

/**
 * 회사 목록 테이블 컴포넌트
 */
export function CompanyTable({ companies, isLoading, onEdit, onDelete }: CompanyTableProps) {
  // 상태에 따른 Badge 색상 결정
  console.log(companies);
  // 로딩 상태 렌더링
  if (isLoading) {
    return (
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              {COMPANY_TABLE_COLUMNS.map((column) => (
                <TableHead key={column.key} style={{ width: column.width }}>
                  {column.label}
                </TableHead>
              ))}
              <TableHead className="w-[140px]">작업</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {Array.from({ length: 5 }).map((_, index) => (
              <TableRow key={index}>
                {COMPANY_TABLE_COLUMNS.map((column) => (
                  <TableCell key={column.key}>
                    <div className="bg-muted h-4 animate-pulse rounded"></div>
                  </TableCell>
                ))}
                <TableCell>
                  <div className="flex gap-2">
                    <div className="bg-muted h-8 w-8 animate-pulse rounded"></div>
                    <div className="bg-muted h-8 w-8 animate-pulse rounded"></div>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    );
  }

  // 데이터가 없을 때
  if (companies.length === 0) {
    return (
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              {COMPANY_TABLE_COLUMNS.map((column) => (
                <TableHead key={column.key} style={{ width: column.width }}>
                  {column.label}
                </TableHead>
              ))}
              <TableHead className="w-[140px]">작업</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableCell colSpan={COMPANY_TABLE_COLUMNS.length + 1} className="h-24 text-center">
                <div className="text-muted-foreground flex flex-col items-center justify-center">
                  <p>등록된 회사가 없습니다.</p>
                </div>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </div>
    );
  }

  // 실제 데이터 렌더링
  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader className="bg-muted">
          <TableRow>
            {COMPANY_TABLE_COLUMNS.map((column) => (
              <TableHead key={column.key} style={{ width: column.width }}>
                {column.label}
              </TableHead>
            ))}
            <TableHead className="w-[120px]">작업</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {companies.map((company) => (
            <TableRow key={company.regdate + company.company_code} className="hover:bg-muted/50">
              <TableCell className="font-mono text-sm">{company.company_code}</TableCell>
              <TableCell className="font-medium">{company.company_name}</TableCell>
              <TableCell>{company.writer}</TableCell>
              <TableCell>
                <div className="flex gap-2">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onEdit(company)}
                    className="h-8 w-8 p-0"
                    title="수정"
                  >
                    <Edit className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onDelete(company)}
                    className="text-destructive hover:text-destructive h-8 w-8 p-0 hover:font-bold"
                    title="삭제"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}