'use client'

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

import { useEffect, useState, useRef, useContext } from 'react'
import { useRecoilState } from 'recoil'
import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
import { pwrGnrSimTypeState } from '@/store/simulatorAtom'

import { useAxios } from '@/hooks/useAxios'
import { useMessage } from '@/hooks/useMessage'

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

import { QcastContext } from '@/app/QcastProvider'
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
export default function Simulator() {
  // global 로딩바
  const { setIsGlobalLoading } = useContext(QcastContext)

  const { floorPlanState } = useContext(FloorPlanContext)
  const { objectNo, pid } = floorPlanState
  const { selectedPlan } = usePlan()

  const chartRef = useRef(null)

  // 캔버스 메뉴 넘버 셋팅
  const { closeAll } = usePopup()

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

  // 차트 관련
  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).map((item) => {
          const num = Number(item.replaceAll(',', ''))
          return isNaN(num) ? 0 : num
        }),

        backgroundColor: (context) => {
          const chart = context.chart
          const { ctx, chartArea } = chart

          if (!chartArea) {
            // This case happens on initial chart load
            return null
          }

          const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top)
          gradient.addColorStop(0, '#4FC3F7')  // Light blue at bottom
          gradient.addColorStop(0.3, '#2FA8E0') // Original blue
          gradient.addColorStop(0.7, '#1976D2') // Medium blue
          gradient.addColorStop(1, '#0D47A1')   // Dark blue at top


          return gradient
        },
        borderColor: '#2FA8E0' ,
        borderWidth: 1,
      },
    ],
  }

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

  useEffect(() => {
    setSelectedMenu('simulation')
    /* 초기화 작업 */
    setChartData([])
    setObjectDetail({})
    setModuleInfoList([])
    setPcsInfoList([])
    setHatsudenryouAll([])
    setHatsudenryouAllSnow([])
    setHatsudenryouPeakcutAll([])
    setHatsudenryouPeakcutAllSnow([])

    if (objectNo && pid && selectedPlan) {
      fetchObjectDetail(objectNo, selectedPlan?.planNo??pid)
      fetchSimulatorNotice()
      setPwrGnrSimType('D')
      setPwrRecoil({ ...pwrRecoil, type: 'D' })
      closeAll()
    }
  }, [objectNo, pid, selectedPlan])

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

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

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

  // 타입별 list 조회
  const [hatsudenryouAll, setHatsudenryouAll] = useState([])
  const [hatsudenryouAllSnow, setHatsudenryouAllSnow] = useState([])
  const [hatsudenryouPeakcutAll, setHatsudenryouPeakcutAll] = useState([])
  const [hatsudenryouPeakcutAllSnow, setHatsudenryouPeakcutAllSnow] = useState([])

  const fetchObjectDetail = async (objectNo, currentPid) => {
    setIsGlobalLoading(true)

    const apiUrl = `/api/pwrGnrSimulation/calculations?objectNo=${objectNo}&planNo=${currentPid}`

    const resultData = await get({ url: apiUrl })

    if (resultData) {
      setObjectDetail(resultData)
      if (resultData.hatsudenryouAll) {
        setHatsudenryouAll(resultData.hatsudenryouAll)
      }
      if (resultData.hatsudenryouAllSnow) {
        setHatsudenryouAllSnow(resultData.hatsudenryouAllSnow)
      }
      if (resultData.hatsudenryouPeakcutAll) {
        setHatsudenryouPeakcutAll(resultData.hatsudenryouPeakcutAll)
      }
      if (resultData.hatsudenryouPeakcutAllSnow) {
        setHatsudenryouPeakcutAllSnow(resultData.hatsudenryouPeakcutAllSnow)
        setChartData(resultData.hatsudenryouPeakcutAllSnow)
      }
      if (resultData.pcsList) {
        setPcsInfoList(resultData.pcsList)
      }
      if (resultData.roofModuleList) {
        setModuleInfoList(resultData.roofModuleList)
      }
    }
    setIsGlobalLoading(false)
  }

  // 시뮬레이션 안내사항 조회
  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'))
      }
    })
  }

  // 차트 데이터 변경 시, list type 셋팅
  const [pwrGnrSimType, setPwrGnrSimType] = useState('D')
  const [pwrRecoil, setPwrRecoil] = useRecoilState(pwrGnrSimTypeState)

  const handleChartChangeData = (type) => {
    setPwrRecoil({ ...pwrRecoil, type: type })
    switch (type) {
      case 'A':
        setChartData(hatsudenryouAll)
        break
      case 'B':
        setChartData(hatsudenryouPeakcutAll)
        break
      case 'C':
        setChartData(hatsudenryouAllSnow)
        break
      case 'D':
        setChartData(hatsudenryouPeakcutAllSnow)
        break
    }
  }

  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}
                  {`${objectDetail.planNo ? `(Plan No: ${objectDetail.planNo})` : ''}`}
                </div>
              </div>
              {/* 작성일 */}
              <div className="estimate-box">
                <div className="estimate-tit">{getMessage('simulator.title.sub2')}</div>
                <div className="estimate-name">
                  {objectDetail.drawingEstimateCreateDate ? `${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">{objectDetail.capacity ? `${convertNumberToPriceDecimal(objectDetail.capacity)} kW` : ''}</div>
              </div>
              {/* 연간예측발전량 */}
              <div className="estimate-box">
                <div className="estimate-tit">{getMessage('simulator.title.sub4')}</div>
                <div className="estimate-name">{chartData[chartData.length - 1]}</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 ? `${objectDetail.snowfall}cm` : ''} </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">
                  {/* chart */}
                  <div className="select-wrap">
                    <select
                      style={{ width: '30%' }}
                      className="select-light"
                      value={pwrGnrSimType}
                      onChange={(e) => {
                        handleChartChangeData(e.target.value)
                        setPwrGnrSimType(e.target.value)
                      }}
                    >
                      {/*<option value={`A`}>積雪考慮なし(ピークカットなし発電量)</option>*/}
                      <option value={`B`}>積雪考慮なし(ピークカットあり発電量)</option>
                      {/*<option value={`C`}>積雪考慮あり(ピークカットなし発電量)</option>*/}
                      <option value={`D`}>積雪考慮あり(ピークカットあり発電量)</option>
                    </select>
                  </div>
                  <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={uuidv4()}>{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.slopeAngle)}
                              {moduleInfo.classType == 0 ? '寸' : 'º'}
                            </td>
                            {/* 방위각(도) */}
                            <td>{convertNumberToPriceDecimal(moduleInfo.azimuth)}</td>
                            {/* 태양전지모듈 */}
                            <td>
                              <div className="overflow-lab">{moduleInfo.itemNo}</div>
                            </td>
                            {/* 매수 */}
                            <td>{convertNumberToPriceDecimal(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>{convertNumberToPriceDecimal(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>
  )
}