'use client';

import { DashboardControlBar } from '@/components/dashboard/DashboardControlBar';
import { DashboardKpiRow } from '@/components/dashboard/DashboardKpiRow';
import { DashboardRail } from '@/components/dashboard/DashboardRail';
import { DashboardShell } from '@/components/dashboard/DashboardShell';
import { RecentActivityTable, type ActivityItem } from '@/components/dashboard/RecentActivityTable';
import { TelemetryPanel } from '@/components/dashboard/TelemetryPanel';
import { routes } from '@/lib/routing/RouteConfig';
import type { DashboardViewData } from '@/lib/view-data/DashboardViewData';
import { Avatar } from '@/ui/Avatar';
import { Button } from '@/ui/Button';
import { Grid } from '@/ui/primitives/Grid';
import { IconButton } from '@/ui/IconButton';
import { Box } from '@/ui/primitives/Box';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { Bell, Calendar, LayoutDashboard, Search, Settings, Trophy, Users } from 'lucide-react';
import { useRouter } from 'next/navigation';

interface DashboardTemplateProps {
  viewData: DashboardViewData;
}

/**
 * DashboardTemplate
 * 
 * Redesigned as a "Telemetry Workspace" following the Precision Racing Minimal theme.
 * Composes semantic dashboard components into a high-density data environment.
 * Complies with architectural constraints by using UI primitives.
 */
export function DashboardTemplate({ viewData }: DashboardTemplateProps) {
  const router = useRouter();
  const {
    currentDriver,
    nextRace,
    upcomingRaces,
    leagueStandings,
    feedItems,
    activeLeaguesCount,
    hasLeagueStandings,
    hasFeedItems,
  } = viewData;

  const kpiItems = [
    { label: 'Rating', value: currentDriver.rating, color: 'var(--color-telemetry)' },
    { label: 'Rank', value: `#${currentDriver.rank}`, color: 'var(--color-warning)' },
    { label: 'Starts', value: currentDriver.totalRaces },
    { label: 'Wins', value: currentDriver.wins, color: 'var(--color-success)' },
    { label: 'Podiums', value: currentDriver.podiums, color: 'var(--color-warning)' },
    { label: 'Leagues', value: activeLeaguesCount },
  ];

  const activityItems: ActivityItem[] = feedItems.map(item => ({
    id: item.id,
    type: item.type.toUpperCase(),
    description: item.headline,
    timestamp: item.formattedTime,
    status: item.type === 'race_result' ? 'success' : 'info'
  }));

  const railContent = (
    <DashboardRail>
      <Stack direction="col" align="center" gap={6} fullWidth>
        <Box h="8" w="8" rounded="sm" bg="primary-accent" display="flex" alignItems="center" justifyContent="center">
          <Text size="xs" weight="bold">GP</Text>
        </Box>
        <IconButton 
          icon={LayoutDashboard} 
          onClick={() => router.push(routes.protected.dashboard)}
          variant="ghost"
          color="primary-accent"
        />
        <IconButton 
          icon={Trophy} 
          onClick={() => router.push(routes.public.leagues)}
          variant="ghost"
          color="var(--color-text-low)"
        />
        <IconButton 
          icon={Calendar} 
          onClick={() => router.push(routes.public.races)}
          variant="ghost"
          color="var(--color-text-low)"
        />
        <IconButton 
          icon={Users} 
          onClick={() => router.push(routes.public.teams)}
          variant="ghost"
          color="var(--color-text-low)"
        />
      </Stack>
      <Box mt="auto" display="flex" flexDirection="col" alignItems="center" gap={6} pb={4}>
        <IconButton 
          icon={Settings} 
          onClick={() => router.push(routes.protected.profile)}
          variant="ghost"
          color="var(--color-text-low)"
        />
      </Box>
    </DashboardRail>
  );

  const controlBarActions = (
    <Stack direction="row" align="center" gap={4}>
      <IconButton icon={Search} variant="ghost" color="var(--color-text-low)" />
      <Box position="relative">
        <IconButton icon={Bell} variant="ghost" color="var(--color-text-low)" />
        <Box position="absolute" top="0" right="0" h="1.5" w="1.5" rounded="full" bg="critical-red" />
      </Box>
      <Avatar 
        src={currentDriver.avatarUrl} 
        alt={currentDriver.name} 
        size={32}
      />
    </Stack>
  );

  return (
    <DashboardShell 
      rail={railContent}
      controlBar={<DashboardControlBar title="Telemetry Workspace" actions={controlBarActions} />}
    >
      {/* KPI Overview */}
      <DashboardKpiRow items={kpiItems} />

      <Grid responsiveGridCols={{ base: 1, lg: 12 }} gap={6}>
        {/* Main Content Column */}
        <Box responsiveColSpan={{ base: 1, lg: 8 }}>
          <Stack direction="col" gap={6}>
            {nextRace && (
              <TelemetryPanel title="Active Session">
                <Box display="flex" alignItems="center" justifyContent="between">
                  <Box>
                    <Text size="xs" color="var(--color-text-low)" mb={1} block>Next Event</Text>
                    <Text size="lg" weight="bold" block>{nextRace.track}</Text>
                    <Text size="xs" color="var(--color-telemetry)" font="mono" block>{nextRace.car}</Text>
                  </Box>
                  <Box textAlign="right">
                    <Text size="xs" color="var(--color-text-low)" mb={1} block>Starts In</Text>
                    <Text size="xl" font="mono" weight="bold" color="var(--color-warning)" block>{nextRace.timeUntil}</Text>
                    <Text size="xs" color="var(--color-text-low)" block>{nextRace.formattedDate} @ {nextRace.formattedTime}</Text>
                  </Box>
                </Box>
              </TelemetryPanel>
            )}

            <TelemetryPanel title="Recent Activity">
              {hasFeedItems ? (
                <RecentActivityTable items={activityItems} />
              ) : (
                <Box py={8} textAlign="center">
                  <Text italic color="var(--color-text-low)">No recent activity recorded.</Text>
                </Box>
              )}
            </TelemetryPanel>
          </Stack>
        </Box>

        {/* Sidebar Column */}
        <Box responsiveColSpan={{ base: 1, lg: 4 }}>
          <Stack direction="col" gap={6}>
            <TelemetryPanel title="Championship Standings">
              {hasLeagueStandings ? (
                <Stack direction="col" gap={3}>
                  {leagueStandings.map((standing) => (
                    <Box key={standing.leagueId} display="flex" alignItems="center" justifyContent="between" borderBottom borderColor="rgba(35, 39, 43, 0.3)" pb={2}>
                      <Box>
                        <Text size="xs" weight="bold" truncate block maxWidth="180px">{standing.leagueName}</Text>
                        <Text size="xs" color="var(--color-text-low)" block>Pos: {standing.position} / {standing.totalDrivers}</Text>
                      </Box>
                      <Text size="sm" font="mono" weight="bold" color="var(--color-telemetry)">{standing.points} PTS</Text>
                    </Box>
                  ))}
                </Stack>
              ) : (
                <Box py={4} textAlign="center">
                  <Text italic color="var(--color-text-low)">No active championships.</Text>
                </Box>
              )}
            </TelemetryPanel>

            <TelemetryPanel title="Upcoming Schedule">
              <Stack direction="col" gap={4}>
                {upcomingRaces.slice(0, 3).map((race) => (
                  <Box key={race.id} group cursor="pointer">
                    <Box display="flex" justifyContent="between" alignItems="start" mb={1}>
                      <Text size="xs" weight="bold" groupHoverTextColor="var(--color-primary)" transition>{race.track}</Text>
                      <Text size="xs" font="mono" color="var(--color-text-low)">{race.timeUntil}</Text>
                    </Box>
                    <Box display="flex" justifyContent="between">
                      <Text size="xs" color="var(--color-text-low)">{race.car}</Text>
                      <Text size="xs" color="var(--color-text-low)">{race.formattedDate}</Text>
                    </Box>
                  </Box>
                ))}
                <Button 
                  variant="secondary" 
                  fullWidth 
                  onClick={() => router.push(routes.public.races)}
                >
                  <Text size="xs" weight="bold" uppercase letterSpacing="widest">View Full Schedule</Text>
                </Button>
              </Stack>
            </TelemetryPanel>
          </Stack>
        </Box>
      </Grid>
    </DashboardShell>
  );
}