/**
 * 거래처 등록/수정 페이지
 * 
 * ResponsiveFormTemplate 적용
 * - 데스크톱/태블릿/모바일 통합 폼 레이아웃
 * - 섹션 기반 정보 입력
 * - 유효성 검사 및 에러 표시
 */

import { useState } from "react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Textarea } from "./ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
import { Checkbox } from "./ui/checkbox";
import { Label } from "./ui/label";
import { 
  Building2, 
  UserCircle, 
  Phone, 
  Mail, 
  MapPin, 
  CreditCard, 
  FileText, 
  AlertTriangle,
  Calculator
} from "lucide-react";
import { toast } from "sonner@2.0.3";
import { validateForm, hasErrors } from "./utils/validation";
import { 
  ResponsiveFormTemplate, 
  FormSection, 
  FormField, 
  FormFieldGrid,
  ValidationError 
} from "./templates/ResponsiveFormTemplate";

interface ClientData {
  id: string;
  code: string;
  businessNumber: string;
  name: string;
  type: "매입" | "매출" | "매입매출";
  representative: string;
  address: string;
  businessType: string;
  businessCategory: string;
  phone: string;
  mobile: string;
  fax: string;
  email: string;
  managerName: string;
  managerTel: string;
  memo: string;
  accountId: string;
  accountPassword: string;
  purchasePaymentDay: string;
  salesPaymentDay: string;
  taxAgreement: boolean;
  taxAmount: string;
  taxStartDate: string;
  taxEndDate: string;
  status: "활성" | "비활성";
  manager: string;
  badDebt: boolean;
  badDebtAmount: string;
  badDebtReceiveDate: string;
  badDebtEndDate: string;
  badDebtProgress: string;
}

interface ClientRegistrationProps {
  onBack: () => void;
  onSave: (client: ClientData) => void;
  editingClient?: ClientData | null;
}

export function ClientRegistration({ onBack, onSave, editingClient }: ClientRegistrationProps) {
  const [formData, setFormData] = useState<ClientData>(
    editingClient || {
      id: "",
      code: "",
      businessNumber: "",
      name: "",
      type: "매입",
      representative: "",
      address: "",
      businessType: "",
      businessCategory: "",
      phone: "",
      mobile: "",
      fax: "",
      email: "",
      managerName: "",
      managerTel: "",
      memo: "",
      accountId: "",
      accountPassword: "",
      purchasePaymentDay: "말일",
      salesPaymentDay: "말일",
      taxAgreement: false,
      taxAmount: "",
      taxStartDate: "",
      taxEndDate: "",
      status: "활성",
      manager: "",
      badDebt: false,
      badDebtAmount: "",
      badDebtReceiveDate: "",
      badDebtEndDate: "",
      badDebtProgress: "",
    }
  );

  const [errors, setErrors] = useState<Record<string, string>>({});

  // 유효성 검사 규칙
  const validationRules = {
    name: {
      required: true,
      minLength: 2,
      message: "거래처명은 2자 이상 입력해주세요"
    },
    businessNumber: {
      required: true,
      pattern: /^\d{10}$/,
      message: "사업자등록번호는 10자리 숫자여야 합니다"
    },
    representative: {
      required: true,
      minLength: 2,
      message: "대표자명은 2자 이상 입력해주세요"
    },
    phone: {
      phone: true,
    },
    mobile: {
      phone: true,
    },
    email: {
      email: true,
    },
    managerTel: {
      phone: true,
    },
  };

  // 에러를 ValidationError 배열로 변환
  const validationErrors: ValidationError[] = Object.entries(errors).map(([field, message]) => {
    const fieldLabels: Record<string, string> = {
      name: "거래처명",
      businessNumber: "사업자등록번호",
      representative: "대표자명",
      phone: "전화번호",
      mobile: "모바일",
      email: "이메일",
      managerTel: "담당자 전화",
    };

    return {
      field,
      message,
      fieldLabel: fieldLabels[field],
    };
  });

  const handleSubmit = () => {
    const validationErrors = validateForm(formData, validationRules);

    if (hasErrors(validationErrors)) {
      setErrors(validationErrors);
      toast.error("입력 내용을 확인해주세요.");
      return;
    }

    onSave(formData);
    toast.success(editingClient ? "거래처가 수정되었습니다." : "거래처가 등록되었습니다.");
    onBack();
  };

  const handleFieldChange = (field: keyof ClientData, value: any) => {
    setFormData({ ...formData, [field]: value });
    if (errors[field]) {
      setErrors(prev => {
        const newErrors = { ...prev };
        delete newErrors[field];
        return newErrors;
      });
    }
  };

  const handleErrorClick = (field: string) => {
    const element = document.getElementById(field);
    if (element) {
      element.scrollIntoView({ behavior: "smooth", block: "center" });
      element.focus();
    }
  };

  return (
    <ResponsiveFormTemplate
      title="거래처 등록"
      description="거래처 정보를 입력하세요"
      icon={Building2}
      onSave={handleSubmit}
      onCancel={onBack}
      saveText={editingClient ? "수정" : "등록"}
      isEditMode={!!editingClient}
      validationErrors={validationErrors}
      onErrorClick={handleErrorClick}
      maxWidth="2xl"
    >
      {/* 1. 기본 정보 */}
      <FormSection
        title="기본 정보"
        description="거래처의 기본 정보를 입력하세요"
        icon={Building2}
      >
        <FormFieldGrid columns={2}>
          <FormField
            label="사업자등록번호"
            required
            error={errors.businessNumber}
            htmlFor="businessNumber"
          >
            <Input
              id="businessNumber"
              placeholder="10자리 숫자"
              value={formData.businessNumber}
              onChange={(e) => handleFieldChange("businessNumber", e.target.value)}
            />
          </FormField>

          <FormField
            label="거래처 코드"
            htmlFor="code"
            helpText="자동 생성됩니다"
          >
            <Input
              id="code"
              placeholder="자동생성"
              value={formData.code}
              onChange={(e) => handleFieldChange("code", e.target.value)}
              disabled
            />
          </FormField>
        </FormFieldGrid>

        <FormFieldGrid columns={2}>
          <FormField
            label="거래처명"
            required
            error={errors.name}
            htmlFor="name"
          >
            <Input
              id="name"
              placeholder="거래처명 입력"
              value={formData.name}
              onChange={(e) => handleFieldChange("name", e.target.value)}
            />
          </FormField>

          <FormField
            label="대표자명"
            required
            error={errors.representative}
            htmlFor="representative"
          >
            <Input
              id="representative"
              placeholder="대표자명 입력"
              value={formData.representative}
              onChange={(e) => handleFieldChange("representative", e.target.value)}
            />
          </FormField>
        </FormFieldGrid>

        <FormField label="거래처 유형" required>
          <RadioGroup
            value={formData.type}
            onValueChange={(value) => handleFieldChange("type", value as ClientData["type"])}
            className="flex gap-4"
          >
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="매입" id="type-purchase" />
              <Label htmlFor="type-purchase">매입</Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="매출" id="type-sales" />
              <Label htmlFor="type-sales">매출</Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="매입매출" id="type-both" />
              <Label htmlFor="type-both">매입매출</Label>
            </div>
          </RadioGroup>
        </FormField>

        <FormFieldGrid columns={2}>
          <FormField label="업태" htmlFor="businessType">
            <Input
              id="businessType"
              placeholder="제조업, 도소매업 등"
              value={formData.businessType}
              onChange={(e) => handleFieldChange("businessType", e.target.value)}
            />
          </FormField>

          <FormField label="종목" htmlFor="businessCategory">
            <Input
              id="businessCategory"
              placeholder="철강, 건설 등"
              value={formData.businessCategory}
              onChange={(e) => handleFieldChange("businessCategory", e.target.value)}
            />
          </FormField>
        </FormFieldGrid>
      </FormSection>

      {/* 2. 연락처 정보 */}
      <FormSection
        title="연락처 정보"
        description="거래처의 연락처 정보를 입력하세요"
        icon={Phone}
      >
        <FormField label="주소" htmlFor="address">
          <Input
            id="address"
            placeholder="주소 입력"
            value={formData.address}
            onChange={(e) => handleFieldChange("address", e.target.value)}
          />
        </FormField>

        <FormFieldGrid columns={3}>
          <FormField
            label="전화번호"
            error={errors.phone}
            htmlFor="phone"
          >
            <Input
              id="phone"
              placeholder="02-1234-5678"
              value={formData.phone}
              onChange={(e) => handleFieldChange("phone", e.target.value)}
            />
          </FormField>

          <FormField
            label="모바일"
            error={errors.mobile}
            htmlFor="mobile"
          >
            <Input
              id="mobile"
              placeholder="010-1234-5678"
              value={formData.mobile}
              onChange={(e) => handleFieldChange("mobile", e.target.value)}
            />
          </FormField>

          <FormField label="팩스" htmlFor="fax">
            <Input
              id="fax"
              placeholder="02-1234-5678"
              value={formData.fax}
              onChange={(e) => handleFieldChange("fax", e.target.value)}
            />
          </FormField>
        </FormFieldGrid>

        <FormField
          label="이메일"
          error={errors.email}
          htmlFor="email"
        >
          <Input
            id="email"
            type="email"
            placeholder="example@company.com"
            value={formData.email}
            onChange={(e) => handleFieldChange("email", e.target.value)}
          />
        </FormField>
      </FormSection>

      {/* 3. 담당자 정보 */}
      <FormSection
        title="담당자 정보"
        description="거래처 담당자 정보를 입력하세요"
        icon={UserCircle}
      >
        <FormFieldGrid columns={2}>
          <FormField label="담당자명" htmlFor="managerName">
            <Input
              id="managerName"
              placeholder="담당자명 입력"
              value={formData.managerName}
              onChange={(e) => handleFieldChange("managerName", e.target.value)}
            />
          </FormField>

          <FormField
            label="담당자 전화"
            error={errors.managerTel}
            htmlFor="managerTel"
          >
            <Input
              id="managerTel"
              placeholder="010-1234-5678"
              value={formData.managerTel}
              onChange={(e) => handleFieldChange("managerTel", e.target.value)}
            />
          </FormField>
        </FormFieldGrid>

        <FormField label="시스템 관리자" htmlFor="manager">
          <Input
            id="manager"
            placeholder="시스템 관리자명"
            value={formData.manager}
            onChange={(e) => handleFieldChange("manager", e.target.value)}
          />
        </FormField>
      </FormSection>

      {/* 4. 발주처 설정 */}
      <FormSection
        title="발주처 설정"
        description="발주처로 사용할 경우 계정 정보를 입력하세요"
        icon={CreditCard}
      >
        <FormFieldGrid columns={2}>
          <FormField label="계정 ID" htmlFor="accountId">
            <Input
              id="accountId"
              placeholder="계정 ID"
              value={formData.accountId}
              onChange={(e) => handleFieldChange("accountId", e.target.value)}
            />
          </FormField>

          <FormField label="비밀번호" htmlFor="accountPassword">
            <Input
              id="accountPassword"
              type="password"
              placeholder="비밀번호"
              value={formData.accountPassword}
              onChange={(e) => handleFieldChange("accountPassword", e.target.value)}
            />
          </FormField>
        </FormFieldGrid>

        <FormFieldGrid columns={2}>
          <FormField label="매입 결제일" htmlFor="purchasePaymentDay">
            <Select
              value={formData.purchasePaymentDay}
              onValueChange={(value) => handleFieldChange("purchasePaymentDay", value)}
            >
              <SelectTrigger id="purchasePaymentDay">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="말일">말일</SelectItem>
                <SelectItem value="익월 10일">익월 10일</SelectItem>
                <SelectItem value="익월 15일">익월 15일</SelectItem>
                <SelectItem value="익월 20일">익월 20일</SelectItem>
                <SelectItem value="익월 25일">익월 25일</SelectItem>
                <SelectItem value="익월 말일">익월 말일</SelectItem>
              </SelectContent>
            </Select>
          </FormField>

          <FormField label="매출 결제일" htmlFor="salesPaymentDay">
            <Select
              value={formData.salesPaymentDay}
              onValueChange={(value) => handleFieldChange("salesPaymentDay", value)}
            >
              <SelectTrigger id="salesPaymentDay">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="말일">말일</SelectItem>
                <SelectItem value="익월 10일">익월 10일</SelectItem>
                <SelectItem value="익월 15일">익월 15일</SelectItem>
                <SelectItem value="익월 20일">익월 20일</SelectItem>
                <SelectItem value="익월 25일">익월 25일</SelectItem>
                <SelectItem value="익월 말일">익월 말일</SelectItem>
              </SelectContent>
            </Select>
          </FormField>
        </FormFieldGrid>
      </FormSection>

      {/* 5. 약정 세금 */}
      <FormSection
        title="약정 세금"
        description="세금 약정이 있는 경우 입력하세요"
        icon={Calculator}
      >
        <FormField label="약정 여부">
          <div className="flex items-center space-x-2">
            <Checkbox
              id="taxAgreement"
              checked={formData.taxAgreement}
              onCheckedChange={(checked) => handleFieldChange("taxAgreement", checked)}
            />
            <Label htmlFor="taxAgreement">세금 약정 있음</Label>
          </div>
        </FormField>

        {formData.taxAgreement && (
          <>
            <FormField label="약정 금액" htmlFor="taxAmount">
              <Input
                id="taxAmount"
                type="number"
                placeholder="약정 금액"
                value={formData.taxAmount}
                onChange={(e) => handleFieldChange("taxAmount", e.target.value)}
              />
            </FormField>

            <FormFieldGrid columns={2}>
              <FormField label="약정 시작일" htmlFor="taxStartDate">
                <Input
                  id="taxStartDate"
                  type="date"
                  value={formData.taxStartDate}
                  onChange={(e) => handleFieldChange("taxStartDate", e.target.value)}
                />
              </FormField>

              <FormField label="약정 종료일" htmlFor="taxEndDate">
                <Input
                  id="taxEndDate"
                  type="date"
                  value={formData.taxEndDate}
                  onChange={(e) => handleFieldChange("taxEndDate", e.target.value)}
                />
              </FormField>
            </FormFieldGrid>
          </>
        )}
      </FormSection>

      {/* 6. 악성채권 */}
      <FormSection
        title="악성채권 정보"
        description="악성채권이 있는 경우 입력하세요"
        icon={AlertTriangle}
      >
        <FormField label="악성채권 여부">
          <div className="flex items-center space-x-2">
            <Checkbox
              id="badDebt"
              checked={formData.badDebt}
              onCheckedChange={(checked) => handleFieldChange("badDebt", checked)}
            />
            <Label htmlFor="badDebt">악성채권 있음</Label>
          </div>
        </FormField>

        {formData.badDebt && (
          <>
            <FormField label="악성채권 금액" htmlFor="badDebtAmount">
              <Input
                id="badDebtAmount"
                type="number"
                placeholder="채권 금액"
                value={formData.badDebtAmount}
                onChange={(e) => handleFieldChange("badDebtAmount", e.target.value)}
              />
            </FormField>

            <FormFieldGrid columns={2}>
              <FormField label="채권 발생일" htmlFor="badDebtReceiveDate">
                <Input
                  id="badDebtReceiveDate"
                  type="date"
                  value={formData.badDebtReceiveDate}
                  onChange={(e) => handleFieldChange("badDebtReceiveDate", e.target.value)}
                />
              </FormField>

              <FormField label="채권 만료일" htmlFor="badDebtEndDate">
                <Input
                  id="badDebtEndDate"
                  type="date"
                  value={formData.badDebtEndDate}
                  onChange={(e) => handleFieldChange("badDebtEndDate", e.target.value)}
                />
              </FormField>
            </FormFieldGrid>

            <FormField label="진행 상태" htmlFor="badDebtProgress">
              <Select
                value={formData.badDebtProgress}
                onValueChange={(value) => handleFieldChange("badDebtProgress", value)}
              >
                <SelectTrigger id="badDebtProgress">
                  <SelectValue placeholder="진행 상태 선택" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="협의중">협의중</SelectItem>
                  <SelectItem value="소송중">소송중</SelectItem>
                  <SelectItem value="회수완료">회수완료</SelectItem>
                  <SelectItem value="대손처리">대손처리</SelectItem>
                </SelectContent>
              </Select>
            </FormField>
          </>
        )}
      </FormSection>

      {/* 7. 기타 */}
      <FormSection
        title="기타 정보"
        description="추가 정보를 입력하세요"
        icon={FileText}
      >
        <FormField label="메모" htmlFor="memo">
          <Textarea
            id="memo"
            placeholder="메모 입력"
            value={formData.memo}
            onChange={(e) => handleFieldChange("memo", e.target.value)}
            rows={4}
          />
        </FormField>

        <FormField label="상태" htmlFor="status">
          <RadioGroup
            value={formData.status}
            onValueChange={(value) => handleFieldChange("status", value as ClientData["status"])}
            className="flex gap-4"
          >
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="활성" id="status-active" />
              <Label htmlFor="status-active">활성</Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="비활성" id="status-inactive" />
              <Label htmlFor="status-inactive">비활성</Label>
            </div>
          </RadioGroup>
        </FormField>
      </FormSection>
    </ResponsiveFormTemplate>
  );
}