"use client";

import { useState } from "react";
import { DriverManagementConfig } from "../types";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Input } from "@/components/ui/input";
import { Card } from "@/components/ui/card";
import { COLUMN_LABELS, DEFAULT_VISIBLE_COLUMNS } from "./driverUtils";

interface DriverManagementSettingsProps {
  config: DriverManagementConfig;
  onSave: (config: DriverManagementConfig) => void;
  onClose: () => void;
}

export function DriverManagementSettings({ config, onSave, onClose }: DriverManagementSettingsProps) {
  const [localConfig, setLocalConfig] = useState<DriverManagementConfig>(config);

  const handleSave = () => {
    onSave(localConfig);
  };

  // 컬럼 토글
  const toggleColumn = (column: string) => {
    const newColumns = localConfig.visibleColumns.includes(column)
      ? localConfig.visibleColumns.filter((c) => c !== column)
      : [...localConfig.visibleColumns, column];
    setLocalConfig({ ...localConfig, visibleColumns: newColumns });
  };

  return (
    <div className="flex h-full max-h-[600px] flex-col overflow-hidden">
      <div className="flex-1 space-y-6 overflow-y-auto p-6">
        {/* 자동 새로고침 */}
        <div className="space-y-3">
          <Label className="text-sm font-semibold">자동 새로고침</Label>
          <Select
            value={String(localConfig.autoRefreshInterval)}
            onValueChange={(value) => setLocalConfig({ ...localConfig, autoRefreshInterval: parseInt(value) })}
          >
            <SelectTrigger className="w-full">
              <SelectValue />
            </SelectTrigger>
            <SelectContent className="z-[9999]">
              <SelectItem value="0">사용 안 함</SelectItem>
              <SelectItem value="10">10초마다</SelectItem>
              <SelectItem value="30">30초마다</SelectItem>
              <SelectItem value="60">1분마다</SelectItem>
              <SelectItem value="300">5분마다</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* 정렬 설정 */}
        <div className="space-y-3">
          <Label className="text-sm font-semibold">정렬 기준</Label>
          <div className="grid grid-cols-2 gap-3">
            <Select
              value={localConfig.sortBy}
              onValueChange={(value) =>
                setLocalConfig({ ...localConfig, sortBy: value as DriverManagementConfig["sortBy"] })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent className="z-[9999]">
                <SelectItem value="name">기사명</SelectItem>
                <SelectItem value="vehicleNumber">차량번호</SelectItem>
                <SelectItem value="status">운행상태</SelectItem>
                <SelectItem value="departureTime">출발시간</SelectItem>
              </SelectContent>
            </Select>

            <Select
              value={localConfig.sortOrder}
              onValueChange={(value) =>
                setLocalConfig({ ...localConfig, sortOrder: value as DriverManagementConfig["sortOrder"] })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent className="z-[9999]">
                <SelectItem value="asc">오름차순</SelectItem>
                <SelectItem value="desc">내림차순</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        {/* 표시 컬럼 선택 */}
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <Label className="text-sm font-semibold">표시 컬럼</Label>
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={() => setLocalConfig({ ...localConfig, visibleColumns: DEFAULT_VISIBLE_COLUMNS })}
            >
              기본값으로
            </Button>
          </div>
          <div className="grid grid-cols-2 gap-2">
            {Object.entries(COLUMN_LABELS).map(([key, label]) => (
              <Card
                key={key}
                className={`cursor-pointer border p-3 transition-colors ${
                  localConfig.visibleColumns.includes(key) ? "border-primary bg-primary/5" : "hover:bg-muted"
                }`}
                onClick={() => toggleColumn(key)}
              >
                <div className="flex items-center justify-between">
                  <Label className="cursor-pointer text-sm font-medium">{label}</Label>
                  <Switch
                    checked={localConfig.visibleColumns.includes(key)}
                    onCheckedChange={() => toggleColumn(key)}
                  />
                </div>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* 푸터 - 고정 */}
      <div className="flex flex-shrink-0 justify-end gap-3 border-t border-border bg-muted p-4">
        <Button variant="outline" onClick={onClose}>
          취소
        </Button>
        <Button onClick={handleSave}>저장</Button>
      </div>
    </div>
  );
}