import { useDmStore } from "@/app/store";
import type { DemandCompType } from "@/app/store/sdmMng";
import { BZNM_TOT_NO, FormField, FormUi } from "@common/business_components";
import { Button, Input } from "@common/components";
import { zodResolver } from "@hookform/resolvers/zod";
import { sha512 } from 'js-sha512';
import { useEffect, useState } from "react";
import { FormProvider, useForm, type ControllerRenderProps } from "react-hook-form";
import * as z from "zod";

export function SdmLoginForm() {
  type FormData = z.infer<ReturnType<typeof createFormSchema>>;
  type FieldComponent = (field: ControllerRenderProps<FormData, keyof FormData>) => JSX.Element;
  const createFormSchema = () => z.object({
    dmdInfoId: z.string()
      .min(1, "사업자등록번호를 입력해주세요")
      .regex(/^\d{10}$/, "사업자등록번호는 10자리 숫자만 입력 가능합니다"),
    bznmTotNo: isBznmTotNoDisabled 
      ? z.string().optional()
      : z.string().length(4, "종사업자등록번호는 4자리 숫자만 입력 가능합니다"),
    password: z.string()
      .min(1, "비밀번호를 입력해주세요")
      .min(8, "비밀번호는 8자 이상 입력해주세요") 
      .max(16, "비밀번호는 16자 이내로 입력해주세요"),
    rgtr: z.string().optional(),
    dmdAplyPswd: z.string().optional(),
  });

  const { actionLogin, initializeCommonData } = useDmStore((state) => state);
  const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(false);
  const formSchema = createFormSchema();

  useEffect(() => {
    initializeCommonData();
  }, [initializeCommonData]);

  const defaultValues: FormData = {
    dmdInfoId: '',
    bznmTotNo: '',
    password: '',
    rgtr: '',
    dmdAplyPswd: '',
  };

  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues,
    mode: "onChange",
  });

  const handleCheckboxChange = (checked: boolean) => {
    setIsBznmTotNoDisabled(checked);
  };

  const handleLogin = () => {
    const data = form.getValues();
    const passwordStr = sha512.hex(data.password)
    data.dmdAplyPswd = passwordStr;
    const param = {
      dmdInfoId: data.dmdInfoId + (isBznmTotNoDisabled ? '0000' : data.bznmTotNo),
      dmdAplyPswd: data.dmdAplyPswd,
    }
    actionLogin(param as unknown as DemandCompType);
  };
  
  const formFields: Array<{
    name: keyof FormData;
    label: string;
    component: FieldComponent | undefined;
  }> = [
    {
      name: "dmdInfoId",
      label: "사업자등록번호",
      component: (field) => (
        <Input 
          placeholder="사업자등록번호를 입력하세요"
          type="text"
          className="!mt-5 !mb-5 !text-xl text-gray-600"
          {...field} 
        />
      )
    },
    {
      name: "bznmTotNo",
      label: BZNM_TOT_NO || "종사업자등록번호",
      component: (field) => (
        <FormUi 
          label="종사업자등록번호"
          onCheckboxChange={handleCheckboxChange}
          isDisabled={isBznmTotNoDisabled}
        >
          <Input 
            placeholder="여러사업장이 있을 경우 입력해주세요" 
            type="text"
            className="!mt-5 !text-xl text-gray-600"
            disabled={isBznmTotNoDisabled}
            {...field}
          />
        </FormUi>
      )
    },
    {
      name: "password",
      label: "비밀번호",
      component: (field) => (
        <Input 
          placeholder="비밀번호를 입력하세요" 
          type="password"
          className="!mt-5 !mb-5 !text-xl text-gray-600"
          {...field} 
        />
      )
    }
  ];

  return (
    <>
      <div>
        <FormProvider {...form}>
          {formFields.map(({ name, label, component }) => (
            <FormField
              key={name}
              control={form.control}
              name={name}
              render={({ field }) => (
                label==='종사업자등록번호' ? 
                  <> 
                    {component && component(field)}
                  </>
                : <FormUi label={label}>
                    {component && component(field)}
                  </FormUi>
              )}
            />
          ))}
        </FormProvider>
        <div className="flex justify-center pt-4">
          <Button 
            onClick={handleLogin} 
            className="w-32 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-200"
          >
            로그인
          </Button>
        </div>
      </div>
    </>
  );
}