'use client';

import { Input } from '@/components/ui/input';
import { DatePicker } from '@/components/ui/date-picker';
import { Label } from '@/components/ui/label';
import { CurrencyInput } from '@/components/ui/currency-input';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from '@/components/ui/select';
import type { SectionProps } from './types';
import { COLLECTION_RESULT_OPTIONS } from '../constants';

export function CollectionSection({ formData, updateField, isViewMode }: SectionProps) {
  return (
    <Card className="mb-6 border-purple-200">
      <CardHeader>
        <CardTitle className="text-lg">추심 정보</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {/* 추심 의뢰 */}
          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">추심 의뢰</p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="space-y-2">
              <Label>추심은행 <span className="text-red-500">*</span></Label>
              <Input value={formData.collectionBank} onChange={(e) => updateField('collectionBank', e.target.value)} placeholder="추심 의뢰 은행" disabled={isViewMode} />
            </div>
            <div className="space-y-2">
              <Label>추심의뢰일 <span className="text-red-500">*</span></Label>
              <DatePicker value={formData.collectionRequestDate} onChange={(d) => updateField('collectionRequestDate', d)} disabled={isViewMode} />
            </div>
            <div className="space-y-2">
              <Label>추심수수료</Label>
              <CurrencyInput value={formData.collectionFee} onChange={(v) => updateField('collectionFee', v ?? 0)} disabled={isViewMode} />
            </div>
          </div>
          {/* 추심 결과 */}
          <div className="border-t pt-4">
            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-4">추심 결과</p>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="space-y-2">
                <Label>추심결과</Label>
                <Select value={formData.collectionResult} onValueChange={(v) => updateField('collectionResult', v)} disabled={isViewMode}>
                  <SelectTrigger><SelectValue placeholder="선택" /></SelectTrigger>
                  <SelectContent>
                    {COLLECTION_RESULT_OPTIONS.map(o => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>추심완료일</Label>
                <DatePicker value={formData.collectionCompleteDate} onChange={(d) => updateField('collectionCompleteDate', d)} disabled={isViewMode} />
              </div>
              <div className="space-y-2">
                <Label>추심입금일</Label>
                <DatePicker value={formData.collectionDepositDate} onChange={(d) => updateField('collectionDepositDate', d)} disabled={isViewMode} />
              </div>
              <div className="space-y-2">
                <Label>추심입금액 (수수료 차감후)</Label>
                <CurrencyInput value={formData.collectionDepositAmount} onChange={(v) => updateField('collectionDepositAmount', v ?? 0)} disabled={isViewMode} />
              </div>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}