hensei-web/app/new/NewPartyClient.tsx

'use client'

import React, { useEffect, useState } from 'react'
import { useTranslation } from 'next-i18next'
import { useRouter } from 'next/navigation'

// Components
import Party from '~/components/party/Party'
import ErrorSection from '~/components/ErrorSection'

// Utils
import { appState, initialAppState } from '~/utils/appState'
import { accountState } from '~/utils/accountState'
import clonedeep from 'lodash.clonedeep'
import { GridType } from '~/utils/enums'

interface Props {
  raidGroups: any[]; // Replace with proper RaidGroup type
  error?: boolean;
}

const NewPartyClient: React.FC<Props> = ({ 
  raidGroups,
  error = false
}) => {
  const { t } = useTranslation('common')
  const router = useRouter()
  
  // State for tab management
  const [selectedTab, setSelectedTab] = useState<GridType>(GridType.Weapon)
  
  // Initialize app state for a new party
  useEffect(() => {
    // Reset app state for new party
    const resetState = clonedeep(initialAppState)
    Object.keys(resetState).forEach((key) => {
      appState[key] = resetState[key]
    })
    
    // Initialize raid groups
    if (raidGroups.length > 0) {
      appState.raidGroups = raidGroups
    }
  }, [raidGroups])
  
  // Handle tab change
  const handleTabChanged = (value: string) => {
    const tabType = parseInt(value) as GridType
    setSelectedTab(tabType)
  }
  
  // Navigation helper for Party component
  const pushHistory = (path: string) => {
    router.push(path)
  }
  
  
  if (error) {
    return (
      <ErrorSection 
        status={{ 
          code: 500, 
          text: 'internal_server_error' 
        }} 
      />
    )
  }
  
  return (
    <Party 
      new={true}
      selectedTab={selectedTab}
      raidGroups={raidGroups}
      handleTabChanged={handleTabChanged}
      pushHistory={pushHistory}
    />
  )
}

export default NewPartyClient