'use client'

import { useState } from 'react'
import { useParams, useSearchParams } from 'next/navigation'
import Link from 'next/link'
import { trpc } from '@/lib/trpc/client'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import {
  ArrowLeft,
  BarChart3,
  MessageSquare,
  Send,
  Loader2,
  Lock,
  User,
} from 'lucide-react'
import { toast } from 'sonner'
import { formatDate, cn, getInitials } from '@/lib/utils'

export default function DiscussionPage() {
  const params = useParams()
  const searchParams = useSearchParams()
  const projectId = params.id as string
  const roundId = searchParams.get('roundId') || ''

  const [commentText, setCommentText] = useState('')

  const utils = trpc.useUtils()

  // Fetch peer summary
  const { data: peerSummary, isLoading: loadingSummary } =
    trpc.evaluation.getPeerSummary.useQuery(
      { projectId, roundId },
      { enabled: !!roundId }
    )

  // Fetch discussion thread
  const { data: discussion, isLoading: loadingDiscussion } =
    trpc.evaluation.getDiscussion.useQuery(
      { projectId, roundId },
      { enabled: !!roundId }
    )

  // Add comment mutation
  const addCommentMutation = trpc.evaluation.addComment.useMutation({
    onSuccess: () => {
      utils.evaluation.getDiscussion.invalidate({ projectId, roundId })
      toast.success('Comment added')
      setCommentText('')
    },
    onError: (e) => toast.error(e.message),
  })

  const handleSubmitComment = () => {
    if (!commentText.trim()) {
      toast.error('Please enter a comment')
      return
    }
    addCommentMutation.mutate({
      projectId,
      roundId,
      content: commentText.trim(),
    })
  }

  const isLoading = loadingSummary || loadingDiscussion

  if (!roundId) {
    return (
      <div className="space-y-6">
        <Button variant="ghost" asChild className="-ml-4">
          <Link href="/jury/assignments">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Assignments
          </Link>
        </Button>
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12 text-center">
            <MessageSquare className="h-12 w-12 text-muted-foreground/50" />
            <p className="mt-2 font-medium">No round specified</p>
            <p className="text-sm text-muted-foreground">
              Please access the discussion from your assignments page.
            </p>
          </CardContent>
        </Card>
      </div>
    )
  }

  if (isLoading) {
    return <DiscussionSkeleton />
  }

  // Parse peer summary data
  const summary = peerSummary as Record<string, unknown> | undefined
  const averageScore = summary ? Number(summary.averageScore || 0) : 0
  const scoreRange = summary?.scoreRange as { min: number; max: number } | undefined
  const evaluationCount = summary ? Number(summary.evaluationCount || 0) : 0
  const individualScores = (summary?.scores || summary?.individualScores) as
    | Array<number>
    | undefined

  // Parse discussion data
  const discussionData = discussion as Record<string, unknown> | undefined
  const comments = (discussionData?.comments || []) as Array<{
    id: string
    user: { id: string; name: string | null; email: string }
    content: string
    createdAt: string
  }>
  const discussionStatus = String(discussionData?.status || 'OPEN')
  const isClosed = discussionStatus === 'CLOSED'
  const closedAt = discussionData?.closedAt as string | undefined
  const closedBy = discussionData?.closedBy as Record<string, unknown> | undefined

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

      <div>
        <h1 className="text-2xl font-semibold tracking-tight">
          Project Discussion
        </h1>
        <p className="text-muted-foreground">
          Peer review discussion and anonymized score summary
        </p>
      </div>

      {/* Peer Summary Card */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg flex items-center gap-2">
            <BarChart3 className="h-5 w-5" />
            Peer Summary
          </CardTitle>
          <CardDescription>
            Anonymized scoring overview across all evaluations
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Stats row */}
          <div className="grid gap-4 sm:grid-cols-3">
            <div className="rounded-lg border p-3 text-center">
              <p className="text-2xl font-bold">{averageScore.toFixed(1)}</p>
              <p className="text-xs text-muted-foreground">Average Score</p>
            </div>
            <div className="rounded-lg border p-3 text-center">
              <p className="text-2xl font-bold">
                {scoreRange
                  ? `${scoreRange.min.toFixed(1)} - ${scoreRange.max.toFixed(1)}`
                  : '--'}
              </p>
              <p className="text-xs text-muted-foreground">Score Range</p>
            </div>
            <div className="rounded-lg border p-3 text-center">
              <p className="text-2xl font-bold">{evaluationCount}</p>
              <p className="text-xs text-muted-foreground">Evaluations</p>
            </div>
          </div>

          {/* Anonymized score bars */}
          {individualScores && individualScores.length > 0 && (
            <div className="space-y-2">
              <p className="text-sm font-medium">Anonymized Individual Scores</p>
              <div className="flex items-end gap-2 h-24">
                {individualScores.map((score, i) => {
                  const maxPossible = scoreRange?.max || 10
                  const height =
                    maxPossible > 0
                      ? Math.max((score / maxPossible) * 100, 4)
                      : 4

                  return (
                    <div
                      key={i}
                      className="flex-1 flex flex-col items-center gap-1"
                    >
                      <span className="text-[10px] font-medium tabular-nums">
                        {score.toFixed(1)}
                      </span>
                      <div
                        className={cn(
                          'w-full rounded-t transition-all',
                          score >= averageScore
                            ? 'bg-primary/60'
                            : 'bg-muted-foreground/30'
                        )}
                        style={{ height: `${height}%` }}
                      />
                      <span className="text-[10px] text-muted-foreground">
                        #{i + 1}
                      </span>
                    </div>
                  )
                })}
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Discussion Section */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="text-lg flex items-center gap-2">
              <MessageSquare className="h-5 w-5" />
              Discussion
            </CardTitle>
            {isClosed && (
              <Badge variant="secondary" className="flex items-center gap-1">
                <Lock className="h-3 w-3" />
                Closed
                {closedAt && (
                  <span className="ml-1">- {formatDate(closedAt)}</span>
                )}
              </Badge>
            )}
          </div>
          <CardDescription>
            {isClosed
              ? 'This discussion has been closed.'
              : 'Share your thoughts with fellow jurors about this project.'}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Comments */}
          {comments.length > 0 ? (
            <div className="space-y-4">
              {comments.map((comment) => (
                <div key={comment.id} className="flex gap-3">
                  {/* Avatar */}
                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium">
                    {comment.user?.name
                      ? getInitials(comment.user.name)
                      : <User className="h-4 w-4" />}
                  </div>

                  {/* Content */}
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-medium">
                        {comment.user?.name || 'Anonymous Juror'}
                      </span>
                      <span className="text-xs text-muted-foreground">
                        {formatDate(comment.createdAt)}
                      </span>
                    </div>
                    <p className="text-sm mt-1 whitespace-pre-wrap">
                      {comment.content}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center py-8 text-center">
              <MessageSquare className="h-10 w-10 text-muted-foreground/30" />
              <p className="mt-2 text-sm text-muted-foreground">
                No comments yet. Be the first to start the discussion.
              </p>
            </div>
          )}

          {/* Comment input */}
          {!isClosed ? (
            <div className="space-y-2 border-t pt-4">
              <Textarea
                placeholder="Write your comment..."
                value={commentText}
                onChange={(e) => setCommentText(e.target.value)}
                rows={3}
              />
              <div className="flex justify-end">
                <Button
                  onClick={handleSubmitComment}
                  disabled={
                    addCommentMutation.isPending || !commentText.trim()
                  }
                >
                  {addCommentMutation.isPending ? (
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  ) : (
                    <Send className="mr-2 h-4 w-4" />
                  )}
                  Post Comment
                </Button>
              </div>
            </div>
          ) : (
            <div className="border-t pt-4">
              <p className="text-sm text-muted-foreground text-center">
                This discussion is closed and no longer accepts new comments.
              </p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

function DiscussionSkeleton() {
  return (
    <div className="space-y-6">
      <Skeleton className="h-9 w-36" />
      <div>
        <Skeleton className="h-8 w-64" />
        <Skeleton className="h-4 w-40 mt-2" />
      </div>

      {/* Peer summary skeleton */}
      <Card>
        <CardHeader>
          <Skeleton className="h-5 w-40" />
          <Skeleton className="h-4 w-56" />
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 sm:grid-cols-3">
            {[1, 2, 3].map((i) => (
              <Skeleton key={i} className="h-20 w-full" />
            ))}
          </div>
          <Skeleton className="h-24 w-full" />
        </CardContent>
      </Card>

      {/* Discussion skeleton */}
      <Card>
        <CardHeader>
          <Skeleton className="h-5 w-32" />
        </CardHeader>
        <CardContent className="space-y-4">
          {[1, 2, 3].map((i) => (
            <div key={i} className="flex gap-3">
              <Skeleton className="h-8 w-8 rounded-full" />
              <div className="flex-1 space-y-2">
                <Skeleton className="h-4 w-32" />
                <Skeleton className="h-4 w-full" />
              </div>
            </div>
          ))}
          <Skeleton className="h-20 w-full" />
        </CardContent>
      </Card>
    </div>
  )
}