'use client';

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, OrderStatus, OrderType } from '../types';
import {
  ORDER_STATUS_OPTIONS,
  ORDER_TYPE_OPTIONS,
  MOCK_ORDER_MANAGERS,
  MOCK_ORDER_COMPANIES,
} from '../types';

interface OrderInfoCardProps {
  formData: OrderDetailFormData;
  isViewMode: boolean;
  onFieldChange: (field: keyof OrderDetailFormData, value: string) => void;
}

export function OrderInfoCard({ formData, isViewMode, onFieldChange }: OrderInfoCardProps) {
  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>
            <Input
              value={formData.orderNumber}
              onChange={(e) => onFieldChange('orderNumber', e.target.value)}
              disabled={isViewMode}
            />
          </div>

          {/* 발주일 (발주처) */}
          <div className="space-y-2">
            <Label>발주일<span className="text-destructive ml-1">*</span></Label>
            <Select
              value={formData.orderCompanyId}
              onValueChange={(value) => onFieldChange('orderCompanyId', value)}
              disabled={isViewMode}
            >
              <SelectTrigger>
                <SelectValue placeholder="회사명 선택" />
              </SelectTrigger>
              <SelectContent>
                {MOCK_ORDER_COMPANIES.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>
            <Select
              value={formData.orderType}
              onValueChange={(value) => onFieldChange('orderType', value as OrderType)}
              disabled={isViewMode}
            >
              <SelectTrigger>
                <SelectValue placeholder="선택" />
              </SelectTrigger>
              <SelectContent>
                {ORDER_TYPE_OPTIONS.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>
            <Select
              value={formData.status}
              onValueChange={(value) => onFieldChange('status', value as OrderStatus)}
              disabled={isViewMode}
            >
              <SelectTrigger>
                <SelectValue placeholder="선택" />
              </SelectTrigger>
              <SelectContent>
                {ORDER_STATUS_OPTIONS.filter((o) => o.value !== 'all').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>
            <Select
              value={formData.orderManager}
              onValueChange={(value) => onFieldChange('orderManager', value)}
              disabled={isViewMode}
            >
              <SelectTrigger>
                <SelectValue placeholder="선택" />
              </SelectTrigger>
              <SelectContent>
                {MOCK_ORDER_MANAGERS.map((option) => (
                  <SelectItem key={option.value} value={option.label}>
                    {option.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* 화물도착지 */}
          <div className="space-y-2">
            <Label>화물도착지<span className="text-destructive ml-1">*</span></Label>
            <Input
              value={formData.deliveryAddress}
              onChange={(e) => onFieldChange('deliveryAddress', e.target.value)}
              placeholder="주소명"
              disabled={isViewMode}
            />
          </div>
        </div>
      </CardContent>
    </Card>
  );
}