import React from "react";
import { Alert, AlertDescription } from "../ui/alert";

/**
 * 벨리데이션 에러 요약 컴포넌트
 * 
 * 품목관리 디자인 시스템 표준에 따라 폼 상단에 에러 목록을 표시합니다.
 * 
 * @example
 * ```tsx
 * const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
 * 
 * <ValidationErrorSummary 
 *   errors={validationErrors}
 *   fieldNameMap={{
 *     'itemCode': '품목코드',
 *     'itemName': '품목명'
 *   }}
 * />
 * ```
 */

interface ValidationErrorSummaryProps {
  /** 에러 객체 { fieldName: errorMessage } */
  errors: Record<string, string>;
  /** 필드명을 한글 레이블로 매핑하는 객체 */
  fieldNameMap?: Record<string, string>;
  /** 커스텀 클래스명 */
  className?: string;
}

export function ValidationErrorSummary({
  errors,
  fieldNameMap = {},
  className = "",
}: ValidationErrorSummaryProps) {
  // 에러가 없으면 렌더링하지 않음
  if (Object.keys(errors).length === 0) {
    return null;
  }

  return (
    <Alert className={`bg-red-50 border-red-200 ${className}`}>
      <AlertDescription className="text-red-900">
        <div className="flex items-start gap-2">
          <span className="text-lg">⚠️</span>
          <div className="flex-1">
            <strong className="block mb-2">
              입력 내용을 확인해주세요 ({Object.keys(errors).length}개 오류)
            </strong>
            <ul className="space-y-1 text-sm">
              {Object.entries(errors).map(([field, message]) => {
                const fieldLabel = fieldNameMap[field] || field;

                return (
                  <li key={field} className="flex items-start gap-2">
                    <span className="text-red-600 mt-0.5">•</span>
                    <button
                      type="button"
                      onClick={() => {
                        // 해당 필드의 input/select 요소를 찾아서 스크롤
                        const errorField = document.querySelector(
                          `[name="${field}"]`
                        ) as HTMLElement;
                        if (errorField) {
                          errorField.scrollIntoView({
                            behavior: "smooth",
                            block: "center",
                          });
                          errorField.focus();
                        }
                      }}
                      className="text-left hover:underline focus:outline-none focus:underline"
                    >
                      <span className="font-medium">{fieldLabel}:</span>{" "}
                      {message}
                    </button>
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
      </AlertDescription>
    </Alert>
  );
}
