import UiPageNations from "@common/business_components/ui/table/uiPageNations";
import { Table, TableBody, TableCell, TableRow, Button } from "@common/components";
import { useEffect, useState } from "react";
import { confirmToast, showConfirmToast } from '@/components/ui/toast'
import { toast, Toaster } from "react-hot-toast";

type UiTableProps = {
  headName: React.ReactNode | undefined;
  tableName1?: React.ReactNode | undefined;
  tableData: { [key: string]: string | number | boolean | object }[];
  headlist: UiHeadProps[];
  pageSize: number;
  total: number;
  children?: Record<string, React.ReactNode> | undefined;
  cellClick: ((index: number | undefined, headId: string) => void) | undefined;
  onPageChange: (page: number) => void;
  className?: string;
  resetPageNo?: boolean;
  isEditable?: boolean;
  tableName2?: React.ReactNode | undefined;
  tableData2?: { [key: string]: string | number | boolean | object }[];
  headlist2?: UiHeadProps[];
  pageSize2?: number;
  total2?: number;
  children2?: Record<string, React.ReactNode> | undefined;
  cellClick2?: ((index: number | undefined, headId: string) => void) | undefined;
  onPageChange2?: (page: number) => void;
  className2?: string;
  resetPageNo2?: boolean;
  isEditable2?: boolean;
  showSecondTable?: boolean;
  showSaveButton?: boolean;
  onSaveClick?: () => void;
  onFormDataChange?: (formData: { [key: string]: string | number | boolean }) => void; // 추가
};

type UiHeadProps = {
  id: string;
  title: string;
  align?: string;
  type?: string;
  options?: string[];
  placeholder?: string;
  isNumber?: boolean;
  length?: number;
};

export function VerticalTable({
  headName,
  tableName1,
  tableData,
  headlist,
  pageSize,
  total,
  children,
  onPageChange,
  className = "",
  resetPageNo = false,
  isEditable = false,
  tableName2,
  headlist2,
  isEditable2 = false,
  showSecondTable = false,
  showSaveButton = false,
  onSaveClick,
  onFormDataChange,
}: UiTableProps) {
  const [cur, setCur] = useState<number>(1);
  const [formData, setFormData] = useState<{ [key: string]: string | number | boolean }>({});
  const [errors, setErrors] = useState<{ [key: string]: string }>({});

  useEffect(() => {
    if (resetPageNo) {
      setCur(1);
      onPageChange(1);
    }
  }, [onPageChange, resetPageNo]);

  useEffect(() => {
    if (tableData.length > 0 && tableData[0]) {
      const newData = JSON.parse(JSON.stringify(tableData[0]));
      setFormData(newData);
      setErrors({});
    }
  }, [tableData]);

  const handleInputChange = (id: string, value: string | number | boolean) => {
    const newFormData = {
      ...formData,
      [id]: value,
    };
    setFormData(newFormData);

    if (errors[id]) {
      setErrors(prev => {
        const newErrors = { ...prev };
        delete newErrors[id];
        return newErrors;
      });
    }

    if (onFormDataChange) {
      onFormDataChange(newFormData);
    }
  };

  const handlePageChange = (page: number) => {
    setCur(page);
    onPageChange(page);
  };

  const showError = (fieldId: string, message: string) => {
    setErrors(prev => ({
      ...prev,
      [fieldId]: message
    }));
  };

  return (
    <>
      {headName ? (
        <div className="card-header flex items-center justify-between">
          <h3 className="text-2xl mx-3 font-medium text-label">{headName}</h3>
          {showSaveButton && onSaveClick && (
            <Button
              onClick={onSaveClick}
              className="px-4 mr-3 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700"
            >
              저장
            </Button>
          )}
        </div>
      ) : null}
      <div className={`card !m-[1.2rem] !p-0r ${className}`}>
        {tableName1 && ( // tableName prop이 있으면 표시
          <div className="text-xl font-semibold my-2 mx-3">{tableName1}</div>
        )}
        <Table variant="secondary">
          <TableBody className="text-center">
            {headlist?.map((head) => (
              <TableRow key={head.id}>
                {/* 컬럼 제목 */}
                <TableCell className={`font-bold bg-blue-100 text-xs w-[120px] whitespace-nowrap`}>
                  {head.title}
                </TableCell>
                {/* 데이터 값 또는 입력 필드 */}
                <TableCell className="text-xs">
                  {children && children[head.id] ? children[head.id] : isEditable ? (
                    head.type === "select" ? (
                      <select
                        id={head.id}
                        value={String(formData[head.id]) ?? "-"}
                        onChange={(e) => handleInputChange(head.id, e.target.value)}
                        className="w-full border border-gray-300 rounded-sm px-2 py-1 text-xl border-radius-0"
                      >
                        {head.options?.map((option) => (
                          <option key={option} value={option}>
                            {option}
                          </option>
                        ))}
                      </select>
                    ) : head.type === "input" ? (
                      <div className="w-full">
                        <input
                          id={head.id}
                          type="text"
                          value={String(formData[head.id] ?? "")}
                          onChange={(e) => {
                            if (head.isNumber) {
                              const newValue = e.target.value;

                              if (newValue === "") {
                                handleInputChange(head.id, newValue);
                                return;
                              }

                              const isValidNumber = /^[0-9]+$/.test(newValue);
                              if (!isValidNumber) {
                                showError(head.id, `${head.title}는 숫자만 입력 가능합니다.`);
                                return;
                              }

                              if (head.length && newValue.length > head.length) {
                                showError(head.id, `${head.title}는 최대 ${head.length}자까지 입력 가능합니다.`);
                                return;
                              }

                              const numericValue = parseInt(newValue);
                              if (isNaN(numericValue) || numericValue < 0) return;

                              handleInputChange(head.id, numericValue);
                            } else {
                              const newValue = e.target.value;

                              if (head.length && newValue.length > head.length) {
                                showError(head.id, `${head.title}는 최대 ${head.length}자까지 입력 가능합니다.`);
                                return;
                              }

                              handleInputChange(head.id, e.target.value);
                            }
                          }}
                          className="w-full text-xl border-radius-0 border border-gray-300 rounded-sm px-2 py-1"
                          placeholder={head.placeholder}
                        />
                        {errors[head.id] && (
                          <div className="text-red-500 font-bold text-xl mt-1 text-left">
                            {errors[head.id]}
                          </div>
                        )}
                      </div>
                    ) : (
                      <span>{formData[head.id] ?? "-"}</span>
                    )
                  ) : (
                    <span>{formData[head.id] ?? "-"}</span>
                  )}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
        {tableName2 && ( // tableName prop이 있으면 표시
          <div className="text-xl font-semibold mt-8 my-2 mx-3">{tableName2}</div>
        )}
        {showSecondTable && (
          <Table variant="secondary">
            <TableBody className="text-center">
              {headlist2?.map((head) => (
                <TableRow key={head.id}>
                  {/* 컬럼 제목 */}
                  <TableCell className={`font-bold bg-blue-100 text-xs w-[120px] whitespace-nowrap`}>
                    {head.title}
                  </TableCell>
                  {/* 데이터 값 또는 입력 필드 */}
                  <TableCell className="text-xs">
                    {children && children[head.id] ? children[head.id] : isEditable2 ? (
                      head.type === "select" ? (
                        <select
                          id={head.id}
                          value={formData[head.id] !== undefined ? String(formData[head.id]) : ""}
                          onChange={(e) => handleInputChange(head.id, e.target.value)}
                          className="w-full border border-gray-300 rounded-sm px-2 py-1 text-xl border-radius-0"
                        >
                          {head.options?.map((option) => (
                            <option key={option} value={option}>
                              {option}
                            </option>
                          ))}
                        </select>
                      ) : head.type === "input" ? (
                        <div className="w-full">
                          <input
                            id={head.id}
                            type={head.isNumber ? "number" : "text"}
                            value={formData[head.id] !== undefined ? String(formData[head.id]) : ""}
                            onChange={(e) => {
                              if (head.isNumber) {
                                const newValue = e.target.value;

                                if (newValue === "") {
                                  handleInputChange(head.id, newValue);
                                  return;
                                }

                                const isValidNumber = /^[0-9]+$/.test(newValue);
                                if (!isValidNumber) {
                                  showError(head.id, `${head.title}는 숫자만 입력 가능합니다.`);
                                  return;
                                }

                                if (head.length && newValue.length > head.length) {
                                  showError(head.id, `${head.title}는 최대 ${head.length}자까지 입력 가능합니다.`);
                                  return;
                                }

                                const numericValue = parseInt(newValue);
                                if (isNaN(numericValue) || numericValue < 0) return;

                                handleInputChange(head.id, numericValue);
                              } else {
                                const newValue = e.target.value;

                                if (head.length && newValue.length > head.length) {
                                  showError(head.id, `${head.title}는 최대 ${head.length}자까지 입력 가능합니다.`);
                                  return;
                                }

                                handleInputChange(head.id, e.target.value);
                              }
                            }}
                            className="w-full text-xl border-radius-0 border border-gray-300 rounded-sm px-2 py-1"
                            placeholder={head.placeholder}
                          />
                          {errors[head.id] && (
                            <div className="text-red-500 font-bold text-xl mt-1 text-left">
                              {errors[head.id]}
                            </div>
                          )}
                        </div>
                      ) : (
                        <span>{formData[head.id] ?? "-"}</span>
                      )
                    ) : (
                      <span>{formData[head.id] ?? "-"}</span>
                    )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
        {total > 0 && (
          <UiPageNations
            total={total}
            cur={cur}
            pageSize={pageSize}
            onPageChange={handlePageChange}
          />
        )}
      </div>
      <Toaster position="top-center"></Toaster>
    </>
  );
}