/**
 * 폼 유효성 검사 데모 컴포넌트
 * 
 * 전체 시스템에서 필수 필드 유효성 검사 및 에러 표시 기능을 
 * 시연하는 예시 컴포넌트입니다.
 */

import { useState } from "react";
import { Button } from "./ui/button";
import { FormField } from "./molecules/FormField";
import { FormSection } from "./organisms/FormSection";
import { PageLayout } from "./organisms/PageLayout";
import { PageHeader } from "./organisms/PageHeader";
import { validateForm, hasErrors } from "./utils/validation";
import { toast } from "sonner@2.0.3";
import { FileText, Save, X } from "lucide-react";

export function FormValidationDemo() {
  // 폼 데이터
  const [formData, setFormData] = useState({
    // 기본 정보
    customerName: "",
    email: "",
    phone: "",
    itemType: "",
    
    // 상세 정보
    quantity: "",
    deliveryDate: "",
    address: "",
    note: "",
  });

  // 에러 상태
  const [errors, setErrors] = useState<Record<string, string>>({});

  // 유효성 검사 규칙
  const validationRules = {
    customerName: {
      required: true,
      minLength: 2,
      message: "고객명은 2자 이상 입력해주세요"
    },
    email: {
      required: true,
      email: true,
    },
    phone: {
      required: true,
      phone: true,
    },
    itemType: {
      required: true,
      message: "품목 유형을 선택해주세요"
    },
    quantity: {
      required: true,
      number: true,
      min: 1,
      message: "수량은 1 이상이어야 합니다"
    },
    deliveryDate: {
      required: true,
      custom: (value) => {
        if (!value) return false;
        const selected = new Date(value);
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        return selected >= today;
      },
      message: "납기일은 오늘 이후여야 합니다"
    },
    address: {
      required: true,
      minLength: 5,
      message: "주소는 5자 이상 입력해주세요"
    },
  };

  // 섹션별 에러 카운트
  const basicInfoErrors = ["customerName", "email", "phone", "itemType"].filter(
    field => errors[field]
  ).length;

  const detailInfoErrors = ["quantity", "deliveryDate", "address", "note"].filter(
    field => errors[field]
  ).length;

  // 필드 변경 핸들러
  const handleFieldChange = (field: string, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    
    // 필드 변경 시 해당 필드 에러 제거
    if (errors[field]) {
      setErrors(prev => {
        const newErrors = { ...prev };
        delete newErrors[field];
        return newErrors;
      });
    }
  };

  // 저장 핸들러
  const handleSave = () => {
    // 폼 전체 유효성 검사
    const validationErrors = validateForm(formData, validationRules);
    
    if (hasErrors(validationErrors)) {
      setErrors(validationErrors);
      toast.error("입력 내용을 확인해주세요.");
      
      // 첫 번째 에러 필드로 스크롤
      const firstErrorField = Object.keys(validationErrors)[0];
      const element = document.getElementById(firstErrorField);
      if (element) {
        element.scrollIntoView({ behavior: "smooth", block: "center" });
        setTimeout(() => element.focus(), 300);
      }
      return;
    }

    // 유효성 검사 통과
    console.log("저장 데이터:", formData);
    toast.success("저장되었습니다!");
    
    // 폼 초기화
    setFormData({
      customerName: "",
      email: "",
      phone: "",
      itemType: "",
      quantity: "",
      deliveryDate: "",
      address: "",
      note: "",
    });
    setErrors({});
  };

  // 취소 핸들러
  const handleCancel = () => {
    setFormData({
      customerName: "",
      email: "",
      phone: "",
      itemType: "",
      quantity: "",
      deliveryDate: "",
      address: "",
      note: "",
    });
    setErrors({});
    toast.info("입력이 취소되었습니다.");
  };

  return (
    <PageLayout>
      <PageHeader
        title="폼 유효성 검사 데모"
        description="필수 필드 유효성 검사 및 에러 표시 기능 시연"
        icon={FileText}
      />

      <div className="space-y-6">
        {/* 안내 메시지 */}
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
          <h3 className="font-semibold text-blue-900 mb-2">💡 사용법</h3>
          <ul className="text-sm text-blue-800 space-y-1">
            <li>• 필수 필드는 빨간색 별표(*)로 표시됩니다</li>
            <li>• 빈 값으로 저장 시도하면 에러가 표시됩니다</li>
            <li>• 잘못된 형식 입력 시 해당 필드에 빨간 테두리와 에러 메시지가 나타납니다</li>
            <li>• 섹션 제목에 에러 개수가 표시됩니다</li>
            <li>• 필드를 수정하면 해당 에러가 자동으로 제거됩니다</li>
          </ul>
        </div>

        {/* 기본 정보 섹션 */}
        <FormSection 
          title="기본 정보"
          hasError={basicInfoErrors > 0}
          errorCount={basicInfoErrors}
        >
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <FormField
              label="고객명"
              value={formData.customerName}
              onChange={(value) => handleFieldChange("customerName", value)}
              required
              error={errors.customerName}
              placeholder="고객명을 입력하세요"
            />

            <FormField
              label="이메일"
              type="email"
              value={formData.email}
              onChange={(value) => handleFieldChange("email", value)}
              required
              error={errors.email}
              placeholder="example@company.com"
              helperText="정확한 이메일을 입력해주세요"
            />

            <FormField
              label="전화번호"
              type="tel"
              value={formData.phone}
              onChange={(value) => handleFieldChange("phone", value)}
              required
              error={errors.phone}
              placeholder="010-1234-5678"
            />

            <FormField
              label="품목 유형"
              type="select"
              value={formData.itemType}
              onChange={(value) => handleFieldChange("itemType", value)}
              required
              error={errors.itemType}
              options={[
                { value: "FG", label: "제품" },
                { value: "RM", label: "원자재" },
                { value: "SM", label: "부자재" },
                { value: "CS", label: "소모품" },
              ]}
            />
          </div>
        </FormSection>

        {/* 상세 정보 섹션 */}
        <FormSection 
          title="상세 정보"
          hasError={detailInfoErrors > 0}
          errorCount={detailInfoErrors}
        >
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <FormField
              label="수량"
              type="number"
              value={formData.quantity}
              onChange={(value) => handleFieldChange("quantity", value)}
              required
              error={errors.quantity}
              min={1}
              placeholder="수량을 입력하세요"
            />

            <FormField
              label="납기일"
              type="date"
              value={formData.deliveryDate}
              onChange={(value) => handleFieldChange("deliveryDate", value)}
              required
              error={errors.deliveryDate}
            />

            <div className="md:col-span-2">
              <FormField
                label="주소"
                value={formData.address}
                onChange={(value) => handleFieldChange("address", value)}
                required
                error={errors.address}
                placeholder="주소를 입력하세요"
              />
            </div>

            <div className="md:col-span-2">
              <FormField
                label="비고"
                type="textarea"
                value={formData.note}
                onChange={(value) => handleFieldChange("note", value)}
                error={errors.note}
                placeholder="추가 사항을 입력하세요"
                rows={4}
              />
            </div>
          </div>
        </FormSection>

        {/* 버튼 그룹 */}
        <div className="flex justify-end gap-3">
          <Button
            variant="outline"
            onClick={handleCancel}
            className="min-w-24"
          >
            <X className="h-4 w-4 mr-2" />
            취소
          </Button>
          <Button
            onClick={handleSave}
            className="min-w-24"
          >
            <Save className="h-4 w-4 mr-2" />
            저장
          </Button>
        </div>

        {/* 현재 에러 상태 표시 (개발용) */}
        {hasErrors(errors) && (
          <div className="bg-red-50 border border-red-200 rounded-lg p-4">
            <h4 className="font-semibold text-red-900 mb-2">⚠️ 검증 에러</h4>
            <ul className="text-sm text-red-800 space-y-1">
              {Object.entries(errors).map(([field, message]) => (
                <li key={field}>
                  <strong>{field}:</strong> {message}
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </PageLayout>
  );
}
