sam-react-prod/src/components/business/CEODashboard/sections/UnshippedSection.tsx

'use client';

import { useState } from 'react';
import { PackageX } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { MultiSelectCombobox } from '@/components/ui/multi-select-combobox';
import { CollapsibleDashboardCard } from '../components';
import type { UnshippedData } from '../types';

interface UnshippedSectionProps {
  data: UnshippedData;
}

export function UnshippedSection({ data }: UnshippedSectionProps) {
  const [clientFilter, setClientFilter] = useState<string[]>([]);

  const clients = [...new Set(data.items.map((item) => item.orderClient))];

  const filteredItems = data.items
    .filter((item) => clientFilter.length === 0 || clientFilter.includes(item.orderClient));

  return (
    <CollapsibleDashboardCard
      icon={<PackageX style={{ color: '#ffffff' }} className="h-5 w-5" />}
      title="미출고 내역"
      subtitle="납기일 기준 미출고 현황"
      rightElement={
        <Badge
          className="bg-red-500 text-white border-none hover:opacity-90"
        >
          {data.items.length}건
        </Badge>
      }
    >
        {/* 미출고 테이블 */}
        <div className="border border-border rounded-lg overflow-hidden">
          <div className="p-3 bg-muted/50 border-b border-border space-y-2">
            <h4 className="text-sm font-semibold text-foreground">미출고 목록</h4>
            <MultiSelectCombobox
              options={clients.map((c) => ({ value: c, label: c }))}
              value={clientFilter}
              onChange={setClientFilter}
              placeholder="전체 거래처"
              className="w-full h-8 text-xs"
            />
          </div>
          <div className="overflow-x-auto">
            <table className="w-full text-sm min-w-[550px]">
              <thead>
                <tr className="bg-muted/50 border-b border-border">
                  <th className="px-4 py-2 text-center text-muted-foreground font-medium w-12">No</th>
                  <th className="px-4 py-2 text-left text-muted-foreground font-medium">포트번호</th>
                  <th className="px-4 py-2 text-left text-muted-foreground font-medium">현장명</th>
                  <th className="px-4 py-2 text-left text-muted-foreground font-medium">수주처</th>
                  <th className="px-4 py-2 text-center text-muted-foreground font-medium">납기일</th>
                  <th className="px-4 py-2 text-center text-muted-foreground font-medium">남은일</th>
                </tr>
              </thead>
              <tbody>
                {filteredItems.map((item, idx) => (
                  <tr key={item.id} className="border-b border-border last:border-b-0 hover:bg-muted/50">
                    <td className="px-4 py-2 text-center text-muted-foreground">{idx + 1}</td>
                    <td className="px-4 py-2 text-muted-foreground">{item.portNo}</td>
                    <td className="px-4 py-2 text-muted-foreground">{item.siteName}</td>
                    <td className="px-4 py-2 text-muted-foreground">{item.orderClient}</td>
                    <td className="px-4 py-2 text-center text-muted-foreground">{item.dueDate}</td>
                    <td className="px-4 py-2 text-center">
                      <Badge
                        variant="outline"
                        className={
                          item.daysLeft <= 3
                            ? 'text-red-600 border-red-200 bg-red-50 dark:text-red-400 dark:border-red-800 dark:bg-red-900/30'
                            : item.daysLeft <= 7
                            ? 'text-orange-600 border-orange-200 bg-orange-50 dark:text-orange-400 dark:border-orange-800 dark:bg-orange-900/30'
                            : 'text-muted-foreground border-border bg-muted/50'
                        }
                      >
                        D-{item.daysLeft}
                      </Badge>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
    </CollapsibleDashboardCard>
  );
}