'use client';

import {
  HardHat,
  Calendar,
  Building2,
} from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { CollapsibleDashboardCard } from '../components';
import type { ConstructionData } from '../types';

interface ConstructionSectionProps {
  data: ConstructionData;
}

export function ConstructionSection({ data }: ConstructionSectionProps) {
  return (
    <CollapsibleDashboardCard
      icon={<HardHat style={{ color: '#ffffff' }} className="h-5 w-5" />}
      title="시공 현황"
      subtitle="이달 시공 진행 현황"
      rightElement={
        <Badge
          className="bg-blue-500 text-white border-none hover:opacity-90"
        >
          {data.thisMonth}건
        </Badge>
      }
    >
        {/* 시공 요약 카드 */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
          <div className="rounded-lg border p-4 bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-800">
            <div className="flex items-center gap-2 mb-2">
              <HardHat className="h-4 w-4 text-blue-500" />
              <span className="text-sm font-medium text-blue-700 dark:text-blue-300">시공 진행 (7일 이내)</span>
            </div>
            <span className="text-2xl font-bold text-foreground">{data.thisMonth}건</span>
          </div>
          <div className="rounded-lg border p-4 bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-800">
            <div className="flex items-center gap-2 mb-2">
              <Building2 className="h-4 w-4 text-green-500" />
              <span className="text-sm font-medium text-green-700 dark:text-green-300">시공 완료 (7일 이내)</span>
            </div>
            <span className="text-2xl font-bold text-foreground">{data.completed}건</span>
          </div>
        </div>

        {/* 시공 상세 카드 목록 */}
        <div className="space-y-3">
          {data.items.map((item) => (
            <div key={item.id} className="border border-border rounded-lg p-4 hover:bg-muted/50 transition-colors">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <span className="text-sm font-semibold text-foreground">{item.siteName}</span>
                  <Badge
                    variant="outline"
                    className={
                      item.status === '진행중'
                        ? 'text-blue-600 border-blue-200 bg-blue-50 dark:text-blue-400 dark:border-blue-800 dark:bg-blue-900/30'
                        : item.status === '예정'
                        ? 'text-muted-foreground border-border bg-muted/50'
                        : 'text-green-600 border-green-200 bg-green-50 dark:text-green-400 dark:border-green-800 dark:bg-green-900/30'
                    }
                  >
                    {item.status}
                  </Badge>
                </div>
                <span className="text-sm text-muted-foreground">{item.client}</span>
              </div>
              <div className="flex items-center gap-2 text-xs text-muted-foreground mb-2">
                <Calendar className="h-3 w-3" />
                <span>{item.startDate} ~ {item.endDate}</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
                  <div
                    className="h-full rounded-full"
                    style={{
                      width: `${item.progress}%`,
                      backgroundColor: item.progress >= 80 ? '#22c55e' : item.progress >= 50 ? '#f59e0b' : '#3b82f6',
                    }}
                  />
                </div>
                <span className="text-xs font-medium text-muted-foreground min-w-[36px] text-right">{item.progress}%</span>
              </div>
            </div>
          ))}
        </div>
    </CollapsibleDashboardCard>
  );
}
