ERP-node/frontend/components/admin/CompanyTable.tsx

import { Edit, Trash2, HardDrive, FileText, Users } 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";
import { useRouter } from "next/navigation";

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

/**
 * 회사 목록 테이블 컴포넌트
 * 데스크톱: 테이블 뷰
 * 모바일/태블릿: 카드 뷰
 */
export function CompanyTable({ companies, isLoading, onEdit, onDelete }: CompanyTableProps) {
  const router = useRouter();

  // 부서 관리 페이지로 이동
  const handleManageDepartments = (company: Company) => {
    router.push(`/admin/company/${company.company_code}/departments`);
  };

  // 디스크 사용량 포맷팅 함수
  const formatDiskUsage = (company: Company) => {
    if (!company.diskUsage) {
      return (
        <div className="text-muted-foreground flex items-center gap-1">
          <HardDrive className="h-3 w-3" />
          <span className="text-xs">정보 없음</span>
        </div>
      );
    }

    const { fileCount, totalSizeMB } = company.diskUsage;

    return (
      <div className="flex flex-col gap-1">
        <div className="flex items-center gap-1">
          <FileText className="text-primary h-3 w-3" />
          <span className="text-xs font-medium">{fileCount}개 파일</span>
        </div>
        <div className="flex items-center gap-1">
          <HardDrive className="text-primary h-3 w-3" />
          <span className="text-xs">{totalSizeMB.toFixed(1)} MB</span>
        </div>
      </div>
    );
  };

  // 로딩 상태 렌더링
  if (isLoading) {
    return (
      <>
        {/* 데스크톱 테이블 스켈레톤 */}
        <div className="bg-card hidden shadow-sm lg:block">
          <Table>
            <TableHeader>
              <TableRow>
                {COMPANY_TABLE_COLUMNS.map((column) => (
                  <TableHead key={column.key} className="h-12 px-6 py-3 text-sm font-semibold">
                    {column.label}
                  </TableHead>
                ))}
                <TableHead className="h-12 px-6 py-3 text-sm font-semibold">디스크 사용량</TableHead>
                <TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {Array.from({ length: 10 }).map((_, index) => (
                <TableRow key={index}>
                  <TableCell className="h-16">
                    <div className="bg-muted h-4 animate-pulse rounded"></div>
                  </TableCell>
                  <TableCell className="h-16">
                    <div className="bg-muted h-4 animate-pulse rounded"></div>
                  </TableCell>
                  <TableCell className="h-16">
                    <div className="bg-muted h-4 animate-pulse rounded"></div>
                  </TableCell>
                  <TableCell className="h-16">
                    <div className="bg-muted h-4 animate-pulse rounded"></div>
                  </TableCell>
                  <TableCell className="h-16">
                    <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>

        {/* 모바일/태블릿 카드 스켈레톤 */}
        <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
          {Array.from({ length: 6 }).map((_, index) => (
            <div key={index} className="bg-card rounded-lg border p-4 shadow-sm">
              <div className="mb-4 flex items-start justify-between">
                <div className="flex-1 space-y-2">
                  <div className="bg-muted h-5 w-32 animate-pulse rounded"></div>
                  <div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
                </div>
              </div>
              <div className="space-y-2 border-t pt-4">
                {Array.from({ length: 3 }).map((_, i) => (
                  <div key={i} className="flex justify-between">
                    <div className="bg-muted h-4 w-16 animate-pulse rounded"></div>
                    <div className="bg-muted h-4 w-32 animate-pulse rounded"></div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </>
    );
  }

  // 데이터가 없을 때
  if (companies.length === 0) {
    return (
      <div className="bg-card flex h-64 flex-col items-center justify-center shadow-sm">
        <div className="flex flex-col items-center gap-2 text-center">
          <p className="text-muted-foreground text-sm">등록된 회사가 없습니다.</p>
        </div>
      </div>
    );
  }

  // 실제 데이터 렌더링
  return (
    <>
      {/* 데스크톱 테이블 뷰 (lg 이상) */}
      <div className="bg-card hidden lg:block">
        <Table>
          <TableHeader>
            <TableRow>
              {COMPANY_TABLE_COLUMNS.map((column) => (
                <TableHead key={column.key} className="h-12 px-6 py-3 text-sm font-semibold">
                  {column.label}
                </TableHead>
              ))}
              <TableHead className="h-12 px-6 py-3 text-sm font-semibold">디스크 사용량</TableHead>
              <TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {companies.map((company) => (
              <TableRow
                key={company.regdate + company.company_code}
                className="bg-background hover:bg-muted/50 transition-colors"
              >
                <TableCell className="h-16 px-6 py-3 font-mono text-sm">{company.company_code}</TableCell>
                <TableCell className="h-16 px-6 py-3 text-sm font-medium">{company.company_name}</TableCell>
                <TableCell className="h-16 px-6 py-3 text-sm">{company.writer}</TableCell>
                <TableCell className="h-16 px-6 py-3">{formatDiskUsage(company)}</TableCell>
                <TableCell className="h-16 px-6 py-3">
                  <div className="flex gap-2">
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => handleManageDepartments(company)}
                      className="h-8 w-8"
                      aria-label="부서관리"
                    >
                      <Users className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => onEdit(company)}
                      className="h-8 w-8"
                      aria-label="수정"
                    >
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => onDelete(company)}
                      className="text-destructive hover:bg-destructive/10 hover:text-destructive h-8 w-8"
                      aria-label="삭제"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
      <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
        {companies.map((company) => (
          <div
            key={company.regdate + company.company_code}
            className="bg-card hover:bg-muted/50 rounded-lg border p-4 shadow-sm transition-colors"
          >
            {/* 헤더 */}
            <div className="mb-4 flex items-start justify-between">
              <div className="flex-1">
                <h3 className="text-base font-semibold">{company.company_name}</h3>
                <p className="text-muted-foreground mt-1 font-mono text-sm">{company.company_code}</p>
              </div>
            </div>

            {/* 정보 */}
            <div className="space-y-2 border-t pt-4">
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">작성자</span>
                <span className="font-medium">{company.writer}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">디스크 사용량</span>
                <div>{formatDiskUsage(company)}</div>
              </div>
            </div>

            {/* 액션 */}
            <div className="mt-4 flex gap-2 border-t pt-4">
              <Button
                variant="outline"
                size="sm"
                onClick={() => handleManageDepartments(company)}
                className="h-9 flex-1 gap-2 text-sm"
              >
                <Users className="h-4 w-4" />
                부서
              </Button>
              <Button variant="outline" size="sm" onClick={() => onEdit(company)} className="h-9 flex-1 gap-2 text-sm">
                <Edit className="h-4 w-4" />
                수정
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => onDelete(company)}
                className="text-destructive hover:bg-destructive/10 hover:text-destructive h-9 flex-1 gap-2 text-sm"
              >
                <Trash2 className="h-4 w-4" />
                삭제
              </Button>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}