"use client";

import { DriverInfo, DriverManagementConfig } from "../types";
import { getStatusColor, getStatusLabel, formatTime, COLUMN_LABELS } from "./driverUtils";
import { Progress } from "@/components/ui/progress";

interface DriverListViewProps {
  drivers: DriverInfo[];
  config: DriverManagementConfig;
  isCompact?: boolean; // 작은 크기 (2x2 등)
}

export function DriverListView({ drivers, config, isCompact = false }: DriverListViewProps) {
  const { visibleColumns } = config;

  // 컴팩트 모드: 요약 정보만 표시
  if (isCompact) {
    const stats = {
      driving: drivers.filter((d) => d.status === "driving").length,
      standby: drivers.filter((d) => d.status === "standby").length,
      resting: drivers.filter((d) => d.status === "resting").length,
      maintenance: drivers.filter((d) => d.status === "maintenance").length,
    };

    return (
      <div className="flex h-full flex-col items-center justify-center space-y-3 p-4">
        <div className="text-center">
          <div className="text-3xl font-bold text-gray-900">{drivers.length}</div>
          <div className="text-sm text-gray-600">전체 기사</div>
        </div>
        <div className="grid w-full grid-cols-2 gap-2 text-center text-xs">
          <div className="rounded-lg bg-green-100 p-2">
            <div className="font-semibold text-green-800">{stats.driving}</div>
            <div className="text-green-600">운행중</div>
          </div>
          <div className="rounded-lg bg-gray-100 p-2">
            <div className="font-semibold text-gray-800">{stats.standby}</div>
            <div className="text-gray-600">대기중</div>
          </div>
          <div className="rounded-lg bg-orange-100 p-2">
            <div className="font-semibold text-orange-800">{stats.resting}</div>
            <div className="text-orange-600">휴식중</div>
          </div>
          <div className="rounded-lg bg-red-100 p-2">
            <div className="font-semibold text-red-800">{stats.maintenance}</div>
            <div className="text-red-600">점검중</div>
          </div>
        </div>
      </div>
    );
  }

  // 빈 데이터 처리
  if (drivers.length === 0) {
    return (
      <div className="flex h-full items-center justify-center text-sm text-gray-500">조회된 기사 정보가 없습니다</div>
    );
  }

  return (
    <div className="h-full w-full overflow-auto">
      <table className="min-w-full divide-y divide-gray-200">
        <thead className="sticky top-0 z-10 bg-gray-50">
          <tr>
            {visibleColumns.includes("status") && (
              <th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">{COLUMN_LABELS.status}</th>
            )}
            {visibleColumns.includes("name") && (
              <th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">{COLUMN_LABELS.name}</th>
            )}
            {visibleColumns.includes("vehicleNumber") && (
              <th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">{COLUMN_LABELS.vehicleNumber}</th>
            )}
            {visibleColumns.includes("vehicleType") && (
              <th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">{COLUMN_LABELS.vehicleType}</th>
            )}
            {visibleColumns.includes("departure") && (
              <th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">{COLUMN_LABELS.departure}</th>
            )}
            {visibleColumns.includes("destination") && (
              <th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">{COLUMN_LABELS.destination}</th>
            )}
            {visibleColumns.includes("departureTime") && (
              <th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">{COLUMN_LABELS.departureTime}</th>
            )}
            {visibleColumns.includes("estimatedArrival") && (
              <th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">
                {COLUMN_LABELS.estimatedArrival}
              </th>
            )}
            {visibleColumns.includes("phone") && (
              <th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">{COLUMN_LABELS.phone}</th>
            )}
            {visibleColumns.includes("progress") && (
              <th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">{COLUMN_LABELS.progress}</th>
            )}
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-200 bg-white">
          {drivers.map((driver) => {
            const statusColors = getStatusColor(driver.status);
            return (
              <tr key={driver.id} className="transition-colors hover:bg-gray-50">
                {visibleColumns.includes("status") && (
                  <td className="px-3 py-2">
                    <span
                      className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${statusColors.bg} ${statusColors.text}`}
                    >
                      {getStatusLabel(driver.status)}
                    </span>
                  </td>
                )}
                {visibleColumns.includes("name") && (
                  <td className="px-3 py-2 text-sm font-medium text-gray-900">{driver.name}</td>
                )}
                {visibleColumns.includes("vehicleNumber") && (
                  <td className="px-3 py-2 text-sm text-gray-700">{driver.vehicleNumber}</td>
                )}
                {visibleColumns.includes("vehicleType") && (
                  <td className="px-3 py-2 text-sm text-gray-600">{driver.vehicleType}</td>
                )}
                {visibleColumns.includes("departure") && (
                  <td className="px-3 py-2 text-sm text-gray-700">
                    {driver.departure || <span className="text-gray-400">-</span>}
                  </td>
                )}
                {visibleColumns.includes("destination") && (
                  <td className="px-3 py-2 text-sm text-gray-700">
                    {driver.destination || <span className="text-gray-400">-</span>}
                  </td>
                )}
                {visibleColumns.includes("departureTime") && (
                  <td className="px-3 py-2 text-sm text-gray-600">{formatTime(driver.departureTime)}</td>
                )}
                {visibleColumns.includes("estimatedArrival") && (
                  <td className="px-3 py-2 text-sm text-gray-600">{formatTime(driver.estimatedArrival)}</td>
                )}
                {visibleColumns.includes("phone") && (
                  <td className="px-3 py-2 text-sm text-gray-600">{driver.phone}</td>
                )}
                {visibleColumns.includes("progress") && (
                  <td className="px-3 py-2">
                    {driver.progress !== undefined ? (
                      <div className="flex items-center space-x-2">
                        <Progress value={driver.progress} className="h-2 w-16" />
                        <span className="text-xs text-gray-600">{driver.progress}%</span>
                      </div>
                    ) : (
                      <span className="text-gray-400">-</span>
                    )}
                  </td>
                )}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}