'use client'

import { useSession } from 'next-auth/react'
import Link from 'next/link'
import type { Route } from 'next'
import { trpc } from '@/lib/trpc/client'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import { ApplicantCompetitionTimeline } from '@/components/applicant/competition-timeline'
import { ArrowLeft, FileText, Calendar } from 'lucide-react'
import { toast } from 'sonner'

export default function ApplicantCompetitionsPage() {
  const { data: session } = useSession()
  const { data: myProject, isLoading } = trpc.applicant.getMyDashboard.useQuery(undefined, {
    enabled: !!session,
  })

  if (isLoading) {
    return (
      <div className="space-y-6">
        <Skeleton className="h-8 w-64" />
        <Skeleton className="h-96" />
      </div>
    )
  }

  const competitionId = myProject?.project?.programId

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Competition Timeline</h1>
          <p className="text-muted-foreground mt-1">
            Track your progress through competition rounds
          </p>
        </div>
        <Button variant="ghost" size="sm" asChild>
          <Link href={'/applicant' as Route} aria-label="Back to applicant dashboard">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Dashboard
          </Link>
        </Button>
      </div>

      {!competitionId ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <FileText className="h-12 w-12 text-muted-foreground/50 mb-4" />
            <h2 className="text-xl font-semibold mb-2">No Active Competition</h2>
            <p className="text-muted-foreground text-center max-w-md">
              You don&apos;t have an active project in any competition yet. Submit your application
              when a competition opens.
            </p>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-6 lg:grid-cols-3">
          <div className="lg:col-span-2">
            <ApplicantCompetitionTimeline competitionId={competitionId} />
          </div>
          <div className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Calendar className="h-5 w-5" />
                  Quick Actions
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <Button variant="outline" className="w-full justify-start" asChild>
                  <Link href={'/applicant/documents' as Route}>
                    <FileText className="mr-2 h-4 w-4" />
                    View Documents
                  </Link>
                </Button>
                {myProject?.openRounds && myProject.openRounds.length > 0 && (
                  <p className="text-sm text-muted-foreground px-3 py-2 bg-muted/50 rounded-md">
                    {myProject.openRounds.length} submission window
                    {myProject.openRounds.length !== 1 ? 's' : ''} currently open
                  </p>
                )}
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Timeline Info</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Current Status:</span>
                  <span className="font-medium">
                    {myProject?.currentStatus || 'Unknown'}
                  </span>
                </div>
                {myProject?.project && (
                  <>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Project:</span>
                      <span className="font-medium truncate ml-2" title={myProject.project.title}>
                        {myProject.project.title}
                      </span>
                    </div>
                    {myProject.project.submittedAt && (
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Submitted:</span>
                        <span className="font-medium">
                          {new Date(myProject.project.submittedAt).toLocaleDateString()}
                        </span>
                      </div>
                    )}
                  </>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      )}
    </div>
  )
}