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

import { RefreshCw, HardDrive, FileText, Building2, Clock } from "lucide-react";
import { AllDiskUsageInfo } from "@/types/company";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

interface DiskUsageSummaryProps {
  diskUsageInfo: AllDiskUsageInfo | null;
  isLoading: boolean;
  onRefresh: () => void;
}

/**
 * 디스크 사용량 요약 정보 컴포넌트
 */
export function DiskUsageSummary({ diskUsageInfo, isLoading, onRefresh }: DiskUsageSummaryProps) {
  if (!diskUsageInfo) {
    return (
      <div className="rounded-lg border bg-card p-6 shadow-sm">
        <div className="mb-4 flex items-center justify-between">
          <div>
            <h3 className="text-sm font-semibold">디스크 사용량</h3>
            <p className="text-xs text-muted-foreground">전체 회사 파일 저장 현황</p>
          </div>
          <Button 
            variant="outline" 
            size="icon" 
            onClick={onRefresh} 
            disabled={isLoading} 
            className="h-8 w-8"
            aria-label="새로고침"
          >
            <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
          </Button>
        </div>
        <div className="flex items-center justify-center py-6 text-muted-foreground">
          <div className="text-center">
            <HardDrive className="mx-auto mb-2 h-8 w-8" />
            <p className="text-sm">디스크 사용량 정보를 불러오는 중...</p>
          </div>
        </div>
      </div>
    );
  }

  const { summary, lastChecked } = diskUsageInfo;
  const lastCheckedDate = new Date(lastChecked);

  return (
    <div className="rounded-lg border bg-card p-6 shadow-sm">
      <div className="mb-4 flex items-center justify-between">
        <div>
          <h3 className="text-sm font-semibold">디스크 사용량 현황</h3>
          <p className="text-xs text-muted-foreground">전체 회사 파일 저장 통계</p>
        </div>
        <Button
          variant="outline"
          size="icon"
          onClick={onRefresh}
          disabled={isLoading}
          className="h-8 w-8"
          aria-label="새로고침"
        >
          <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
        </Button>
      </div>

      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
        {/* 총 회사 수 */}
        <div className="flex items-center space-x-2">
          <Building2 className="h-4 w-4 text-primary" />
          <div>
            <p className="text-xs text-muted-foreground">총 회사</p>
            <p className="text-lg font-semibold">{summary.totalCompanies}개</p>
          </div>
        </div>

        {/* 총 파일 수 */}
        <div className="flex items-center space-x-2">
          <FileText className="h-4 w-4 text-primary" />
          <div>
            <p className="text-xs text-muted-foreground">총 파일</p>
            <p className="text-lg font-semibold">{summary.totalFiles.toLocaleString()}개</p>
          </div>
        </div>

        {/* 총 용량 */}
        <div className="flex items-center space-x-2">
          <HardDrive className="h-4 w-4 text-primary" />
          <div>
            <p className="text-xs text-muted-foreground">총 용량</p>
            <p className="text-lg font-semibold">{summary.totalSizeMB.toFixed(1)} MB</p>
          </div>
        </div>

        {/* 마지막 업데이트 */}
        <div className="flex items-center space-x-2">
          <Clock className="h-4 w-4 text-muted-foreground" />
          <div>
            <p className="text-xs text-muted-foreground">마지막 확인</p>
            <p className="text-xs font-medium">
              {lastCheckedDate.toLocaleString("ko-KR", {
                month: "short",
                day: "numeric",
                hour: "2-digit",
                minute: "2-digit",
              })}
            </p>
          </div>
        </div>
      </div>

      {/* 용량 기준 상태 표시 */}
      <div className="mt-4 border-t pt-4">
        <div className="flex items-center justify-between">
          <span className="text-xs text-muted-foreground">저장소 상태</span>
          <Badge
            variant={summary.totalSizeMB > 1000 ? "destructive" : summary.totalSizeMB > 500 ? "secondary" : "default"}
          >
            {summary.totalSizeMB > 1000 ? "용량 주의" : summary.totalSizeMB > 500 ? "보통" : "여유"}
          </Badge>
        </div>

        {/* 간단한 진행 바 */}
        <div className="mt-2 h-2 w-full rounded-full bg-muted">
          <div
            className={`h-2 rounded-full transition-all duration-300 ${
              summary.totalSizeMB > 1000 ? "bg-destructive" : summary.totalSizeMB > 500 ? "bg-primary/60" : "bg-primary"
            }`}
            style={{
              width: `${Math.min((summary.totalSizeMB / 2000) * 100, 100)}%`,
            }}
          />
        </div>
        <div className="mt-1 flex justify-between text-xs text-muted-foreground">
          <span>0 MB</span>
          <span>2,000 MB (권장 최대)</span>
        </div>
      </div>
    </div>
  );
}