sam-react-prod/src/components/accounting/VendorManagement/VendorDetailClient.tsx

'use client';

import { useState, useCallback, useEffect } 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 { Label } from '@/components/ui/label';
import { PhoneInput } from '@/components/ui/phone-input';
import { BusinessNumberInput } from '@/components/ui/business-number-input';
import { AccountNumberInput } from '@/components/ui/account-number-input';
import { Textarea } from '@/components/ui/textarea';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
import { vendorConfig } from './vendorConfig';
import { CreditAnalysisModal, MOCK_CREDIT_DATA } from './CreditAnalysisModal';
import type { Vendor, VendorMemo } from './types';
import {
  VENDOR_CATEGORY_SELECTOR_OPTIONS,
  CREDIT_RATING_SELECTOR_OPTIONS,
  TRANSACTION_GRADE_SELECTOR_OPTIONS,
  PAYMENT_DAY_OPTIONS,
  BANK_OPTIONS,
} from './types';

interface VendorDetailClientProps {
  mode: 'view' | 'edit' | 'new';
  vendorId?: string;
  initialData?: Vendor;
}

// 빈 거래처 데이터 생성
const getEmptyVendor = (): Omit<Vendor, 'id' | 'createdAt' | 'updatedAt'> => ({
  vendorCode: '',
  businessNumber: '',
  vendorName: '',
  representativeName: '',
  category: 'both',
  businessType: '',
  businessCategory: '',
  zipCode: '',
  address1: '',
  address2: '',
  phone: '',
  mobile: '',
  fax: '',
  email: '',
  managerName: '',
  managerPhone: '',
  systemManager: '',
  logoUrl: '',
  purchasePaymentDay: 10,
  salesPaymentDay: 15,
  creditRating: 'A',
  transactionGrade: 'C',
  taxInvoiceEmail: '',
  bankName: 'none',
  accountNumber: '',
  accountHolder: '',
  outstandingAmount: 0,
  overdueAmount: 0,
  overdueDays: 0,
  unpaidAmount: 0,
  badDebtAmount: 0,
  badDebtStatus: 'none',
  overdueToggle: false,
  badDebtToggle: false,
  memos: [],
});

// Frontend → API 데이터 변환
function transformFrontendToApi(formData: typeof getEmptyVendor extends () => infer R ? R & { id?: string } : never) {
  return {
    name: formData.vendorName,
    client_type: formData.category.toUpperCase() as 'SALES' | 'PURCHASE' | 'BOTH',
    contact_person: formData.representativeName || null,
    phone: formData.phone || null,
    mobile: formData.mobile || null,
    fax: formData.fax || null,
    email: formData.email || null,
    address: formData.address1 ? `${formData.address1} ${formData.address2}`.trim() : null,
    manager_name: formData.managerName || null,
    manager_tel: formData.managerPhone || null,
    system_manager: formData.systemManager || null,
    account_id: formData.accountNumber || null,
    purchase_payment_day: formData.purchasePaymentDay ? String(formData.purchasePaymentDay) : null,
    sales_payment_day: formData.salesPaymentDay ? String(formData.salesPaymentDay) : null,
    business_no: formData.businessNumber || null,
    business_type: formData.businessType || null,
    business_item: formData.businessCategory || null,
    memo: formData.memos.length > 0 ? formData.memos.map(m => m.content).join('\n') : null,
    is_active: true,
  };
}

export function VendorDetailClient({ mode, vendorId, initialData }: VendorDetailClientProps) {
  const router = useRouter();
  const isViewMode = mode === 'view';
  const isNewMode = mode === 'new';

  // IntegratedDetailTemplate 모드 변환
  const templateMode = isNewMode ? 'create' : mode;

  // 폼 데이터
  const [formData, setFormData] = useState(initialData || getEmptyVendor());

  // 새 메모 입력
  const [newMemo, setNewMemo] = useState('');

  // 신용분석 모달
  const [isCreditModalOpen, setIsCreditModalOpen] = useState(false);

  // 상세/수정 모드에서 로고 목데이터 초기화
  useEffect(() => {
    if (initialData && !formData.logoUrl) {
      setFormData(prev => ({
        ...prev,
        logoUrl: 'https://placehold.co/750x250/3b82f6/white?text=Vendor+Logo',
      }));
    }
  }, [initialData]);

  // 필드 변경 핸들러
  const handleChange = useCallback((field: string, value: string | number | boolean) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  }, []);

  // 메모 추가 핸들러
  const handleAddMemo = useCallback(() => {
    if (!newMemo.trim()) return;
    const now = new Date();
    const dateStr = now.toISOString().slice(0, 10);
    const timeStr = now.toTimeString().slice(0, 5);
    const memo: VendorMemo = {
      id: String(Date.now()),
      content: `${dateStr} ${timeStr} [사용자] ${newMemo}`,
      createdAt: now.toISOString(),
    };
    setFormData(prev => ({
      ...prev,
      memos: [...prev.memos, memo],
    }));
    setNewMemo('');
  }, [newMemo]);

  // 메모 삭제 핸들러
  const handleDeleteMemo = useCallback((memoId: string) => {
    setFormData(prev => ({
      ...prev,
      memos: prev.memos.filter(m => m.id !== memoId),
    }));
  }, []);

  // 저장 핸들러 (IntegratedDetailTemplate용)
  const handleSubmit = useCallback(async () => {
    // 필수 필드 검증
    if (!formData.vendorName.trim()) {
      return { success: false, error: '거래처명을 입력해주세요.' };
    }

    try {
      const apiData = transformFrontendToApi(formData);
      const url = isNewMode
        ? '/api/proxy/clients'
        : `/api/proxy/clients/${vendorId}`;
      const method = isNewMode ? 'POST' : 'PUT';

      const response = await fetch(url, {
        method,
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(apiData),
      });

      const result = await response.json();

      if (!response.ok || !result.success) {
        return { success: false, error: result.message || '저장에 실패했습니다.' };
      }

      router.refresh();
      return { success: true };
    } catch (error) {
      return { success: false, error: error instanceof Error ? error.message : '저장에 실패했습니다.' };
    }
  }, [formData, isNewMode, vendorId, router]);

  // 삭제 핸들러 (IntegratedDetailTemplate용)
  const handleDelete = useCallback(async () => {
    try {
      const response = await fetch(`/api/proxy/clients/${vendorId}`, {
        method: 'DELETE',
      });

      const result = await response.json();

      if (!response.ok || !result.success) {
        return { success: false, error: result.message || '삭제에 실패했습니다.' };
      }

      router.refresh();
      return { success: true };
    } catch (error) {
      return { success: false, error: error instanceof Error ? error.message : '삭제에 실패했습니다.' };
    }
  }, [vendorId, router]);

  // 입력 필드 렌더링 헬퍼
  const renderField = (
    label: string,
    field: string,
    value: string | number,
    options?: {
      required?: boolean;
      type?: 'text' | 'tel' | 'email' | 'number' | 'phone' | 'businessNumber' | 'accountNumber';
      placeholder?: string;
      disabled?: boolean;
    }
  ) => {
    const { required, type = 'text', placeholder, disabled } = options || {};
    const isDisabled = isViewMode || disabled;
    const stringValue = value !== null && value !== undefined ? String(value) : '';

    const renderInput = () => {
      switch (type) {
        case 'phone':
          return (
            <PhoneInput
              value={stringValue}
              onChange={(v) => handleChange(field, v)}
              placeholder={placeholder}
              disabled={isDisabled}
              className="bg-white"
            />
          );
        case 'businessNumber':
          return (
            <BusinessNumberInput
              value={stringValue}
              onChange={(v) => handleChange(field, v)}
              placeholder={placeholder}
              disabled={isDisabled}
              showValidation
              className="bg-white"
            />
          );
        case 'accountNumber':
          return (
            <AccountNumberInput
              value={stringValue}
              onChange={(v) => handleChange(field, v)}
              placeholder={placeholder}
              disabled={isDisabled}
              className="bg-white"
            />
          );
        default:
          return (
            <Input
              type={type === 'tel' ? 'tel' : type}
              value={value}
              onChange={(e) => handleChange(field, type === 'number' ? Number(e.target.value) : e.target.value)}
              placeholder={placeholder}
              disabled={isDisabled}
              className="bg-white"
            />
          );
      }
    };

    return (
      <div className="space-y-2">
        <Label className="text-sm font-medium text-gray-700">
          {label} {required && <span className="text-red-500">*</span>}
        </Label>
        {renderInput()}
      </div>
    );
  };

  // 셀렉트 필드 렌더링 헬퍼
  const renderSelectField = (
    label: string,
    field: string,
    value: string,
    options: { value: string; label: string }[],
    required?: boolean
  ) => {
    return (
      <div className="space-y-2">
        <Label className="text-sm font-medium text-gray-700">
          {label} {required && <span className="text-red-500">*</span>}
        </Label>
        <Select
          value={value}
          onValueChange={(val) => handleChange(field, val)}
          disabled={isViewMode}
        >
          <SelectTrigger className="bg-white">
            <SelectValue placeholder="선택" />
          </SelectTrigger>
          <SelectContent>
            {options.map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    );
  };

  // 폼 콘텐츠 렌더링 (View/Edit 공통)
  const renderFormContent = () => (
    <div className="space-y-6">
      {/* 기본 정보 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">기본 정보</CardTitle>
        </CardHeader>
        <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {renderField('사업자등록번호', 'businessNumber', formData.businessNumber, { required: true, type: 'businessNumber', placeholder: '000-00-00000' })}
          {renderField('거래처코드', 'vendorCode', formData.vendorCode, { placeholder: '자동생성', disabled: true })}
          {renderField('거래처명', 'vendorName', formData.vendorName, { required: true })}
          {renderField('대표자명', 'representativeName', formData.representativeName)}
          {renderSelectField('거래처 유형', 'category', formData.category, VENDOR_CATEGORY_SELECTOR_OPTIONS, true)}
          {renderField('업태', 'businessType', formData.businessType)}
          {renderField('업종', 'businessCategory', formData.businessCategory)}
        </CardContent>
      </Card>

      {/* 연락처 정보 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">연락처 정보</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* 주소 */}
          <div className="space-y-2">
            <Label className="text-sm font-medium text-gray-700">주소</Label>
            <div className="flex gap-2">
              <Input
                value={formData.zipCode}
                onChange={(e) => handleChange('zipCode', e.target.value)}
                placeholder="우편번호"
                disabled={isViewMode}
                className="w-[120px] bg-white"
              />
              <Button variant="outline" disabled={isViewMode} className="shrink-0">
                우편번호 찾기
              </Button>
            </div>
            <Input
              value={formData.address1}
              onChange={(e) => handleChange('address1', e.target.value)}
              placeholder="기본주소"
              disabled={isViewMode}
              className="bg-white"
            />
            <Input
              value={formData.address2}
              onChange={(e) => handleChange('address2', e.target.value)}
              placeholder="상세주소"
              disabled={isViewMode}
              className="bg-white"
            />
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {renderField('전화번호', 'phone', formData.phone, { type: 'phone', placeholder: '02-0000-0000' })}
            {renderField('모바일', 'mobile', formData.mobile, { type: 'phone', placeholder: '010-0000-0000' })}
            {renderField('팩스', 'fax', formData.fax, { type: 'phone', placeholder: '02-0000-0000' })}
            {renderField('이메일', 'email', formData.email, { type: 'email' })}
          </div>
        </CardContent>
      </Card>

      {/* 담당자 정보 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">담당자 정보</CardTitle>
        </CardHeader>
        <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {renderField('담당자명', 'managerName', formData.managerName)}
          {renderField('담당자 전화', 'managerPhone', formData.managerPhone, { type: 'phone' })}
          {renderField('시스템 관리자', 'systemManager', formData.systemManager)}
        </CardContent>
      </Card>

      {/* 회사 정보 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">회사 정보</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* 회사 로고 */}
          <div className="space-y-2">
            <Label className="text-sm font-medium text-gray-700">회사 로고</Label>
            <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
              {formData.logoUrl ? (
                <img
                  src={formData.logoUrl}
                  alt="회사 로고"
                  className="max-h-[100px] max-w-[300px] object-contain mx-auto"
                />
              ) : (
                <>
                  <p className="text-sm text-gray-500">750 X 250px, 10MB 이하의 PNG, JPEG, GIF</p>
                  {!isViewMode && (
                    <Button variant="outline" className="mt-2">
                      이미지 업로드
                    </Button>
                  )}
                </>
              )}
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {renderSelectField('매입 결제일', 'purchasePaymentDay', String(formData.purchasePaymentDay), PAYMENT_DAY_OPTIONS)}
            {renderSelectField('매출 결제일', 'salesPaymentDay', String(formData.salesPaymentDay), PAYMENT_DAY_OPTIONS)}
          </div>
        </CardContent>
      </Card>

      {/* 신용/거래 정보 */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle className="text-lg">신용/거래 정보</CardTitle>
          <Button
            variant="outline"
            size="sm"
            onClick={() => setIsCreditModalOpen(true)}
          >
            신용정보 보기
          </Button>
        </CardHeader>
        <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {renderSelectField('신용등급', 'creditRating', formData.creditRating, CREDIT_RATING_SELECTOR_OPTIONS)}
          {renderSelectField('거래등급', 'transactionGrade', formData.transactionGrade, TRANSACTION_GRADE_SELECTOR_OPTIONS)}
          {renderField('세금계산서 이메일', 'taxInvoiceEmail', formData.taxInvoiceEmail, { type: 'email' })}
          {renderSelectField('입금계좌 은행', 'bankName', formData.bankName, BANK_OPTIONS)}
          {renderField('계좌', 'accountNumber', formData.accountNumber, { type: 'accountNumber', placeholder: '계좌번호' })}
          {renderField('예금주', 'accountHolder', formData.accountHolder)}
        </CardContent>
      </Card>

      {/* 추가 정보 - 보기 모드에서만 표시 (계산된 값) */}
      {!isNewMode && (
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">추가 정보</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {/* 미수금 */}
              <div className="space-y-2">
                <Label className="text-sm font-medium text-gray-700">미수금</Label>
                <Input
                  type="text"
                  value={formData.outstandingAmount?.toLocaleString() + '원'}
                  disabled
                  className="bg-gray-50"
                />
              </div>
              {/* 악성채권 금액 */}
              <div className="space-y-2">
                <Label className="text-sm font-medium text-gray-700">악성채권 금액</Label>
                <Input
                  type="text"
                  value={formData.badDebtAmount ? formData.badDebtAmount.toLocaleString() + '원' : '-'}
                  disabled
                  className="bg-gray-50"
                />
              </div>
              {/* 악성채권 상태 */}
              <div className="space-y-2">
                <Label className="text-sm font-medium text-gray-700">악성채권 상태</Label>
                <div className={`px-3 py-2 rounded-md text-sm ${
                  formData.badDebtToggle
                    ? 'bg-red-100 text-red-800'
                    : 'bg-gray-100 text-gray-500'
                }`}>
                  {formData.badDebtToggle ? '악성채권' : '정상'}
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* 메모 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">메모</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* 메모 입력 */}
          {!isViewMode && (
            <div className="flex gap-2">
              <Textarea
                value={newMemo}
                onChange={(e) => setNewMemo(e.target.value)}
                placeholder="메모를 입력하세요..."
                className="flex-1 bg-white"
                rows={2}
              />
              <Button onClick={handleAddMemo} className="bg-blue-500 hover:bg-blue-600 self-end">
                <Plus className="h-4 w-4 mr-1" />
                추가
              </Button>
            </div>
          )}
          {/* 메모 리스트 */}
          {formData.memos.length > 0 ? (
            <div className="space-y-2">
              {formData.memos.map((memo) => (
                <div
                  key={memo.id}
                  className="flex items-start justify-between p-3 bg-gray-50 rounded-lg"
                >
                  <p className="text-sm text-gray-700 flex-1">{memo.content}</p>
                  {!isViewMode && (
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-6 w-6 text-gray-400 hover:text-red-500"
                      onClick={() => handleDeleteMemo(memo.id)}
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  )}
                </div>
              ))}
            </div>
          ) : (
            <p className="text-sm text-gray-500 text-center py-4">등록된 메모가 없습니다.</p>
          )}
        </CardContent>
      </Card>
    </div>
  );

  // config 동적 수정 (등록 모드일 때 타이틀 변경)
  // IntegratedDetailTemplate: create → "{title} 등록", view → "{title}", edit → "{title} 수정"
  // view 모드에서 "거래처 상세"로 표시하려면 직접 설정 필요
  const dynamicConfig = {
    ...vendorConfig,
    title: isViewMode ? '거래처 상세' : '거래처',
    description: isNewMode ? '새로운 거래처를 등록합니다' : '거래처 상세 정보 및 신용등급을 관리합니다',
    actions: {
      ...vendorConfig.actions,
      submitLabel: isNewMode ? '등록' : '저장',
    },
  };

  return (
    <>
      <IntegratedDetailTemplate
        config={dynamicConfig}
        mode={templateMode}
        initialData={initialData as Record<string, unknown>}
        itemId={vendorId}
        onSubmit={handleSubmit}
        onDelete={vendorId ? handleDelete : undefined}
        renderView={() => renderFormContent()}
        renderForm={() => renderFormContent()}
      />

      {/* 신용분석 모달 */}
      <CreditAnalysisModal
        open={isCreditModalOpen}
        onOpenChange={setIsCreditModalOpen}
        data={MOCK_CREDIT_DATA}
      />
    </>
  );
}