'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 { ProgressBillingDetailFormData, ProgressBillingStatus } from '../types';
import { PROGRESS_BILLING_STATUS_OPTIONS } from '../types';

interface ProgressBillingInfoCardProps {
  formData: ProgressBillingDetailFormData;
  isViewMode: boolean;
  onFieldChange: (field: keyof ProgressBillingDetailFormData, value: string | number) => void;
}

export function ProgressBillingInfoCard({
  formData,
  isViewMode,
  onFieldChange,
}: ProgressBillingInfoCardProps) {
  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>기성청구번호</Label>
            <Input value={formData.billingNumber} disabled className="bg-muted" />
          </div>

          {/* 회차 */}
          <div className="space-y-2">
            <Label>회차</Label>
            <Input value={`${formData.billingRound}회차`} disabled className="bg-muted" />
          </div>

          {/* 기성청구연월 */}
          <div className="space-y-2">
            <Label>기성청구연월</Label>
            <Input value={formData.billingYearMonth} disabled className="bg-muted" />
          </div>

          {/* 상태 */}
          <div className="space-y-2">
            <Label>상태</Label>
            <Select
              key={`status-${formData.status}`}
              value={formData.status}
              onValueChange={(value) => onFieldChange('status', value as ProgressBillingStatus)}
              disabled={isViewMode}
            >
              <SelectTrigger>
                <SelectValue placeholder="상태 선택" />
              </SelectTrigger>
              <SelectContent>
                {PROGRESS_BILLING_STATUS_OPTIONS.filter((o) => o.value !== 'all').map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    {option.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
