gridpilot.gg/apps/website/templates/TeamDetailTemplate.tsx

'use client';

import React from 'react';
import { useRouter } from 'next/navigation';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Button } from '@/ui/Button';
import { Panel } from '@/ui/Panel';
import { Breadcrumbs } from '@/ui/Breadcrumbs';
import { TeamDetailsHeader } from '@/components/teams/TeamDetailsHeader';
import { TeamMembersTable } from '@/components/teams/TeamMembersTable';
import { TeamStandingsPanel } from '@/components/teams/TeamStandingsPanel';
import { TeamAdmin } from '@/components/teams/TeamAdmin';
import type { TeamDetailViewData } from '@/lib/view-data/TeamDetailViewData';

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

export interface TeamDetailTemplateProps {
  viewData: TeamDetailViewData;
  activeTab: Tab;
  loading: boolean;
  onTabChange: (tab: Tab) => void;
  onUpdate: () => void;
  onRemoveMember: (driverId: string) => void;
  onGoBack: () => void;
}

export function TeamDetailTemplate({
  viewData,
  activeTab,
  loading,
  onTabChange,
  onUpdate,
  onRemoveMember,
  onGoBack,
}: TeamDetailTemplateProps) {
  const team = viewData.team;

  if (loading) {
    return (
      <Box bg="var(--ui-color-bg-base)" minHeight="100vh" display="flex" center>
        <Stack align="center" gap="md">
          <Box width={12} height={12} border="2px solid var(--ui-color-border-muted)" borderTop="2px solid var(--ui-color-intent-primary)" rounded="full" animate="spin" />
          <Text variant="low" size="xs" uppercase mono>Synchronizing Telemetry...</Text>
        </Stack>
      </Box>
    );
  }

  if (!team) {
    return (
      <Box bg="var(--ui-color-bg-base)" minHeight="100vh">
        <Box paddingY={24}>
          <Container size="md">
            <Panel variant="dark" padding="lg">
              <Stack align="center" gap="lg">
                <Heading level={1}>404: Team Disconnected</Heading>
                <Text variant="low" block mono>
                  The requested team entity is no longer broadcasting.
                </Text>
                <Button variant="primary" onClick={onGoBack}>
                  Return to Base
                </Button>
              </Stack>
            </Panel>
          </Container>
        </Box>
      </Box>
    );
  }

  return (
    <Box bg="var(--ui-color-bg-base)" minHeight="100vh" paddingY={8}>
      <Container size="xl">
        <Stack gap="lg">
          <Breadcrumbs
            items={[
              { label: 'Home', href: '/' },
              { label: 'Teams', href: '/teams' },
              { label: team.name }
            ]}
          />

          <TeamDetailsHeader
            teamId={team.id}
            name={team.name}
            tag={team.tag}
            description={team.description}
            memberCount={viewData.memberships.length}
            foundedDateLabel={team.foundedDateLabel}
            isAdmin={viewData.isAdmin}
            onAdminClick={() => onTabChange('admin')}
          />

          {/* Tabs */}
          <Box borderBottom="1px solid var(--ui-color-border-muted)">
            <Stack direction="row" gap="lg">
              {viewData.tabs.map((tab) => (
                tab.visible && (
                  <Box
                    key={tab.id}
                    onClick={() => onTabChange(tab.id as Tab)}
                    paddingBottom={4}
                    cursor="pointer"
                    position="relative"
                  >
                    <Text 
                      weight="bold" 
                      size="xs"
                      uppercase
                      variant={activeTab === tab.id ? 'primary' : 'low'}
                    >
                      {tab.label}
                    </Text>
                    {activeTab === tab.id && (
                      <Box 
                        position="absolute" 
                        bottom="-1px" 
                        left={0} 
                        right={0} 
                        height="2px" 
                        bg="var(--ui-color-intent-primary)" 
                      />
                    )}
                  </Box>
                )
              ))}
            </Stack>
          </Box>

          <Box>
            {activeTab === 'overview' && (
              <Grid cols={3} gap="lg">
                <Box gridCols={{ lg: 2 }}>
                  <Stack gap="lg">
                    <Panel variant="default" padding="md">
                      <Text size="xs" weight="bold" variant="low" uppercase>Mission Statement</Text>
                      <Box marginTop={4}>
                        <Text variant="med" leading="relaxed" size="sm" block>
                          {team.description || 'No description provided.'}
                        </Text>
                      </Box>
                    </Panel>

                    <Box>
                      <Box marginBottom={4}>
                        <Text size="xs" weight="bold" variant="low" uppercase block>Recent Operations</Text>
                      </Box>
                      <Panel variant="muted" padding="lg">
                        <Box textAlign="center">
                          <Text variant="low" mono size="xs">NO RECENT TELEMETRY DATA</Text>
                        </Box>
                      </Panel>
                    </Box>
                  </Stack>
                </Box>

                <Box>
                  <Stack gap="lg">
                    <Panel variant="default" padding="md">
                      <Box marginBottom={4}>
                        <Text size="xs" weight="bold" variant="low" uppercase block>Performance Metrics</Text>
                      </Box>
                      <Stack gap="md">
                        <Box display="flex" justifyContent="between" alignItems="center">
                          <Text size="xs" variant="low" uppercase>Avg Rating</Text>
                          <Text weight="bold" mono variant="primary">1450</Text>
                        </Box>
                        <Box display="flex" justifyContent="between" alignItems="center">
                          <Text size="xs" variant="low" uppercase>Win Rate</Text>
                          <Text weight="bold" mono variant="telemetry">12.5%</Text>
                        </Box>
                        <Box display="flex" justifyContent="between" alignItems="center">
                          <Text size="xs" variant="low" uppercase>Total Podiums</Text>
                          <Text weight="bold" mono variant="warning">42</Text>
                        </Box>
                      </Stack>
                    </Panel>
                  </Stack>
                </Box>
              </Grid>
            )}

            {activeTab === 'roster' && (
              <Stack gap="md">
                <Box display="flex" alignItems="center" justifyContent="between">
                  <Text size="xs" weight="bold" variant="low" uppercase>Active Personnel</Text>
                  <Text size="xs" variant="low" mono>{viewData.memberships.length} UNITS ACTIVE</Text>
                </Box>
                <TeamMembersTable 
                  members={viewData.memberships} 
                  isAdmin={viewData.isAdmin}
                  onRemoveMember={onRemoveMember}
                />
              </Stack>
            )}

            {activeTab === 'standings' && (
              <TeamStandingsPanel standings={[]} />
            )}

            {activeTab === 'admin' && viewData.isAdmin && (
              <TeamAdmin team={team} onUpdate={onUpdate} />
            )}
          </Box>
        </Stack>
      </Container>
    </Box>
  );
}