'use client';

import { useState, useEffect, useCallback } from 'react';
import { toast } from 'sonner';
import { formatNumber } from '@/lib/utils/amount';
import { Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { FormField } from '@/components/molecules/FormField';
import { DatePicker } from '@/components/ui/date-picker';
import { TimePicker } from '@/components/ui/time-picker';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import type { ManualInputFormData } from './types';
import { DEDUCTION_OPTIONS, ACCOUNT_SUBJECT_OPTIONS } from './types';
import { getCardList, createCardTransaction } from './actions';
import { getTodayString } from '@/lib/utils/date';

interface ManualInputModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSuccess: () => void;
}

const initialFormData: ManualInputFormData = {
  cardId: '',
  usedDate: getTodayString(),
  usedTime: '',
  approvalNumber: '',
  approvalType: 'approved',
  supplyAmount: 0,
  taxAmount: 0,
  merchantName: '',
  businessNumber: '',
  deductionType: 'deductible',
  accountSubject: '',
  vendorName: '',
  description: '',
  memo: '',
};

export function ManualInputModal({ open, onOpenChange, onSuccess }: ManualInputModalProps) {
  const [formData, setFormData] = useState<ManualInputFormData>(initialFormData);
  const [cardOptions, setCardOptions] = useState<Array<{ id: number; name: string; cardNumber: string }>>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isLoadingCards, setIsLoadingCards] = useState(false);

  // 카드 목록 로드
  useEffect(() => {
    if (open) {
      setIsLoadingCards(true);
      getCardList()
        .then(result => {
          if (result.success) setCardOptions(result.data);
        })
        .finally(() => setIsLoadingCards(false));
      setFormData(initialFormData);
    }
  }, [open]);

  const handleChange = useCallback((key: keyof ManualInputFormData, value: string | number) => {
    setFormData(prev => ({ ...prev, [key]: value }));
  }, []);

  const totalAmount = formData.supplyAmount + formData.taxAmount;

  const handleSubmit = useCallback(async () => {
    if (!formData.cardId) {
      toast.error('카드를 선택해주세요.');
      return;
    }
    if (!formData.usedDate) {
      toast.error('사용일을 입력해주세요.');
      return;
    }
    if (formData.supplyAmount <= 0 && formData.taxAmount <= 0) {
      toast.error('공급가액 또는 세액을 입력해주세요.');
      return;
    }

    setIsSubmitting(true);
    try {
      const result = await createCardTransaction(formData);
      if (result.success) {
        toast.success('카드사용 내역이 등록되었습니다.');
        onOpenChange(false);
        onSuccess();
      } else {
        toast.error(result.error || '등록에 실패했습니다.');
      }
    } catch {
      toast.error('등록 중 오류가 발생했습니다.');
    } finally {
      setIsSubmitting(false);
    }
  }, [formData, onOpenChange, onSuccess]);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>카드사용 수기 입력</DialogTitle>
        </DialogHeader>

        <div className="space-y-4 py-2">
          {/* 카드 선택 (동적 API Select - FormField 예외) */}
          <div>
            <Label className="text-sm font-medium">
              카드 선택 <span className="text-red-500">*</span>
            </Label>
            <Select
              value={formData.cardId}
              onValueChange={(v) => handleChange('cardId', v)}
              disabled={isLoadingCards}
            >
              <SelectTrigger className="mt-1">
                <SelectValue placeholder="카드를 선택하세요" />
              </SelectTrigger>
              <SelectContent>
                {cardOptions.map(card => (
                  <SelectItem key={card.id} value={String(card.id)}>
                    {card.cardNumber} {card.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* 사용일 + 사용시간 (공통 DatePicker/TimePicker) */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <Label className="text-sm font-medium">
                사용일 <span className="text-red-500">*</span>
              </Label>
              <DatePicker
                value={formData.usedDate}
                onChange={(v) => handleChange('usedDate', v)}
                placeholder="날짜 선택"
                className="mt-1"
              />
            </div>
            <div>
              <Label className="text-sm font-medium">사용시간</Label>
              <TimePicker
                value={formData.usedTime}
                onChange={(v) => handleChange('usedTime', v)}
                placeholder="시간 선택"
                showSeconds
                secondStep={1}
                minuteStep={1}
                className="mt-1"
              />
            </div>
          </div>

          {/* 승인번호 + 승인유형 */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <FormField
              label="승인번호"
              value={formData.approvalNumber}
              onChange={(v) => handleChange('approvalNumber', v)}
              placeholder="승인번호"
            />
            <div>
              <Label className="text-sm font-medium">
                승인유형 <span className="text-red-500">*</span>
              </Label>
              <RadioGroup
                value={formData.approvalType}
                onValueChange={(v) => handleChange('approvalType', v)}
                className="flex items-center gap-4 mt-2"
              >
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="approved" id="approval-approved" />
                  <Label htmlFor="approval-approved" className="text-sm">승인</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="cancelled" id="approval-cancelled" />
                  <Label htmlFor="approval-cancelled" className="text-sm">취소</Label>
                </div>
              </RadioGroup>
            </div>
          </div>

          {/* 공급가액 + 세액 */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <FormField
              type="number"
              label="공급가액"
              required
              value={formData.supplyAmount || ''}
              onChange={(v) => handleChange('supplyAmount', Number(v) || 0)}
              placeholder="0"
            />
            <FormField
              type="number"
              label="세액"
              required
              value={formData.taxAmount || ''}
              onChange={(v) => handleChange('taxAmount', Number(v) || 0)}
              placeholder="0"
            />
          </div>

          {/* 가맹점명 + 사업자번호 */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <FormField
              label="가맹점명"
              value={formData.merchantName}
              onChange={(v) => handleChange('merchantName', v)}
              placeholder="가맹점명"
            />
            <FormField
              type="businessNumber"
              label="사업자번호"
              value={formData.businessNumber}
              onChange={(v) => handleChange('businessNumber', v)}
              placeholder="123-12-12345"
            />
          </div>

          {/* 공제여부 + 계정과목 (Select - FormField 예외) */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <Label className="text-sm font-medium">
                공제여부 <span className="text-red-500">*</span>
              </Label>
              <Select
                value={formData.deductionType}
                onValueChange={(v) => handleChange('deductionType', v)}
              >
                <SelectTrigger className="mt-1">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {DEDUCTION_OPTIONS.map(opt => (
                    <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className="text-sm font-medium">계정과목</Label>
              <Select
                value={formData.accountSubject || 'none'}
                onValueChange={(v) => handleChange('accountSubject', v === 'none' ? '' : v)}
              >
                <SelectTrigger className="mt-1">
                  <SelectValue placeholder="선택" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="none">선택</SelectItem>
                  {ACCOUNT_SUBJECT_OPTIONS.filter(o => o.value !== '').map(opt => (
                    <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

          {/* 증빙/판매자상호 + 내역 */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <FormField
              label="증빙/판매자상호"
              value={formData.vendorName}
              onChange={(v) => handleChange('vendorName', v)}
              placeholder="증빙/판매자상호"
            />
            <FormField
              label="내역"
              value={formData.description}
              onChange={(v) => handleChange('description', v)}
              placeholder="내역"
            />
          </div>

          {/* 메모 */}
          <FormField
            type="textarea"
            label="메모"
            value={formData.memo}
            onChange={(v) => handleChange('memo', v)}
            rows={3}
          />

          {/* 합계 금액 */}
          <div className="bg-muted/50 rounded-lg p-3 flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
            <span className="text-sm font-medium">합계 금액 (공급가액 + 세액)</span>
            <span className="text-lg font-bold">{formatNumber(totalAmount)}원</span>
          </div>
        </div>

        <DialogFooter className="gap-3">
          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
            취소
          </Button>
          <Button onClick={handleSubmit} disabled={isSubmitting}>
            {isSubmitting ? (
              <>
                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                등록 중...
              </>
            ) : (
              '등록'
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}