'use client';

import { useState, useCallback, useEffect, useMemo } from 'react';
import { useRouter } from 'next/navigation';
import { Plus, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
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 {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { toast } from 'sonner';
import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
import { billConfig } from './billConfig';
import type { BillRecord, BillType, BillStatus, InstallmentRecord } from './types';
import {
  BILL_TYPE_OPTIONS,
  getBillStatusOptions,
} from './types';
import { getBill, createBill, updateBill, deleteBill, getClients } from './actions';

// ===== 새 훅 import =====
import { useDetailData } from '@/hooks';

// ===== Props =====
interface BillDetailProps {
  billId: string;
  mode: 'view' | 'edit' | 'new';
}

// ===== 거래처 타입 =====
interface ClientOption {
  id: string;
  name: string;
}

// ===== 폼 데이터 타입 (개별 useState 대신 통합) =====
interface BillFormData {
  billNumber: string;
  billType: BillType;
  vendorId: string;
  amount: number;
  issueDate: string;
  maturityDate: string;
  status: BillStatus;
  note: string;
  installments: InstallmentRecord[];
}

const INITIAL_FORM_DATA: BillFormData = {
  billNumber: '',
  billType: 'received',
  vendorId: '',
  amount: 0,
  issueDate: '',
  maturityDate: '',
  status: 'stored',
  note: '',
  installments: [],
};

export function BillDetail({ billId, mode }: BillDetailProps) {
  const router = useRouter();
  const isViewMode = mode === 'view';
  const isNewMode = mode === 'new';

  // ===== 거래처 목록 =====
  const [clients, setClients] = useState<ClientOption[]>([]);

  // ===== 폼 상태 (통합된 단일 state) =====
  const [formData, setFormData] = useState<BillFormData>(INITIAL_FORM_DATA);

  // ===== 폼 필드 업데이트 헬퍼 =====
  const updateField = useCallback(<K extends keyof BillFormData>(
    field: K,
    value: BillFormData[K]
  ) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  }, []);

  // ===== 거래처 목록 로드 =====
  useEffect(() => {
    async function loadClients() {
      const result = await getClients();
      if (result.success && result.data) {
        setClients(result.data.map(c => ({ id: String(c.id), name: c.name })));
      }
    }
    loadClients();
  }, []);

  // ===== 새 훅: useDetailData로 데이터 로딩 =====
  // 타입 래퍼: 훅은 string | number를 받지만 actions는 string만 받음
  const fetchBillWrapper = useCallback(
    (id: string | number) => getBill(String(id)),
    []
  );

  const {
    data: billData,
    isLoading,
    error: loadError,
  } = useDetailData<BillRecord>(
    billId !== 'new' ? billId : null,
    fetchBillWrapper,
    { skip: isNewMode }
  );

  // ===== 데이터 로드 시 폼에 반영 =====
  useEffect(() => {
    if (billData) {
      setFormData({
        billNumber: billData.billNumber,
        billType: billData.billType,
        vendorId: billData.vendorId,
        amount: billData.amount,
        issueDate: billData.issueDate,
        maturityDate: billData.maturityDate,
        status: billData.status,
        note: billData.note,
        installments: billData.installments,
      });
    }
  }, [billData]);

  // ===== 로드 에러 처리 =====
  useEffect(() => {
    if (loadError) {
      toast.error(loadError);
      router.push('/ko/accounting/bills');
    }
  }, [loadError, router]);

  // ===== 유효성 검사 함수 =====
  const validateForm = useCallback((): { valid: boolean; error?: string } => {
    if (!formData.billNumber.trim()) {
      return { valid: false, error: '어음번호를 입력해주세요.' };
    }
    if (!formData.vendorId) {
      return { valid: false, error: '거래처를 선택해주세요.' };
    }
    if (formData.amount <= 0) {
      return { valid: false, error: '금액을 입력해주세요.' };
    }
    if (!formData.issueDate) {
      return { valid: false, error: '발행일을 입력해주세요.' };
    }
    if (!formData.maturityDate) {
      return { valid: false, error: '만기일을 입력해주세요.' };
    }

    // 차수 유효성 검사
    for (let i = 0; i < formData.installments.length; i++) {
      const inst = formData.installments[i];
      if (!inst.date) {
        return { valid: false, error: `차수 ${i + 1}번의 일자를 입력해주세요.` };
      }
      if (inst.amount <= 0) {
        return { valid: false, error: `차수 ${i + 1}번의 금액을 입력해주세요.` };
      }
    }

    return { valid: true };
  }, [formData]);

  // ===== 제출 상태 =====
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  // ===== 저장 핸들러 =====
  const handleSubmit = useCallback(async (): Promise<{ success: boolean; error?: string }> => {
    const validation = validateForm();
    if (!validation.valid) {
      toast.error(validation.error!);
      return { success: false, error: validation.error };
    }

    setIsSubmitting(true);
    try {
      const billData: Partial<BillRecord> = {
        ...formData,
        vendorName: clients.find(c => c.id === formData.vendorId)?.name || '',
      };

      if (isNewMode) {
        const result = await createBill(billData);
        if (result.success) {
          toast.success('등록되었습니다.');
          router.push('/ko/accounting/bills');
          return { success: false, error: '' }; // 템플릿의 중복 토스트/리다이렉트 방지
        }
        return result;
      } else {
        return await updateBill(String(billId), billData);
      }
    } finally {
      setIsSubmitting(false);
    }
  }, [formData, clients, isNewMode, billId, validateForm, router]);

  // ===== 삭제 핸들러 (결과만 반환, 토스트/리다이렉트는 IntegratedDetailTemplate에 위임) =====
  const handleDelete = useCallback(async (): Promise<{ success: boolean; error?: string }> => {
    setIsDeleting(true);
    try {
      return await deleteBill(String(billId));
    } finally {
      setIsDeleting(false);
    }
  }, [billId]);

  // ===== 차수 관리 핸들러 =====
  const handleAddInstallment = useCallback(() => {
    const newInstallment: InstallmentRecord = {
      id: `inst-${Date.now()}`,
      date: '',
      amount: 0,
      note: '',
    };
    setFormData(prev => ({
      ...prev,
      installments: [...prev.installments, newInstallment],
    }));
  }, []);

  const handleRemoveInstallment = useCallback((id: string) => {
    setFormData(prev => ({
      ...prev,
      installments: prev.installments.filter(inst => inst.id !== id),
    }));
  }, []);

  const handleUpdateInstallment = useCallback((
    id: string,
    field: keyof InstallmentRecord,
    value: string | number
  ) => {
    setFormData(prev => ({
      ...prev,
      installments: prev.installments.map(inst =>
        inst.id === id ? { ...inst, [field]: value } : inst
      ),
    }));
  }, []);

  // ===== 상태 옵션 (구분에 따라 변경) =====
  const statusOptions = useMemo(
    () => getBillStatusOptions(formData.billType),
    [formData.billType]
  );

  // ===== 폼 콘텐츠 렌더링 =====
  const renderFormContent = () => (
    <>
      {/* 기본 정보 섹션 */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="text-lg">기본 정보</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* 어음번호 */}
            <div className="space-y-2">
              <Label htmlFor="billNumber">
                어음번호 <span className="text-red-500">*</span>
              </Label>
              <Input
                id="billNumber"
                value={formData.billNumber}
                onChange={(e) => updateField('billNumber', e.target.value)}
                placeholder="어음번호를 입력해주세요"
                disabled={isViewMode}
              />
            </div>

            {/* 구분 */}
            <div className="space-y-2">
              <Label htmlFor="billType">
                구분 <span className="text-red-500">*</span>
              </Label>
              <Select
                value={formData.billType}
                onValueChange={(v) => updateField('billType', v as BillType)}
                disabled={isViewMode}
              >
                <SelectTrigger>
                  <SelectValue placeholder="선택" />
                </SelectTrigger>
                <SelectContent>
                  {BILL_TYPE_OPTIONS.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      {option.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* 거래처 */}
            <div className="space-y-2">
              <Label htmlFor="vendorId">
                거래처 <span className="text-red-500">*</span>
              </Label>
              <Select
                value={formData.vendorId}
                onValueChange={(v) => updateField('vendorId', v)}
                disabled={isViewMode}
              >
                <SelectTrigger>
                  <SelectValue placeholder="선택" />
                </SelectTrigger>
                <SelectContent>
                  {clients.map((client) => (
                    <SelectItem key={client.id} value={client.id}>
                      {client.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* 금액 */}
            <div className="space-y-2">
              <Label htmlFor="amount">
                금액 <span className="text-red-500">*</span>
              </Label>
              <CurrencyInput
                id="amount"
                value={formData.amount}
                onChange={(value) => updateField('amount', value ?? 0)}
                placeholder="금액을 입력해주세요"
                disabled={isViewMode}
              />
            </div>

            {/* 발행일 */}
            <div className="space-y-2">
              <Label htmlFor="issueDate">
                발행일 <span className="text-red-500">*</span>
              </Label>
              <DatePicker
                value={formData.issueDate}
                onChange={(date) => updateField('issueDate', date)}
                disabled={isViewMode}
              />
            </div>

            {/* 만기일 */}
            <div className="space-y-2">
              <Label htmlFor="maturityDate">
                만기일 <span className="text-red-500">*</span>
              </Label>
              <DatePicker
                value={formData.maturityDate}
                onChange={(date) => updateField('maturityDate', date)}
                disabled={isViewMode}
              />
            </div>

            {/* 상태 */}
            <div className="space-y-2">
              <Label htmlFor="status">
                상태 <span className="text-red-500">*</span>
              </Label>
              <Select
                value={formData.status}
                onValueChange={(v) => updateField('status', v as BillStatus)}
                disabled={isViewMode}
              >
                <SelectTrigger>
                  <SelectValue placeholder="선택" />
                </SelectTrigger>
                <SelectContent>
                  {statusOptions.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      {option.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* 비고 */}
            <div className="space-y-2">
              <Label htmlFor="note">비고</Label>
              <Input
                id="note"
                value={formData.note}
                onChange={(e) => updateField('note', e.target.value)}
                placeholder="비고를 입력해주세요"
                disabled={isViewMode}
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 차수 관리 섹션 */}
      <Card className="mb-6">
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle className="text-lg flex items-center gap-2">
            <span className="text-red-500">*</span> 차수 관리
          </CardTitle>
          {!isViewMode && (
            <Button
              variant="outline"
              size="sm"
              onClick={handleAddInstallment}
              className="text-orange-500 border-orange-300 hover:bg-orange-50"
            >
              <Plus className="h-4 w-4 mr-1" />
              추가
            </Button>
          )}
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-[50px]">No</TableHead>
                <TableHead>일자</TableHead>
                <TableHead>금액</TableHead>
                <TableHead>비고</TableHead>
                {!isViewMode && <TableHead className="w-[60px]">삭제</TableHead>}
              </TableRow>
            </TableHeader>
            <TableBody>
              {formData.installments.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={isViewMode ? 4 : 5} className="text-center text-gray-500 py-8">
                    등록된 차수가 없습니다
                  </TableCell>
                </TableRow>
              ) : (
                formData.installments.map((inst, index) => (
                  <TableRow key={inst.id}>
                    <TableCell>{index + 1}</TableCell>
                    <TableCell>
                      <DatePicker
                        value={inst.date}
                        onChange={(date) => handleUpdateInstallment(inst.id, 'date', date)}
                        disabled={isViewMode}
                      />
                    </TableCell>
                    <TableCell>
                      <CurrencyInput
                        value={inst.amount}
                        onChange={(value) => handleUpdateInstallment(inst.id, 'amount', value ?? 0)}
                        disabled={isViewMode}
                        className="w-full"
                      />
                    </TableCell>
                    <TableCell>
                      <Input
                        value={inst.note}
                        onChange={(e) => handleUpdateInstallment(inst.id, 'note', e.target.value)}
                        disabled={isViewMode}
                        className="w-full"
                      />
                    </TableCell>
                    {!isViewMode && (
                      <TableCell>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8 text-red-500 hover:text-red-600 hover:bg-red-50"
                          onClick={() => handleRemoveInstallment(inst.id)}
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </TableCell>
                    )}
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </>
  );

  // ===== 템플릿 모드 및 동적 설정 =====
  const templateMode = isNewMode ? 'create' : mode;
  const dynamicConfig = {
    ...billConfig,
    title: isViewMode ? '어음 상세' : '어음',
    actions: {
      ...billConfig.actions,
      submitLabel: isNewMode ? '등록' : '저장',
    },
  };

  return (
    <IntegratedDetailTemplate
      config={dynamicConfig}
      mode={templateMode}
      initialData={{}}
      itemId={billId}
      isLoading={isLoading || isSubmitting || isDeleting}
      onSubmit={handleSubmit}
      onDelete={billId && billId !== 'new' ? handleDelete : undefined}
      renderView={() => renderFormContent()}
      renderForm={() => renderFormContent()}
    />
  );
}
