'use client';

import { useTenant } from '@/contexts/tenant-context';
import { useShifts } from '@/hooks/useShifts';
import { useTasks } from '@/hooks/useTasks';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import Link from 'next/link';

export default function DashboardPage() {
  const { activeClubId, clubs } = useTenant();
  const activeClub = clubs.find(c => c.id === activeClubId);
  
  const { data: tasksData } = useTasks({ status: 'Open' });
  const { data: shiftsData } = useShifts({ 
    startDate: new Date().toISOString() 
  });

  const openTasksCount = tasksData?.total || 0;
  const upcomingShiftsCount = shiftsData?.total || 0;

  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold mb-6">
        Welcome to {activeClub?.name || 'WorkClub'}
      </h1>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 mb-6">
        <Card>
          <CardHeader>
            <CardTitle>My Open Tasks</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-4xl font-bold">{openTasksCount}</div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>My Upcoming Shifts</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-4xl font-bold">{upcomingShiftsCount}</div>
          </CardContent>
        </Card>
      </div>

      <div className="flex gap-4">
        <Link href="/tasks">
          <Button>View All Tasks</Button>
        </Link>
        <Link href="/shifts">
          <Button variant="outline">View All Shifts</Button>
        </Link>
      </div>
    </div>
  );
}