import Image from 'next/image'
import { usePopupController } from '@/store/popupController'
import { useParams } from 'next/navigation'
import { useSurvey } from '@/hooks/useSurvey'
import { useEffect, useState } from 'react'
import { useSessionStore } from '@/store/session'
import { useCommCode } from '@/hooks/useCommCode'
import { CommCode } from '@/types/CommCode'
import { sendEmail } from '@/libs/mailer'
import { useSpinnerStore } from '@/store/spinnerStore'
import { CONFIRM_MESSAGE, SUCCESS_MESSAGE, ERROR_MESSAGE, useAlertMsg, WARNING_MESSAGE } from '@/hooks/useAlertMsg'

interface SubmitFormData {
  saleBase: string | null
  targetId: string | null
  targetNm: string | null
  sender: string
  receiver: string[] | string
  reference: string[] | null
  title: string
  contents: string | null
  srlNo: string | null
}

interface FormField {
  id: keyof SubmitFormData
  name: string
  required: boolean
}

export default function SurveySaleSubmitPopup() {
  const popupController = usePopupController()
  const { session } = useSessionStore()
  const params = useParams()
  const routeId = params.id

  const { setIsShow } = useSpinnerStore()
  const { getCommCode } = useCommCode()
  const { surveyDetail, getSubmitTarget, isSubmittingSurvey, submitSurvey } = useSurvey(Number(routeId))
  const { showErrorAlert, showSuccessAlert, showConfirm } = useAlertMsg()

  const [submitData, setSubmitData] = useState<SubmitFormData>({
    saleBase: null,
    targetId: null,
    targetNm: null,
    sender: '',
    receiver: [],
    reference: null,
    title: '',
    contents: '',
    srlNo: null,
  })

  const [commCodeList, setCommCodeList] = useState<CommCode[]>([])
  /** 제출 타겟 데이터 조회 및 제출 폼 데이터 삽입 */
  useEffect(() => {
    if (!session?.isLoggedIn || !surveyDetail?.id) return
    const baseUpdate = {
      sender: session?.email ?? '',
      title: '[HANASYS現地調査] 調査物件が提出. (' + surveyDetail?.srlNo + ')',
      srlNo: surveyDetail?.srlNo ?? null,
    }
    /** Admin 제출 폼 데이터 삽입 - 1차 판매점*/
    if (session?.role === 'Admin') {
      getCommCode('SALES_OFFICE_CD').then((codes) => {
        setCommCodeList(codes)
      })
      setSubmitData((prev) => ({
        ...prev,
        ...baseUpdate,
      }))
      /** Builder, Admin_Sub 제출 폼 데이터 삽입 - 2차 판매점, 2차 판매점 시공권한*/
    } else if (session?.role === 'Builder' || session?.role === 'Admin_Sub') {
      getSubmitTarget({ storeId: surveyDetail?.storeId ?? '', role: session?.role ?? '' }).then((data) => {
        if (!data) return
        if (data && data.length > 0) {
          const updateData: Partial<SubmitFormData> = {
            sender: session?.email ?? '',
            title: '[HANASYS現地調査] 調査物件が提出. (' + surveyDetail?.srlNo + ')',
            targetId: data[0]?.targetStoreId ?? '',
            targetNm: data[0]?.targetStoreNm ?? '',
            receiver: data.filter((item) => item.auth === 'S').map((item) => item.repUserEmail),
            reference: data.filter((item) => item.auth === 'N').map((item) => item.repUserEmail),
            saleBase: null,
            contents: '',
          }
          setSubmitData((prev) => ({
            ...prev,
            ...updateData,
          }))
        }
      })
      /** Partner 제출 폼 데이터 삽입 - (T01은 제출 불가) */
    } else {
      setSubmitData((prev) => ({
        ...prev,
        ...baseUpdate,
      }))
    }
  }, [session, surveyDetail])

  const FORM_FIELDS: FormField[] = [
    { id: 'sender', name: '発送者', required: true },
    { id: 'saleBase', name: '提出地点選択', required: session?.role === 'Admin' },
    { id: 'targetNm', name: '提出販売店', required: session?.role !== 'Admin' && session?.role !== 'T01' },
    { id: 'receiver', name: '受信者', required: true },
    { id: 'reference', name: '参考', required: false },
    { id: 'title', name: 'タイトル', required: true },
    { id: 'contents', name: '内容', required: false },
  ]

  const handleInputChange = (field: keyof SubmitFormData, value: string) => {
    setSubmitData((prev) => ({ ...prev, [field]: value }))
  }

  /** 필수값 검증 */
  const validateData = (data: SubmitFormData): boolean => {
    const requiredFields = FORM_FIELDS.filter((field) => field.required)

    for (const field of requiredFields) {
      if (data[field.id] === '' || data[field.id] === null || data[field.id]?.length === 0) {
        showErrorAlert(WARNING_MESSAGE.REQUIRED_FIELD_IS_EMPTY, field.name)
        const element = document.getElementById(field.id)
        if (element) {
          element.focus()
        }
        return false
      }
    }
    return true
  }

  /** 제출 처리 - 데이터 검증 이후 메일 전송 완료되면 데이터 저장 */
  const handleSubmit = () => {
    if (validateData(submitData)) {
      showConfirm(CONFIRM_MESSAGE.SUBMIT_CONFIRM, () => {
        setIsShow(true)
        sendEmail({
          from: submitData.sender,
          to: submitData.receiver,
          cc: submitData.reference ?? '',
          subject: submitData.title,
          content: generateEmailContent(),
          surveyPdf: {
            id: surveyDetail?.id ?? 0,
            filename: surveyDetail?.srlNo ?? 'hanasys_survey',
          },
        })
          .then(() => {
            submitSurvey({ targetId: submitData.targetId, targetNm: submitData.targetNm })
            if (!isSubmittingSurvey) {
              showSuccessAlert(SUCCESS_MESSAGE.SUBMIT_SUCCESS)
              popupController.setSurveySaleSubmitPopup(false)
            }
          })
          .catch((error) => {
            console.error('❌ SEND EMAIL ERROR : ', error)
            showErrorAlert(ERROR_MESSAGE.EMAIL_SEND_ERROR)
          })
          .finally(() => {
            setIsShow(false)
            popupController.setSurveySaleSubmitPopup(false)
          })
      })
    }
  }

  const generateEmailContent = () => `
  <div>
    <p style="font-size: 13px; font-weight: 400; color: #2e3a59; margin-bottom: 15px;">
      HANASYS現地調査アプリを使用した現地調査結果が送信されました。
    </p>
    <p style="font-size: 13px; font-weight: 400; color: #2e3a59; margin-bottom: 3px;">
      -担当者名： <span style="color: #417DDC;">${surveyDetail?.representative}</span>
    </p>
    <p style="font-size: 13px; font-weight: 400; color: #2e3a59; margin-bottom: 3px;">
      -販売店名：
      <span style="color: #417DDC;">
        ${surveyDetail?.store ? `${surveyDetail?.store} (${surveyDetail?.storeId ?? ' - '})` : ' - '}
      </span>
    </p>
    <p style="font-size: 13px; font-weight: 400; color: #2e3a59; margin-bottom: 15px;">
      -施工店名：
      <span style="color: #417DDC;">${surveyDetail?.constructionPoint ?? ' - '}</span>
    </p>
  </div>
  `

  const handleClose = () => {
    popupController.setSurveySaleSubmitPopup(false)
  }

  /** 권한 별 폼 필드 렌더링 */
  const renderFormField = (field: FormField) => {
    const isReadOnly = false

    if (field.id === 'saleBase' && session?.role !== 'Admin') {
      return null
    }
    if (field.id === 'targetNm' && session?.role === 'Admin') {
      return null
    }

    return (
      <div className="data-input-form-bx" key={field.id}>
        <div className="data-input-form-tit">
          {field.name} {field.required && <i className="import">*</i>}
        </div>
        <div className="data-input">
          {field.id === 'contents' ? (
            <div className="submit-content" id={field.id}>
              <div dangerouslySetInnerHTML={{ __html: generateEmailContent() }} />
            </div>
          ) : (
            <>
              {field.id === 'saleBase' && session?.role === 'Admin' ? (
                <select
                  className="select-form"
                  id={field.id}
                  value={submitData[field.id] ?? ''}
                  onChange={(e) => {
                    const selectedOffice = commCodeList.find((item) => item.code === e.target.value)
                    if (selectedOffice) {
                      //@ts-ignore
                      const receiver = selectedOffice.REF_CHR1.split(';')
                      setSubmitData((prev) => ({
                        ...prev,
                        receiver: receiver,
                        saleBase: e.target.value,
                        targetNm: selectedOffice.codeJp ?? '',
                      }))
                    }
                  }}
                >
                  <option value="">選択してください</option>
                  {commCodeList.map((item) => (
                    <option key={item.code} value={item.code}>
                      {item.codeJp}
                    </option>
                  ))}
                </select>
              ) : (
                <input
                  className="input-frame"
                  type="text"
                  id={field.id}
                  value={submitData[field.id] ?? ''}
                  onChange={(e) => handleInputChange(field.id, e.target.value)}
                  readOnly={isReadOnly}
                />
              )}
            </>
          )}
        </div>
      </div>
    )
  }

  return (
    <div className="modal-popup">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <div className="modal-header-inner">
              <div className="modal-name-wrap">
                <div className="modal-img">
                  <Image src="/assets/images/layout/modal_header_icon04.svg" width={19} height={22} alt="" />
                </div>
                <div className="modal-name">調査物件の提出</div>
              </div>
              <button className="modal-close" onClick={handleClose}></button>
            </div>
          </div>
          <div className="modal-body">
            <div className="data-form-wrap">{FORM_FIELDS.map(renderFormField)}</div>
            <div className="btn-flex-wrap">
              <div className="btn-bx">
                <button className="btn-frame n-blue icon" onClick={handleClose}>
                  閉じる<i className="btn-arr"></i>
                </button>
              </div>
              <div className="btn-bx">
                <button className="btn-frame red icon" onClick={handleSubmit} disabled={isSubmittingSurvey}>
                  転送<i className="btn-arr"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}