/* 'use client'

import { Button, Typography } from '@mui/material'
import { useGetAbout, useGetCompanyInfo, useGetCoreCompetencies, useUpdateSection } from '@/hooks'
import PageMetaPanel from '@/views/shared/PageMetaPanel'
import AboutSectionPanel from '@/views/about/AboutSectionPanel'
import CoreCompetencyTitles from '@/views/about/CoreCompetencyTitles'

export default function AboutPageView() {
  const { data, refetch, isFetching } = useGetAbout()
  const page = data?.data?.page
  const sections = data?.data?.sections || []

  // Company info (purpose, vision, mission, etc.)
  const { data: companyInfoRes, refetch: refetchCompanyInfo, isFetching: isFetchingCompanyInfo } = useGetCompanyInfo()
  const companyInfo = companyInfoRes?.data ?? []

  // Extract the two items we care about
  const visionItem = companyInfo.find(ci => ci?.key === 'vision')
  const missionItem = companyInfo.find(ci => ci?.key === 'mission')

  // (Optional) Page meta update like Home page
  const { mutateAsync: updateMeta } = useUpdateSection(page?.id || '')

  const { data: coreCompetenciesData, refetch: refetchCoreCompetenciesData } = useGetCoreCompetencies()

  return (
    <div className='p-6 space-y-6'>
      <div className='flex items-center justify-between'>
        <Typography variant='h5'>About Page</Typography>
        <div className='flex items-center gap-2'>
          <Button onClick={() => refetchCompanyInfo()} disabled={isFetchingCompanyInfo} variant='outlined'>
            {isFetchingCompanyInfo ? 'Refreshing Company Info…' : 'Refresh Company Info'}
          </Button>
          <Button onClick={() => refetch()} disabled={isFetching} variant='outlined'>
            {isFetching ? 'Refreshing…' : 'Refresh'}
          </Button>
        </div>
      </div>

      {page && (
        <PageMetaPanel
          page={page}
          onSave={async payload => {
            await updateMeta(payload)
            await refetch()
          }}
        />
      )}

      <div className='grid grid-cols-1 gap-6'>
        {sections.map(section => (
          <AboutSectionPanel
            key={section.id}
            section={section}
            onUpdated={() => {
              // refresh the section data
              refetch()
            }}
            // Pass vision/mission info ONLY to the purpose_vision_mission section
            visionMission={
              section?.section_key === 'purpose_vision_mission' && visionItem && missionItem
                ? {
                    vision: { id: visionItem?.id, value_en: visionItem?.value_en },
                    mission: { id: missionItem?.id, value_en: missionItem?.value_en }
                  }
                : undefined
            }
            onCompanyInfoUpdated={async () => {
              await refetchCompanyInfo()
            }}
          />
        ))}
      </div>

      <CoreCompetencyTitles
        items={coreCompetenciesData?.data!}
        onUpdated={async () => {
          await refetchCompanyInfo()
        }}
      />
    </div>
  )
}
 */
