'use client'

import { surveySalesApi, SurveySalesBasicInfo, SurveySalesDetailInfo } from '@/api/surveySales'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useState } from 'react'

export default function SurveySales() {
  const [isSearch, setIsSearch] = useState(false)

  const queryClient = useQueryClient()

  const {
    mutate: createSurveySales,
    isPending,
    error,
  } = useMutation({
    mutationFn: surveySalesApi.create,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['survey-sales', 'list'] })
    },
  })

  const handleSurveySales = () => {
    const data: SurveySalesBasicInfo = {
      representative: 'keyy1315',
      store: 'HWJ(T01)',
      construction_point: 'HWJ(T01)',
      investigation_date: '2025-04-28',
      building_name: 'Hanwha Japan Building',
      customer_name: 'Hong Gil Dong',
      post_code: '1050013',
      address: 'Tokyo, Japan',
      address_detail: '1-1-1',
      submission_status: false,
    }

    createSurveySales(data)
  }

  const { data, error: errorList } = useQuery({
    queryKey: ['survey-sales', 'list'],
    queryFn: surveySalesApi.getList,
    enabled: isSearch,
  })

  const { mutate: updateSurveySales } = useMutation({
    mutationFn: surveySalesApi.update,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['survey-sales', 'list'] })
    },
  })

  const handleUpdateSurveySales = () => {
    const detailData: SurveySalesDetailInfo = {
      contract_capacity: '1100',
      retail_company: 'test company',
      supplementary_facilities: 1,
      supplementary_facilities_etc: '',
      installation_system: 3,
      installation_system_etc: '',
      construction_year: 4,
      construction_year_etc: '',
      roof_material: 1,
      roof_material_etc: '',
      roof_shape: 2,
      roof_shape_etc: '',
      roof_slope: '4.5',
      house_structure: 1,
      house_structure_etc: '',
      rafter_material: 5,
      rafter_material_etc: 'test message',
      rafter_size: 3,
      rafter_size_etc: '',
      rafter_pitch: 2,
      rafter_pitch_etc: '',
      rafter_direction: 3,
      open_field_plate_kind: 3,
      open_field_plate_kind_etc: '',
      open_field_plate_thickness: '',
      leak_trace: false,
      waterproof_material: 2,
      waterproof_material_etc: '',
      insulation_presence: 3,
      insulation_presence_etc: '',
      structure_order: 2,
      structure_order_etc: '',
      installation_availability: 1,
      installation_availability_etc: '',
      memo: 'test memo',
    }

    if (!data) return

    const surveySalesData: SurveySalesBasicInfo = {
      ...data[0],
      detail_info: { ...detailData },
    }

    updateSurveySales(surveySalesData)
  }

  return (
    <>
      <div className="flex items-center justify-center">
        <div className="flex gap-2">
          <button className="bg-blue-500 text-white px-4 py-2 rounded-md" onClick={handleSurveySales}>
            신규 등록
          </button>
          <button className="bg-blue-500 text-white px-4 py-2 rounded-md" onClick={() => setIsSearch(true)}>
            조회
          </button>
          <button className="bg-blue-500 text-white px-4 py-2 rounded-md" onClick={handleUpdateSurveySales}>
            수정 (detail info add)
          </button>
        </div>
      </div>
      {/* <div className="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 m-4" role="alert">
        <p className="font-bold">Be Warned</p>
        <p>기본 데이터 세팅 되어있습니다.</p>
      </div> */}
      <div>
        {errorList && <div>Error: {errorList.message}</div>}
        {data && data.map((item) => <div key={item.id}>{JSON.stringify(item)}</div>)}
      </div>
    </>
  )
}
