'use client';

import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
import { TeamsTemplate } from '@/templates/TeamsTemplate';
import { useRouter } from 'next/navigation';
import { useState } from 'react';

interface TeamsPageClientProps extends TeamsViewData {
  searchQuery?: string;
  showCreateForm?: boolean;
  onSearchChange?: (query: string) => void;
  onShowCreateForm?: () => void;
  onHideCreateForm?: () => void;
  onTeamClick?: (teamId: string) => void;
  onCreateSuccess?: (teamId: string) => void;
  onBrowseTeams?: () => void;
  onSkillLevelClick?: (level: string) => void;
}

export function TeamsPageClient({ teams }: TeamsPageClientProps) {
  const router = useRouter();
  
  // UI state only (no business logic)
  const [searchQuery, setSearchQuery] = useState('');
  const [showCreateForm, setShowCreateForm] = useState(false);
  
  // Event handlers
  const handleSearchChange = (query: string) => {
    setSearchQuery(query);
  };
  
  const handleShowCreateForm = () => {
    setShowCreateForm(true);
  };
  
  const handleHideCreateForm = () => {
    setShowCreateForm(false);
  };
  
  const handleTeamClick = (teamId: string) => {
    router.push(`/teams/${teamId}`);
  };
  
  const handleCreateSuccess = (teamId: string) => {
    setShowCreateForm(false);
    router.push(`/teams/${teamId}`);
  };
  
  const handleBrowseTeams = () => {
    const element = document.getElementById('teams-list');
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };
  
  const handleSkillLevelClick = (level: string) => {
    const element = document.getElementById(`level-${level}`);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };
  
  return (
    <TeamsTemplate
      teams={teams}
      searchQuery={searchQuery}
      showCreateForm={showCreateForm}
      onSearchChange={handleSearchChange}
      onShowCreateForm={handleShowCreateForm}
      onHideCreateForm={handleHideCreateForm}
      onTeamClick={handleTeamClick}
      onCreateSuccess={handleCreateSuccess}
      onBrowseTeams={handleBrowseTeams}
      onSkillLevelClick={handleSkillLevelClick}
    />
  );
}