import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import { Activity } from "lucide-react";

export function ProcessOverviewWidget() {
  // Mock 데이터 (실제로는 API에서 가져옴)
  const processStates = [
    {
      stage: '견적',
      count: 8,
      color: '#3b82f6',
      details: [
        { customer: 'A전자', item: 'LCD 패널', status: '검토중', amount: 45000000 },
        { customer: 'B산업', item: '금속 부품', status: '대기', amount: 32000000 }
      ]
    },
    {
      stage: '수주',
      count: 12,
      color: '#10b981',
      details: [
        { customer: 'C건설', item: '철골 구조재', status: '승인', amount: 125000000 },
        { customer: 'D제약', item: '포장재', status: '계약중', amount: 28000000 }
      ]
    },
    {
      stage: '생산',
      count: 15,
      color: '#f59e0b',
      details: [
        { customer: 'E자동차', item: '브레이크 패드', status: '진행중', progress: 65 },
        { customer: 'F전기', item: '배전반', status: '진행중', progress: 40 }
      ]
    },
    {
      stage: '검사',
      count: 6,
      color: '#8b5cf6',
      details: [
        { customer: 'G식품', item: '스테인레스 용기', status: '검사중', progress: 80 },
        { customer: 'H화학', item: '반응기', status: '대기', progress: 0 }
      ]
    },
    {
      stage: '출고',
      count: 9,
      color: '#ec4899',
      details: [
        { customer: 'I물류', item: '파레트', status: '포장중', amount: 18000000 },
        { customer: 'J유통', item: '진열대', status: '준비완료', amount: 22000000 }
      ]
    },
    {
      stage: '완료',
      count: 23,
      color: '#06b6d4',
      details: [
        { customer: 'K건설', item: '건자재', status: '납품완료', amount: 85000000 },
        { customer: 'L전자', item: '부품 세트', status: '납품완료', amount: 42000000 }
      ]
    }
  ];

  return (
    <Card className="border border-border/20 bg-card rounded-xl">
      <CardHeader className="pb-3 bg-gradient-to-r from-purple-50 via-blue-50 to-green-50 dark:from-purple-950/30 dark:via-blue-950/30 dark:to-green-950/30 border-b border-border/10">
        <CardTitle className="flex items-center space-x-3">
          <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
            <Activity className="h-6 w-6 text-white" />
          </div>
          <div>
            <span className="text-xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 dark:from-purple-400 dark:to-blue-400 bg-clip-text text-transparent">
              모든 프로세스 현황
            </span>
            <p className="text-xs text-muted-foreground mt-0.5">전체 업무 프로세스 실시간 모니터링</p>
          </div>
        </CardTitle>
      </CardHeader>
      <CardContent className="p-4">
        {/* 프로세스 단계별 카드 */}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mb-6">
          {processStates.map((process: any, index: number) => (
            <div
              key={index}
              className="relative p-4 rounded-xl border-2 transition-all hover:shadow-lg hover:-translate-y-1 cursor-pointer"
              style={{ 
                borderColor: process.color + '40',
                backgroundColor: process.color + '08'
              }}
            >
              <div className="absolute top-2 right-2">
                <div 
                  className="w-8 h-8 rounded-full flex items-center justify-center text-white shadow-md"
                  style={{ backgroundColor: process.color }}
                >
                  {process.count}
                </div>
              </div>
              <div className="text-center mt-6">
                <h3 className="font-bold text-lg mb-1" style={{ color: process.color }}>
                  {process.stage}
                </h3>
                <p className="text-xs text-muted-foreground">진행중</p>
              </div>
            </div>
          ))}
        </div>

        {/* 프로세스별 상세 정보 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {processStates.map((process: any, processIndex: number) => (
            <Card key={processIndex} className="border border-border/20 bg-card/50">
              <CardHeader className="pb-3" style={{ 
                background: `linear-gradient(135deg, ${process.color}10 0%, transparent 100%)`
              }}>
                <CardTitle className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    <div 
                      className="w-8 h-8 rounded-lg flex items-center justify-center text-white"
                      style={{ backgroundColor: process.color }}
                    >
                      {process.count}
                    </div>
                    <span className="font-bold" style={{ color: process.color }}>
                      {process.stage}
                    </span>
                  </div>
                  <Badge variant="outline" style={{ borderColor: process.color, color: process.color }}>
                    {process.details.length}건
                  </Badge>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                {process.details.map((detail: any, detailIndex: number) => (
                  <div 
                    key={detailIndex}
                    className="p-3 bg-muted/30 dark:bg-muted/10 rounded-lg border border-border/50 hover:bg-muted/50 dark:hover:bg-muted/20 transition-colors"
                  >
                    <div className="flex justify-between items-start mb-2">
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-sm text-foreground truncate">{detail.customer}</p>
                        <p className="text-xs text-muted-foreground truncate">{detail.item}</p>
                      </div>
                      <Badge 
                        className="ml-2 whitespace-nowrap text-xs"
                        style={{ 
                          backgroundColor: process.color + '20',
                          color: process.color,
                          border: `1px solid ${process.color}40`
                        }}
                      >
                        {detail.status}
                      </Badge>
                    </div>
                    {detail.amount && (
                      <p className="text-xs">
                        {Math.round(detail.amount / 1000000)}M원
                      </p>
                    )}
                    {detail.progress !== undefined && (
                      <div className="mt-2">
                        <div className="flex justify-between text-xs mb-1">
                          <span className="text-muted-foreground">진행률</span>
                          <span style={{ color: process.color }}>{detail.progress}%</span>
                        </div>
                        <div className="w-full bg-muted/50 rounded-full h-1.5">
                          <div 
                            className="h-1.5 rounded-full transition-all"
                            style={{ 
                              width: `${detail.progress}%`,
                              backgroundColor: process.color
                            }}
                          />
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </CardContent>
            </Card>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}