'use client'

import 'chart.js/auto'
import { Bar } from 'react-chartjs-2'
import dayjs from 'dayjs'

import { useEffect, useState, useRef } from 'react'
import { useRecoilValue } from 'recoil'
import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'

import { useAxios } from '@/hooks/useAxios'
import { useMessage } from '@/hooks/useMessage'
import { usePlan } from '@/hooks/usePlan'
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'

import { convertNumberToPriceDecimal } from '@/util/common-utils'

export default function Simulator() {
  const { plans } = usePlan()
  const plan = plans.find((plan) => plan.isCurrent === true)

  const chartRef = useRef(null)

  // recoil 물건번호
  const objectRecoil = useRecoilValue(floorPlanObjectState)
  const [objectNo, setObjectNo] = useState('')

  useEffect(() => {
    setObjectNo(objectRecoil.floorPlanObjectNo)
  }, [objectRecoil])

  // 캔버스 메뉴 넘버 셋팅
  const { setMenuNumber } = useCanvasMenu()

  useEffect(() => {
    setMenuNumber(6)
  }, [])

  const { get } = useAxios()
  const { getMessage } = useMessage()

  // 차트 관련
  const [chartData, setChartData] = useState([])
  const data = {
    labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    datasets: [
      {
        label: 'kWh',
        data: chartData.slice(0, 12),

        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(0, 99, 132, 0.2)',
          'rgba(0, 162, 235, 0.2)',
          'rgba(0, 206, 86, 0.2)',
          'rgba(0, 192, 192, 0.2)',
          'rgba(0, 102, 255, 0.2)',
          'rgba(0, 159, 64, 0.2)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(0, 99, 132, 0.2)',
          'rgba(0, 162, 235, 0.2)',
          'rgba(0, 206, 86, 0.2)',
          'rgba(0, 192, 192, 0.2)',
          'rgba(0, 102, 255, 0.2)',
          'rgba(0, 159, 64, 0.2)',
        ],
        borderWidth: 1,
      },
    ],
  }

  const options = {
    plugins: {
      legend: {
        position: 'top',
      },
    },
    scales: {
      x: {
        grid: {
          display: false,
        },
      },
      y: {
        beginAtZero: true,
        grid: {
          display: true,
        },
      },
    },
  }

  useEffect(() => {
    if (objectNo) {
      fetchObjectDetail(objectNo)
    }
    fetchSimulatorNotice()
  }, [objectNo, plan])

  // 물건 상세 정보 조회
  const [objectDetail, setObjectDetail] = useState({})

  // 모듈배치정보 조회
  const [moduleInfoList, setModuleInfoList] = useState([])

  // 파워컨디셔너 조회
  const [pcsInfoList, setPcsInfoList] = useState([])

  const fetchObjectDetail = async (objectNo) => {
    const apiUrl = `/api/pwrGnrSimulation/calculations?objectNo=${objectNo}&planNo=${plan?.id}`
    const resultData = await get({ url: apiUrl })
    if (resultData) {
      setObjectDetail(resultData)
      if (resultData.frcPwrGnrList) {
        setChartData(resultData.frcPwrGnrList)
      }
      if (resultData.pcsList) {
        setPcsInfoList(resultData.pcsList)
      }
      if (resultData.roofModuleList) {
        setModuleInfoList(resultData.roofModuleList)
      }
    }
  }

  // 시뮬레이션 안내사항 조회
  const [content, setContent] = useState('')

  const fetchSimulatorNotice = async () => {
    get({ url: '/api/pwrGnrSimulation/guideInfo' }).then((res) => {
      if (res.data) {
        setContent(res.data.replaceAll('\n', '<br/>'))
      } else {
        setContent(getMessage('common.message.no.data'))
      }
    })
  }

  return (
    <div className="sub-content estimate">
      <div className="sub-content-inner">
        <div className="sub-content-box">
          <div className="sub-table-box">
            <div className="estimate-list-wrap">
              {/* 물건번호 */}
              <div className="estimate-box">
                <div className="estimate-tit">{getMessage('simulator.title.sub1')}</div>
                <div className="estimate-name">
                  {objectDetail.objectNo} (Plan No: {objectDetail.planNo})
                </div>
              </div>
              {/* 작성일 */}
              <div className="estimate-box">
                <div className="estimate-tit">{getMessage('simulator.title.sub2')}</div>
                <div className="estimate-name">{`${dayjs(objectDetail.drawingEstimateCreateDate).format('YYYY.MM.DD')}`}</div>
              </div>
              {/* 시스템용량 */}
              <div className="estimate-box">
                <div className="estimate-tit">{getMessage('simulator.title.sub3')}</div>
                <div className="estimate-name">{convertNumberToPriceDecimal(objectDetail.capacity)}kW</div>
              </div>
              {/* 연간예측발전량 */}
              <div className="estimate-box">
                <div className="estimate-tit">{getMessage('simulator.title.sub4')}</div>
                <div className="estimate-name">{convertNumberToPriceDecimal(objectDetail.anlFrcsGnrt)}</div>
              </div>
            </div>
            <div className="estimate-list-wrap">
              {/* 도도부현 */}
              <div className="estimate-box">
                <div className="estimate-tit">{getMessage('simulator.title.sub5')}</div>
                <div className="estimate-name">{objectDetail.prefName}</div>
              </div>
              {/* 일사량 관측지점 */}
              <div className="estimate-box">
                <div className="estimate-tit">{getMessage('simulator.title.sub6')}</div>
                <div className="estimate-name">{objectDetail.areaName}</div>
              </div>
              {/* 적설조건 */}
              <div className="estimate-box">
                <div className="estimate-tit">{getMessage('simulator.title.sub7')}</div>
                <div className="estimate-name">{objectDetail.snowfall}</div>
              </div>
              {/* 풍속조건 */}
              <div className="estimate-box">
                <div className="estimate-tit">{getMessage('simulator.title.sub8')}</div>
                <div className="estimate-name">{objectDetail.standardWindSpeedId}</div>
              </div>
            </div>
          </div>
        </div>
        <div className="sub-content-box">
          <div className="chart-wrap">
            <div className="chart-inner">
              <div className="sub-table-box">
                <div className="chart-box">
                  <Bar ref={chartRef} data={data} options={options} />
                </div>
                <div className="table-box-title-wrap">
                  <div className="title-wrap">
                    <h3>{getMessage('simulator.table.sub9')} </h3>
                  </div>
                </div>
                {/* 예측발전량 */}
                <div className="chart-month-table">
                  <table>
                    <thead>
                      <tr>
                        <th>1月</th>
                        <th>2月</th>
                        <th>3月</th>
                        <th>4月</th>
                        <th>5月</th>
                        <th>6月</th>
                        <th>7月</th>
                        <th>8月</th>
                        <th>9月</th>
                        <th>10月</th>
                        <th>11月</th>
                        <th>12月</th>
                        <th>{getMessage('simulator.table.sub6')}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {chartData.length > 0 ? (
                        <tr>
                          {chartData.map((data) => (
                            <td key={data}>{convertNumberToPriceDecimal(data)}</td>
                          ))}
                        </tr>
                      ) : (
                        <tr>
                          <td colSpan={13}>{getMessage('common.message.no.data')}</td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div className="chart-table-wrap">
              <div className="sub-table-box">
                <div className="module-table ">
                  <table className="small">
                    <thead>
                      <tr>
                        <th>{getMessage('simulator.table.sub1')}</th>
                        <th>{getMessage('simulator.table.sub2')}</th>
                        <th>{getMessage('simulator.table.sub3')}</th>
                        <th>{getMessage('simulator.table.sub4')}</th>
                        <th>{getMessage('simulator.table.sub5')}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {moduleInfoList.length > 0 ? (
                        moduleInfoList.map((moduleInfo) => {
                          return (
                            <>
                              <tr key={moduleInfo.itemId}>
                                {/* 지붕면 */}
                                <td>{moduleInfo.roofSurface}</td>
                                {/* 경사각 */}
                                <td>{convertNumberToPriceDecimal(moduleInfo.slope)}寸</td>
                                {/* 방위각(도) */}
                                <td>{convertNumberToPriceDecimal(moduleInfo.angle)}</td>
                                {/* 태양전지모듈 */}
                                <td>
                                  <div className="overflow-lab">{moduleInfo.itemNo}</div>
                                </td>
                                {/* 매수 */}
                                <td>{moduleInfo.amount}</td>
                              </tr>
                            </>
                          )
                        })
                      ) : (
                        <tr>
                          <td colSpan={5}>{getMessage('common.message.no.data')}</td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                  {moduleInfoList.length > 0 && (
                    <div className="module-total">
                      <div className="total-title">{getMessage('simulator.table.sub6')}</div>
                      <div className="total-num">
                        {moduleInfoList.reduce((acc, moduleInfo) => convertNumberToPriceDecimal(Number(acc) + Number(moduleInfo.amount)), 0)}
                      </div>
                    </div>
                  )}
                </div>
              </div>
              <div className="sub-table-box">
                <div className="module-table ">
                  <table className="big">
                    <thead>
                      <tr>
                        <th>{getMessage('simulator.table.sub7')}</th>
                        <th>{getMessage('simulator.table.sub8')}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {pcsInfoList.length > 0 ? (
                        pcsInfoList.map((pcsInfo) => {
                          return (
                            <>
                              <tr key={pcsInfo.itemId}>
                                {/* 파워컨디셔너 */}
                                <td className="al-l">
                                  <div className="overflow-lab">{pcsInfo.itemNo}</div>
                                </td>
                                {/* 대 */}
                                <td>{pcsInfo.amount}</td>
                              </tr>
                            </>
                          )
                        })
                      ) : (
                        <tr>
                          <td colSpan={2}>{getMessage('common.message.no.data')}</td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="sub-content-box">
          <div className="sub-table-box">
            <div className="simulation-guide-wrap">
              <div className="simulation-tit-wrap">
                <span>
                  {getMessage('simulator.notice.sub1')}
                  <br />
                  {getMessage('simulator.notice.sub2')}
                </span>
              </div>
              {/* 시뮬레이션 안내사항 */}
              <div
                className="simulation-guide-box"
                dangerouslySetInnerHTML={{
                  __html: content,
                }}
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}