'use client'

import { Suspense, use } from '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 { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { Separator } from '@/components/ui/separator'
import { FileViewer } from '@/components/shared/file-viewer'
import { ProjectLogoWithUrl } from '@/components/shared/project-logo-with-url'
import {
  ArrowLeft,
  AlertCircle,
  Users,
  MapPin,
  Waves,
  GraduationCap,
  Crown,
  Mail,
  Phone,
  Calendar,
  FileText,
  ExternalLink,
} from 'lucide-react'
import { formatDateOnly, getInitials } from '@/lib/utils'

interface PageProps {
  params: Promise<{ id: string }>
}

// Status badge colors
const statusColors: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
  SUBMITTED: 'secondary',
  ELIGIBLE: 'default',
  ASSIGNED: 'default',
  SEMIFINALIST: 'default',
  FINALIST: 'default',
  REJECTED: 'destructive',
}

function ProjectDetailContent({ projectId }: { projectId: string }) {
  const { data: project, isLoading, error } = trpc.mentor.getProjectDetail.useQuery({
    projectId,
  })

  if (isLoading) {
    return <ProjectDetailSkeleton />
  }

  if (error || !project) {
    return (
      <div className="space-y-6">
        <Button variant="ghost" asChild className="-ml-4">
          <Link href={'/mentor' as Route}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Dashboard
          </Link>
        </Button>

        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12 text-center">
            <AlertCircle className="h-12 w-12 text-destructive/50" />
            <p className="mt-2 font-medium">
              {error?.message || 'Project Not Found'}
            </p>
            <p className="text-sm text-muted-foreground mt-1">
              You may not have access to view this project.
            </p>
            <Button asChild className="mt-4">
              <Link href={'/mentor' as Route}>Back to Dashboard</Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

  const teamLead = project.teamMembers?.find((m) => m.role === 'LEAD')
  const otherMembers = project.teamMembers?.filter((m) => m.role !== 'LEAD') || []

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" asChild className="-ml-4">
          <Link href={'/mentor' as Route}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Dashboard
          </Link>
        </Button>
      </div>

      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div className="flex items-start gap-4">
          <ProjectLogoWithUrl
            project={project}
            size="lg"
            fallback="initials"
          />
          <div className="space-y-1">
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <span>
                {project.round.program.year} Edition
              </span>
              <span>•</span>
              <span>{project.round.name}</span>
            </div>
            <div className="flex items-center gap-3">
              <h1 className="text-2xl font-semibold tracking-tight">
                {project.title}
              </h1>
              <Badge variant={statusColors[project.status] || 'secondary'}>
                {project.status.replace('_', ' ')}
              </Badge>
            </div>
            {project.teamName && (
              <p className="text-muted-foreground">{project.teamName}</p>
            )}
          </div>
        </div>
      </div>

      {project.assignedAt && (
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Calendar className="h-4 w-4" />
          <span>Assigned to you on {formatDateOnly(project.assignedAt)}</span>
        </div>
      )}

      <Separator />

      {/* Project Info */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Project Information</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Category & Ocean Issue badges */}
          <div className="flex flex-wrap gap-2">
            {project.competitionCategory && (
              <Badge variant="outline" className="gap-1">
                <GraduationCap className="h-3 w-3" />
                {project.competitionCategory === 'STARTUP' ? 'Start-up' : 'Business Concept'}
              </Badge>
            )}
            {project.oceanIssue && (
              <Badge variant="outline" className="gap-1">
                <Waves className="h-3 w-3" />
                {project.oceanIssue.replace(/_/g, ' ')}
              </Badge>
            )}
          </div>

          {project.description && (
            <div>
              <p className="text-sm font-medium text-muted-foreground mb-1">
                Description
              </p>
              <p className="text-sm whitespace-pre-wrap">{project.description}</p>
            </div>
          )}

          {/* Location & Institution */}
          <div className="grid gap-4 sm:grid-cols-2">
            {(project.country || project.geographicZone) && (
              <div className="flex items-start gap-2">
                <MapPin className="h-4 w-4 text-muted-foreground mt-0.5" />
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Location</p>
                  <p className="text-sm">
                    {[project.geographicZone, project.country].filter(Boolean).join(', ')}
                  </p>
                </div>
              </div>
            )}
            {project.institution && (
              <div className="flex items-start gap-2">
                <GraduationCap className="h-4 w-4 text-muted-foreground mt-0.5" />
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Institution</p>
                  <p className="text-sm">{project.institution}</p>
                </div>
              </div>
            )}
          </div>

          {/* Submission URLs */}
          {(project.phase1SubmissionUrl || project.phase2SubmissionUrl) && (
            <div className="space-y-2">
              <p className="text-sm font-medium text-muted-foreground">Submission Links</p>
              <div className="flex flex-wrap gap-2">
                {project.phase1SubmissionUrl && (
                  <Button variant="outline" size="sm" asChild>
                    <a href={project.phase1SubmissionUrl} target="_blank" rel="noopener noreferrer">
                      <ExternalLink className="mr-2 h-4 w-4" />
                      Phase 1 Submission
                    </a>
                  </Button>
                )}
                {project.phase2SubmissionUrl && (
                  <Button variant="outline" size="sm" asChild>
                    <a href={project.phase2SubmissionUrl} target="_blank" rel="noopener noreferrer">
                      <ExternalLink className="mr-2 h-4 w-4" />
                      Phase 2 Submission
                    </a>
                  </Button>
                )}
              </div>
            </div>
          )}

          {project.tags && project.tags.length > 0 && (
            <div>
              <p className="text-sm font-medium text-muted-foreground mb-2">Tags</p>
              <div className="flex flex-wrap gap-2">
                {project.tags.map((tag) => (
                  <Badge key={tag} variant="secondary">
                    {tag}
                  </Badge>
                ))}
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Team Members Section */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg flex items-center gap-2">
            <Users className="h-5 w-5" />
            Team Members ({project.teamMembers?.length || 0})
          </CardTitle>
          <CardDescription>
            Contact information for the project team
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Team Lead */}
          {teamLead && (
            <div className="p-4 rounded-lg border bg-muted/30">
              <div className="flex items-start gap-3">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-yellow-100">
                  <Crown className="h-6 w-6 text-yellow-600" />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <p className="font-medium">{teamLead.user.name || 'Unnamed'}</p>
                    <Badge variant="secondary" className="text-xs">Team Lead</Badge>
                  </div>
                  {teamLead.title && (
                    <p className="text-sm text-muted-foreground mb-2">{teamLead.title}</p>
                  )}
                  <div className="flex flex-wrap gap-4 text-sm">
                    <a
                      href={`mailto:${teamLead.user.email}`}
                      className="flex items-center gap-1 text-primary hover:underline"
                    >
                      <Mail className="h-4 w-4" />
                      {teamLead.user.email}
                    </a>
                    {teamLead.user.phoneNumber && (
                      <a
                        href={`tel:${teamLead.user.phoneNumber}`}
                        className="flex items-center gap-1 text-primary hover:underline"
                      >
                        <Phone className="h-4 w-4" />
                        {teamLead.user.phoneNumber}
                      </a>
                    )}
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Other Team Members */}
          {otherMembers.length > 0 && (
            <div className="grid gap-3 sm:grid-cols-2">
              {otherMembers.map((member) => (
                <div key={member.id} className="flex items-start gap-3 p-3 rounded-lg border">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
                    <span className="text-sm font-medium">
                      {getInitials(member.user.name || member.user.email)}
                    </span>
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <p className="font-medium text-sm truncate">
                        {member.user.name || 'Unnamed'}
                      </p>
                      <Badge variant="outline" className="text-xs">
                        {member.role === 'ADVISOR' ? 'Advisor' : 'Member'}
                      </Badge>
                    </div>
                    {member.title && (
                      <p className="text-xs text-muted-foreground">{member.title}</p>
                    )}
                    <a
                      href={`mailto:${member.user.email}`}
                      className="text-xs text-muted-foreground hover:text-primary flex items-center gap-1 mt-1"
                    >
                      <Mail className="h-3 w-3" />
                      {member.user.email}
                    </a>
                  </div>
                </div>
              ))}
            </div>
          )}

          {!project.teamMembers?.length && (
            <p className="text-sm text-muted-foreground text-center py-4">
              No team members listed for this project.
            </p>
          )}
        </CardContent>
      </Card>

      {/* Files Section */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg flex items-center gap-2">
            <FileText className="h-5 w-5" />
            Project Files
          </CardTitle>
          <CardDescription>
            Documents and materials submitted by the team
          </CardDescription>
        </CardHeader>
        <CardContent>
          {project.files && project.files.length > 0 ? (
            <FileViewer
              files={project.files.map((f) => ({
                id: f.id,
                fileName: f.fileName,
                fileType: f.fileType,
                mimeType: f.mimeType,
                size: f.size,
                bucket: f.bucket,
                objectKey: f.objectKey,
              }))}
            />
          ) : (
            <p className="text-sm text-muted-foreground text-center py-6">
              No files have been uploaded for this project yet.
            </p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

function ProjectDetailSkeleton() {
  return (
    <div className="space-y-6">
      <Skeleton className="h-9 w-36" />

      <div className="flex items-start gap-4">
        <Skeleton className="h-16 w-16 rounded-lg" />
        <div className="space-y-2">
          <Skeleton className="h-4 w-32" />
          <Skeleton className="h-8 w-64" />
          <Skeleton className="h-4 w-40" />
        </div>
      </div>

      <Skeleton className="h-px w-full" />

      <Card>
        <CardHeader>
          <Skeleton className="h-5 w-40" />
        </CardHeader>
        <CardContent>
          <Skeleton className="h-24 w-full" />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <Skeleton className="h-5 w-32" />
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            <Skeleton className="h-20 w-full" />
            <div className="grid gap-3 sm:grid-cols-2">
              <Skeleton className="h-16 w-full" />
              <Skeleton className="h-16 w-full" />
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

export default function MentorProjectDetailPage({ params }: PageProps) {
  const { id } = use(params)

  return (
    <Suspense fallback={<ProjectDetailSkeleton />}>
      <ProjectDetailContent projectId={id} />
    </Suspense>
  )
}