'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import type { TeamDetailViewData } from '@/lib/view-data/TeamDetailViewData';
import { TeamDetailTemplate } from '@/templates/TeamDetailTemplate';
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';

type Tab = 'overview' | 'roster' | 'standings' | 'admin';

export function TeamDetailPageClient({ viewData }: ClientWrapperProps<TeamDetailViewData>) {
  const router = useRouter();
  
  // UI state only (no business logic)
  const [activeTab, setActiveTab] = useState<Tab>('overview');
  const [loading] = useState(false);
  
  // Event handlers
  const handleTabChange = (tab: Tab) => {
    setActiveTab(tab);
  };
  
  const handleUpdate = () => {
    // Trigger a refresh by reloading the page
    router.refresh();
  };
  
  const handleRemoveMember = (driverId: string) => {
    // This would call an API to remove the member
    // For now, just log
    console.log('Remove member:', driverId);
    // In a real implementation, you'd have a mutation hook here
    alert('Remove member functionality would be implemented here');
  };
  
  const handleGoBack = () => {
    router.back();
  };
  
  return (
    <TeamDetailTemplate
      viewData={viewData}
      activeTab={activeTab}
      loading={loading}
      onTabChange={handleTabChange}
      onUpdate={handleUpdate}
      onRemoveMember={handleRemoveMember}
      onGoBack={handleGoBack}
    />
  );
}