'use client';

import { useMemo } from 'react';
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 type { SectionProps } from './types';

export function DiscountInfoSection({ formData, updateField, isViewMode }: SectionProps) {
  const calcNetReceived = useMemo(() => {
    if (formData.amount > 0 && formData.discountAmount > 0) return formData.amount - formData.discountAmount;
    return 0;
  }, [formData.amount, formData.discountAmount]);

  return (
    <Card className="mb-6 border-purple-200">
      <CardHeader>
        <CardTitle className="text-lg">할인 정보</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div className="space-y-2">
            <Label>할인일자 <span className="text-red-500">*</span></Label>
            <DatePicker value={formData.discountDate} onChange={(d) => updateField('discountDate', d)} disabled={isViewMode} />
          </div>
          <div className="space-y-2">
            <Label>할인처 (은행) <span className="text-red-500">*</span></Label>
            <Input value={formData.discountBank} onChange={(e) => updateField('discountBank', e.target.value)} placeholder="예: 국민은행 강남지점" disabled={isViewMode} />
          </div>
          <div className="space-y-2">
            <Label>할인율 (%)</Label>
            <Input type="number" step="0.01" min={0} max={100} value={formData.discountRate || ''} onChange={(e) => {
              const rate = parseFloat(e.target.value) || 0;
              updateField('discountRate', rate);
              if (formData.amount > 0 && rate > 0) updateField('discountAmount', Math.round(formData.amount * rate / 100));
            }} placeholder="예: 3.5" disabled={isViewMode} />
          </div>
          <div className="space-y-2">
            <Label>할인금액</Label>
            <CurrencyInput value={formData.discountAmount} onChange={(v) => updateField('discountAmount', v ?? 0)} disabled={isViewMode} />
          </div>
          <div className="space-y-2">
            <Label>실수령액 (자동계산)</Label>
            <div className="h-10 flex items-center px-3 border rounded-md bg-gray-50 text-sm font-semibold">
              {calcNetReceived > 0
                ? <span className="text-green-700">₩ {calcNetReceived.toLocaleString()}</span>
                : <span className="text-gray-400">어음금액 - 할인금액</span>}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}