'use client'

import Link from 'next/link'
import type { Route } from 'next'
import { useRouter } from 'next/navigation'
import { trpc } from '@/lib/trpc/client'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import { ArrowLeft, ArrowRight, Users, Briefcase } from 'lucide-react'
import { toast } from 'sonner'

const statusColors: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
  SUBMITTED: 'secondary',
  ELIGIBLE: 'default',
  SEMIFINALIST: 'default',
  FINALIST: 'default',
  WINNER: 'default',
  REJECTED: 'destructive',
}

export default function MentorWorkspacePage() {
  const router = useRouter()
  const { data: assignments, isLoading } = trpc.mentor.getMyProjects.useQuery()

  if (isLoading) {
    return (
      <div className="space-y-6">
        <Skeleton className="h-8 w-64" />
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {[1, 2, 3].map((i) => (
            <Skeleton key={i} className="h-40" />
          ))}
        </div>
      </div>
    )
  }

  const projects = assignments || []

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Mentor Workspace</h1>
          <p className="text-muted-foreground mt-1">
            Collaborate with your assigned mentee projects
          </p>
        </div>
        <Button variant="ghost" size="sm" onClick={() => router.back()}>
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back
        </Button>
      </div>

      {projects.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <div className="rounded-2xl bg-brand-teal/10 p-4 mb-4">
              <Briefcase className="h-8 w-8 text-brand-teal/60" />
            </div>
            <h2 className="text-xl font-semibold mb-2">No Projects Assigned</h2>
            <p className="text-muted-foreground text-center max-w-md">
              You don&apos;t have any mentee projects assigned yet. Check back later.
            </p>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {projects.map((assignment) => {
            const project = assignment.project
            const teamSize = project.teamMembers?.length || 0

            return (
              <Card
                key={assignment.id}
                className="flex flex-col transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
              >
                <CardHeader>
                  <div className="flex items-start justify-between">
                    <div className="flex-1 min-w-0">
                      <CardTitle className="text-lg truncate" title={project.title}>
                        {project.title}
                      </CardTitle>
                      {project.teamName && (
                        <p className="text-sm text-muted-foreground mt-1 truncate">
                          {project.teamName}
                        </p>
                      )}
                    </div>
                    {project.status && (
                      <Badge variant={statusColors[project.status] || 'secondary'} className="shrink-0 ml-2">
                        {project.status}
                      </Badge>
                    )}
                  </div>
                </CardHeader>
                <CardContent className="flex-1 flex flex-col space-y-4">
                  {project.description && (
                    <p className="text-sm text-muted-foreground line-clamp-2">
                      {project.description}
                    </p>
                  )}

                  <div className="flex-1" />

                  <div className="flex items-center justify-between text-sm pt-3 border-t">
                    <div className="flex items-center gap-2 text-muted-foreground">
                      <Users className="h-4 w-4" />
                      <span>{teamSize} member{teamSize !== 1 ? 's' : ''}</span>
                    </div>
                    <Button variant="ghost" size="sm" asChild>
                      <Link href={`/mentor/workspace/${project.id}` as Route}>
                        Open
                        <ArrowRight className="ml-1 h-4 w-4" />
                      </Link>
                    </Button>
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>
      )}
    </div>
  )
}
