import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import TopBar from '../components/layout/TopBar';
import PageContainer from '../components/layout/PageContainer';
import VitalsSection from '../components/dashboard/VitalsSection';
import ShipStatsSection from '../components/dashboard/ShipStatsSection';
import WeaponsSection from '../components/dashboard/WeaponsSection';
import NotesSection from '../components/dashboard/NotesSection';
import { useShipStore } from '../store/use-ship-store';

export default function ShipDashboardPage() {
  const { id } = useParams<{ id: string }>();
  const { ship, weapons, loading, joinShip, leaveShip, updateShip, createWeapon, updateWeapon, deleteWeapon } = useShipStore();

  useEffect(() => {
    if (id) joinShip(id);
    return () => leaveShip();
  }, [id, joinShip, leaveShip]);

  if (loading || !ship) {
    return (
      <>
        <TopBar title="Loading..." />
        <PageContainer>
          <p className="loading-text">Loading ship data...</p>
        </PageContainer>
      </>
    );
  }

  return (
    <>
      <TopBar title={ship.name} />
      <PageContainer>
        <VitalsSection ship={ship} onUpdate={updateShip} />
        <ShipStatsSection ship={ship} onUpdate={updateShip} />
        <WeaponsSection
          weapons={weapons}
          onCreateWeapon={createWeapon}
          onUpdateWeapon={updateWeapon}
          onDeleteWeapon={deleteWeapon}
        />
        <NotesSection notes={ship.notes} onUpdate={updateShip} />
      </PageContainer>
    </>
  );
}