'use client';

import { Plus, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import type { OrderDetailFormData, OrderDetailCategory } from '../types';
import { MOCK_PARTNERS, MOCK_CONSTRUCTION_PM } from '../types';

interface ContractInfoCardProps {
  formData: OrderDetailFormData;
  isViewMode: boolean;
  isEditMode: boolean;
  onFieldChange: (
    field: keyof OrderDetailFormData,
    value: string | string[] | OrderDetailCategory[]
  ) => void;
}

export function ContractInfoCard({
  formData,
  isViewMode,
  isEditMode,
  onFieldChange,
}: ContractInfoCardProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-lg">계약 정보</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {/* 거래처명 */}
          <div className="space-y-2">
            <Label>거래처명<span className="text-destructive ml-1">*</span></Label>
            <Select
              value={formData.partnerId}
              onValueChange={(value) => {
                onFieldChange('partnerId', value);
                const partner = MOCK_PARTNERS.find((p) => p.value === value);
                if (partner) {
                  onFieldChange('partnerName', partner.label);
                }
              }}
              disabled={isViewMode}
            >
              <SelectTrigger>
                <SelectValue placeholder="선택" />
              </SelectTrigger>
              <SelectContent>
                {MOCK_PARTNERS.map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    {option.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* 현장명 */}
          <div className="space-y-2">
            <Label>현장명<span className="text-destructive ml-1">*</span></Label>
            <Input
              value={formData.siteName}
              onChange={(e) => onFieldChange('siteName', e.target.value)}
              disabled={isViewMode}
            />
          </div>

          {/* 계약번호 */}
          <div className="space-y-2">
            <Label>계약번호<span className="text-destructive ml-1">*</span></Label>
            <Input
              value={formData.contractNumber}
              onChange={(e) => onFieldChange('contractNumber', e.target.value)}
              disabled={isViewMode}
            />
          </div>

          {/* 공사PM */}
          <div className="space-y-2">
            <Label>공사PM<span className="text-destructive ml-1">*</span></Label>
            <Select
              value={formData.constructionPMId}
              onValueChange={(value) => {
                onFieldChange('constructionPMId', value);
                const pm = MOCK_CONSTRUCTION_PM.find((p) => p.value === value);
                if (pm) {
                  onFieldChange('constructionPM', pm.label);
                }
              }}
              disabled={isViewMode}
            >
              <SelectTrigger>
                <SelectValue placeholder="선택" />
              </SelectTrigger>
              <SelectContent>
                {MOCK_CONSTRUCTION_PM.map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    {option.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* 공사담당자 */}
          <div className="space-y-2 md:col-span-2 lg:col-span-4">
            <Label>공사담당자<span className="text-destructive ml-1">*</span></Label>
            <div className="flex flex-wrap gap-2">
              {formData.constructionManagers.map((manager, index) => (
                <div key={index} className="flex items-center gap-1">
                  <Input
                    value={manager}
                    onChange={(e) => {
                      const newManagers = [...formData.constructionManagers];
                      newManagers[index] = e.target.value;
                      onFieldChange('constructionManagers', newManagers);
                    }}
                    disabled={isViewMode}
                    className="w-24"
                  />
                  {isEditMode && (
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8"
                      onClick={() => {
                        const newManagers = formData.constructionManagers.filter(
                          (_, i) => i !== index
                        );
                        onFieldChange('constructionManagers', newManagers);
                      }}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  )}
                </div>
              ))}
              {isEditMode && (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => {
                    onFieldChange('constructionManagers', [
                      ...formData.constructionManagers,
                      '',
                    ]);
                  }}
                >
                  <Plus className="h-4 w-4 mr-1" />
                  추가
                </Button>
              )}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}