'use client'

import Link from 'next/link'
import { trpc } from '@/lib/trpc/client'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import {
  ArrowRight,
  Clock,
  FileText,
  Inbox,
  MessageCircle,
  Target,
  UserCheck,
  Users,
} from 'lucide-react'

interface Props {
  roundId: string
}

function formatRelativeFuture(date: Date | null): { label: string; tone: 'normal' | 'amber' | 'red' } {
  if (!date) return { label: '—', tone: 'normal' }
  const ms = date.getTime() - Date.now()
  if (ms <= 0) return { label: 'Closed', tone: 'red' }
  const hours = Math.floor(ms / 3_600_000)
  const days = Math.floor(hours / 24)
  const tone: 'normal' | 'amber' | 'red' =
    hours <= 12 ? 'red' : hours <= 48 ? 'amber' : 'normal'
  const label = days > 0 ? `Closes in ${days}d` : `Closes in ${hours}h`
  return { label, tone }
}

function formatRelativePast(date: Date | null): string {
  if (!date) return '—'
  const ms = Date.now() - date.getTime()
  const minutes = Math.floor(ms / 60_000)
  const hours = Math.floor(ms / 3_600_000)
  const days = Math.floor(ms / 86_400_000)
  if (days > 0) return `${days}d ago`
  if (hours > 0) return `${hours}h ago`
  return `${Math.max(0, minutes)}m ago`
}

export function MentoringRoundOverview({ roundId }: Props) {
  const { data: stats, isLoading: statsLoading } = trpc.mentor.getRoundStats.useQuery(
    { roundId },
    { refetchInterval: 30_000 },
  )
  const { data: pool, isLoading: poolLoading } = trpc.mentor.getMentorPool.useQuery({})
  const { data: pendingChangeRequests } = trpc.mentor.listChangeRequests.useQuery(
    { status: 'PENDING' },
    { refetchInterval: 30_000 },
  )

  if (statsLoading || poolLoading) {
    return (
      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        {[1, 2, 3, 4].map((i) => (
          <Skeleton key={i} className="h-32 w-full rounded-md" />
        ))}
      </div>
    )
  }
  if (!stats || !pool) return null

  const pendingCount = pendingChangeRequests?.length ?? 0
  // If there's at least one pending request, deep-link directly into the
  // first one's project (admins can resolve / view siblings from there).
  // Otherwise the card stays static.
  const firstPendingProjectId = pendingChangeRequests?.[0]?.project.id ?? null
  const changeRequestsHref = firstPendingProjectId
    ? `/admin/projects/${firstPendingProjectId}/mentor`
    : null

  const requestedPct = stats.totalProjects
    ? Math.round((stats.requestedCount / stats.totalProjects) * 100)
    : 0
  const assignedPct = stats.totalProjects
    ? Math.round((stats.assignedCount / stats.totalProjects) * 100)
    : 0

  const window = formatRelativeFuture(
    stats.requestWindow.deadline ? new Date(stats.requestWindow.deadline) : null,
  )

  const avgLoad =
    pool.poolSize > 0 ? (pool.totalCurrentAssignments / pool.poolSize).toFixed(1) : '—'
  const lastActivity = stats.workspaceActivity.lastActivityAt
    ? new Date(stats.workspaceActivity.lastActivityAt)
    : null

  return (
    <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
            Requested mentoring
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-3xl font-bold tabular-nums">
            {stats.requestedCount}
            <span className="text-muted-foreground ml-2 text-sm font-normal">
              / {stats.totalProjects}
            </span>
          </div>
          <p className="text-muted-foreground mt-1 text-xs">{requestedPct}% of round</p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
            Mentor assigned
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-baseline gap-2">
            <div className="text-3xl font-bold tabular-nums">{stats.assignedCount}</div>
            <UserCheck className="text-muted-foreground h-5 w-5" />
          </div>
          <p className="text-muted-foreground mt-1 text-xs">
            {assignedPct}% of round{' '}
            {stats.awaitingAssignment > 0 && (
              <span className="text-amber-700">
                · {stats.awaitingAssignment} awaiting
              </span>
            )}
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
            Request window
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-baseline gap-2">
            <Clock className="text-muted-foreground h-5 w-5" />
            <Badge
              variant={
                window.tone === 'red'
                  ? 'destructive'
                  : window.tone === 'amber'
                    ? 'secondary'
                    : 'outline'
              }
              className="text-sm"
            >
              {window.label}
            </Badge>
          </div>
          <p className="text-muted-foreground mt-2 text-xs">
            {stats.requestWindow.deadline
              ? `Closes ${new Date(stats.requestWindow.deadline).toLocaleDateString()} · ${stats.requestWindow.deadlineDays}-day window`
              : 'No window deadline set'}
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <CardTitle className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
            Mentor pool
          </CardTitle>
          <Link
            href="/admin/mentors"
            className="text-muted-foreground hover:text-foreground inline-flex items-center text-xs"
          >
            View all
            <ArrowRight className="ml-0.5 h-3 w-3" />
          </Link>
        </CardHeader>
        <CardContent>
          <div className="flex items-baseline gap-2">
            <div className="text-3xl font-bold tabular-nums">{pool.poolSize}</div>
            <Users className="text-muted-foreground h-5 w-5" />
          </div>
          <p className="text-muted-foreground mt-1 text-xs">
            Avg load <span className="text-foreground font-medium">{avgLoad}</span> ·{' '}
            {pool.totalCurrentAssignments} active
          </p>
        </CardContent>
      </Card>

      <Card
        className={`md:col-span-2 xl:col-span-4 ${
          pendingCount > 0 ? 'border-amber-300' : ''
        }`}
      >
        <CardContent className="flex items-center justify-between py-4">
          <div className="flex items-center gap-3">
            <Inbox
              className={`h-5 w-5 ${
                pendingCount > 0 ? 'text-amber-600' : 'text-muted-foreground'
              }`}
            />
            <div>
              <div className="text-sm font-medium">Pending change requests</div>
              <div className="text-muted-foreground text-xs">
                Team members asking admin to swap a mentor
              </div>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <div className="text-2xl font-bold tabular-nums">{pendingCount}</div>
            {changeRequestsHref ? (
              <Link
                href={changeRequestsHref}
                className="text-muted-foreground hover:text-foreground inline-flex items-center text-xs"
              >
                Review
                <ArrowRight className="ml-0.5 h-3 w-3" />
              </Link>
            ) : (
              <span className="text-muted-foreground text-xs">All clear</span>
            )}
          </div>
        </CardContent>
      </Card>

      <Card className="md:col-span-2 xl:col-span-4">
        <CardHeader className="pb-2">
          <CardTitle className="text-sm">Workspace activity</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 gap-x-6 gap-y-3 text-sm md:grid-cols-4">
            <div className="flex items-center gap-2">
              <MessageCircle className="text-muted-foreground h-4 w-4" />
              <div>
                <div className="font-bold tabular-nums">{stats.workspaceActivity.messageCount}</div>
                <div className="text-muted-foreground text-xs">messages</div>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <FileText className="text-muted-foreground h-4 w-4" />
              <div>
                <div className="font-bold tabular-nums">{stats.workspaceActivity.fileCount}</div>
                <div className="text-muted-foreground text-xs">files</div>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <Target className="text-muted-foreground h-4 w-4" />
              <div>
                <div className="font-bold tabular-nums">
                  {stats.workspaceActivity.milestoneCount}
                </div>
                <div className="text-muted-foreground text-xs">milestones</div>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <Clock className="text-muted-foreground h-4 w-4" />
              <div>
                <div className="font-medium">{formatRelativePast(lastActivity)}</div>
                <div className="text-muted-foreground text-xs">last activity</div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
