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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
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 (
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <div>
            <CardTitle className="text-sm font-medium">디스크 사용량</CardTitle>
            <CardDescription>전체 회사 파일 저장 현황</CardDescription>
          </div>
          <Button variant="outline" size="sm" onClick={onRefresh} disabled={isLoading} className="h-8 w-8 p-0">
            <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
          </Button>
        </CardHeader>
        <CardContent>
          <div className="text-muted-foreground flex items-center justify-center py-6">
            <div className="text-center">
              <HardDrive className="mx-auto mb-2 h-8 w-8" />
              <p className="text-sm">디스크 사용량 정보를 불러오는 중...</p>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

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

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <div>
          <CardTitle className="text-sm font-medium">디스크 사용량 현황</CardTitle>
          <CardDescription>전체 회사 파일 저장 통계</CardDescription>
        </div>
        <Button
          variant="outline"
          size="sm"
          onClick={onRefresh}
          disabled={isLoading}
          className="h-8 w-8 p-0"
          title="새로고침"
        >
          <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
        </Button>
      </CardHeader>
      <CardContent>
        <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-blue-500" />
            <div>
              <p className="text-muted-foreground text-xs">총 회사</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-green-500" />
            <div>
              <p className="text-muted-foreground text-xs">총 파일</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-orange-500" />
            <div>
              <p className="text-muted-foreground text-xs">총 용량</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-gray-500" />
            <div>
              <p className="text-muted-foreground text-xs">마지막 확인</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-muted-foreground text-xs">저장소 상태</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-gray-200">
            <div
              className={`h-2 rounded-full transition-all duration-300 ${
                summary.totalSizeMB > 1000 ? "bg-destructive/100" : summary.totalSizeMB > 500 ? "bg-yellow-500" : "bg-green-500"
              }`}
              style={{
                width: `${Math.min((summary.totalSizeMB / 2000) * 100, 100)}%`,
              }}
            />
          </div>
          <div className="text-muted-foreground mt-1 flex justify-between text-xs">
            <span>0 MB</span>
            <span>2,000 MB (권장 최대)</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}