'use client';

import { DatePicker } from '@/components/ui/date-picker';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from '@/components/ui/select';
import type { SectionProps } from './types';
import { DISHONOR_REASON_OPTIONS } from '../constants';

export function DishonoredSection({ formData, updateField, isViewMode }: SectionProps) {
  return (
    <Card className="mb-6 border-red-200 bg-red-50/30">
      <CardHeader>
        <CardTitle className="text-lg flex items-center gap-2 text-red-700">
          부도 정보
          <Badge variant="destructive" className="text-xs">부도</Badge>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label>부도일자 <span className="text-red-500">*</span></Label>
              <DatePicker value={formData.dishonoredDate} onChange={(d) => {
                updateField('dishonoredDate', d);
                if (d) {
                  const dt = new Date(d);
                  dt.setDate(dt.getDate() + 6);
                  updateField('recourseNoticeDeadline', dt.toISOString().split('T')[0]);
                }
              }} disabled={isViewMode} />
            </div>
            <div className="space-y-2">
              <Label>부도사유 <span className="text-red-500">*</span></Label>
              <Select value={formData.dishonoredReason} onValueChange={(v) => updateField('dishonoredReason', v)} disabled={isViewMode}>
                <SelectTrigger><SelectValue placeholder="사유 선택" /></SelectTrigger>
                <SelectContent>
                  {DISHONOR_REASON_OPTIONS.map(o => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}
                </SelectContent>
              </Select>
            </div>
          </div>
          {/* 법적 프로세스 */}
          <div className="border-t pt-4">
            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-4">법적 프로세스 (어음법 제44조·제45조)</p>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="space-y-2">
                <Label>거절증서 작성</Label>
                <div className="h-10 flex items-center gap-3 px-3 border rounded-md bg-gray-50">
                  <Switch checked={formData.hasProtest} onCheckedChange={(c) => updateField('hasProtest', c)} disabled={isViewMode} />
                  <span className="text-sm">{formData.hasProtest ? '작성 완료' : '미작성'}</span>
                </div>
              </div>
              {formData.hasProtest && (
                <div className="space-y-2">
                  <Label>거절증서 작성일</Label>
                  <DatePicker value={formData.protestDate} onChange={(d) => updateField('protestDate', d)} disabled={isViewMode} />
                </div>
              )}
              <div className="space-y-2">
                <Label>소구 통지일</Label>
                <DatePicker value={formData.recourseNoticeDate} onChange={(d) => updateField('recourseNoticeDate', d)} disabled={isViewMode} />
              </div>
              <div className="space-y-2">
                <Label>통지 기한 (자동: 부도일+4영업일)</Label>
                <div className="h-10 flex items-center px-3 border rounded-md bg-gray-50 text-sm">
                  {formData.recourseNoticeDeadline ? (
                    <span className={
                      formData.recourseNoticeDate && formData.recourseNoticeDate <= formData.recourseNoticeDeadline
                        ? 'text-green-700' : 'text-red-600 font-medium'
                    }>
                      {formData.recourseNoticeDeadline}
                      {formData.recourseNoticeDate && formData.recourseNoticeDate > formData.recourseNoticeDeadline && ' (기한 초과!)'}
                    </span>
                  ) : <span className="text-gray-400">부도일자 입력 시 자동계산</span>}
                </div>
              </div>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
