'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import type { TeamDetailPageDto } from '@/lib/page-queries/page-queries/TeamDetailPageQuery';
import { TeamDetailPresenter } from '@/lib/presenters/TeamDetailPresenter';
import TeamDetailTemplate from '@/templates/TeamDetailTemplate';

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

interface TeamDetailPageClientProps {
  pageDto: TeamDetailPageDto;
}

export function TeamDetailPageClient({ pageDto }: TeamDetailPageClientProps) {
  const router = useRouter();
  
  // Use presenter to create ViewData
  const viewData = TeamDetailPresenter.createViewData(pageDto);
  
  // UI state
  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 handleChangeRole = (driverId: string, newRole: 'owner' | 'admin' | 'member') => {
    // This would call an API to change the role
    console.log('Change role:', driverId, newRole);
    // In a real implementation, you'd have a mutation hook here
    alert('Change role functionality would be implemented here');
  };
  
  const handleGoBack = () => {
    router.back();
  };
  
  return (
    <TeamDetailTemplate
      team={viewData.team}
      memberships={viewData.memberships}
      activeTab={activeTab}
      loading={loading}
      isAdmin={viewData.isAdmin}
      onTabChange={handleTabChange}
      onUpdate={handleUpdate}
      onRemoveMember={handleRemoveMember}
      onChangeRole={handleChangeRole}
      onGoBack={handleGoBack}
    />
  );
}