'use client';

import { AudioLines, FileText, MessageSquareQuote, Sparkles, UserCheck } from 'lucide-react';
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet';
import { Progress } from '@/components/ui/progress';
import { Badge } from '@/components/ui/badge';
import type { SubmissionTeacherReview } from '@/types';

export interface AiScoreSource {
  transcription?: string;
  metrics?: Record<string, unknown> | null;
  feedback?: string;
}

// AI metrics come straight from the AI service, so a score may be a bare number or `{ score }`.
// Returns the 0–100 score rounded to 2 decimals, or null when absent.
function readScore(value: unknown): number | null {
  const raw =
    typeof value === 'number'
      ? value
      : typeof value === 'object' && value !== null && typeof (value as { score?: unknown }).score === 'number'
        ? (value as { score: number }).score
        : null;
  if (raw === null || Number.isNaN(raw)) return null;
  return Math.round(raw * 100) / 100;
}

export function getSimilarityScores(metrics: Record<string, unknown> | null | undefined) {
  const m = metrics ?? {};
  const audio = m.audio as Record<string, unknown> | undefined;
  return {
    audio: readScore(m.audio_similarity ?? m.audioSimilarity ?? audio?.similarity),
    text: readScore(m.text_similarity ?? m.textSimilarity ?? m.similarity),
  };
}

function getAiScores(aiScore: AiScoreSource) {
  return {
    ...getSimilarityScores(aiScore.metrics),
    transcription: aiScore.transcription,
    feedback: aiScore.feedback,
  };
}

function ScoreRow({ icon: Icon, label, hint, score }: {
  icon: typeof AudioLines;
  label: string;
  hint: string;
  score: number | null;
}) {
  return (
    <div className="p-4 rounded-xl border border-border/50 bg-card space-y-3">
      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-3">
          <div className="h-9 w-9 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
            <Icon className="h-4 w-4 text-primary" />
          </div>
          <div>
            <p className="text-sm font-semibold">{label}</p>
            <p className="text-xs text-muted-foreground">{hint}</p>
          </div>
        </div>
        <span className="text-2xl font-bold text-primary tabular-nums">
          {score ?? '-'}
          {score !== null && <span className="text-sm font-medium text-muted-foreground">%</span>}
        </span>
      </div>
      <Progress value={score ?? 0} className="h-2" />
    </div>
  );
}

function getReviewStatusBadge(status?: string) {
  switch (status?.toUpperCase()) {
    case 'APPROVED':
      return <Badge className="bg-success text-white">Lulus</Badge>;
    case 'NEED_REVISION':
    case 'REVISION':
      return <Badge variant="destructive">Perlu Revisi</Badge>;
    case 'REJECTED':
      return <Badge variant="destructive">Ditolak</Badge>;
    default:
      return status ? <Badge variant="outline">{status}</Badge> : null;
  }
}

function TeacherStat({ label, value }: { label: string; value: number | null | undefined }) {
  return (
    <div className="p-3 rounded-xl bg-background/70">
      <p className="text-[11px] text-muted-foreground">{label}</p>
      <p className="text-lg font-bold text-primary tabular-nums">
        {typeof value === 'number' ? value : '-'}
      </p>
    </div>
  );
}

function TeacherReviewSection({ review }: { review: SubmissionTeacherReview }) {
  const hasSimilarity = typeof review.audioSimilarity === 'number' || typeof review.textSimilarity === 'number';

  return (
    <div className="p-4 rounded-xl bg-primary/10 space-y-3">
      <div className="flex items-center justify-between gap-2">
        <span className="text-sm font-semibold flex items-center gap-1.5">
          <UserCheck className="h-4 w-4 text-primary" />
          Penilaian Guru
        </span>
        {getReviewStatusBadge(review.status)}
      </div>

      {hasSimilarity ? (
        <div className="grid grid-cols-2 gap-2">
          <TeacherStat label="Audio Similarity" value={review.audioSimilarity} />
          <TeacherStat label="Text Similarity" value={review.textSimilarity} />
        </div>
      ) : (
        typeof review.score === 'number' && <TeacherStat label="Nilai" value={review.score} />
      )}

      {review.notes && (
        <div className="p-3 rounded-xl bg-background/70 space-y-1">
          <p className="text-[11px] text-muted-foreground flex items-center gap-1">
            <MessageSquareQuote className="h-3.5 w-3.5" />
            Catatan Guru
          </p>
          <p className="text-sm text-card-foreground italic leading-relaxed">&quot;{review.notes}&quot;</p>
        </div>
      )}
    </div>
  );
}

interface AiScoreSheetProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  aiScore: AiScoreSource | null | undefined;
  teacherReview?: SubmissionTeacherReview | null;
  description?: string;
}

export function AiScoreSheet({
  open,
  onOpenChange,
  aiScore,
  teacherReview,
  description = 'Hasil analisis otomatis untuk rekaman ini.',
}: AiScoreSheetProps) {
  const ai = aiScore ? getAiScores(aiScore) : null;

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent side="bottom" className="rounded-t-3xl max-h-[85vh] overflow-y-auto pb-[max(1rem,env(safe-area-inset-bottom))]">
        <div className="mx-auto mt-2 h-1.5 w-12 rounded-full bg-muted" />
        <SheetHeader className="pt-0">
          <SheetTitle className="flex items-center gap-2">
            <Sparkles className="h-4 w-4 text-primary" />
            Nilai AI
          </SheetTitle>
          <SheetDescription>{description}</SheetDescription>
        </SheetHeader>

        <div className="px-4 pb-4 space-y-3">
          {ai ? (
            <>
              <ScoreRow
                icon={AudioLines}
                label="Audio Similarity"
                hint="Kemiripan suara dengan audio referensi"
                score={ai.audio}
              />
              <ScoreRow
                icon={FileText}
                label="Text Similarity"
                hint="Kemiripan bacaan dengan teks nadhom"
                score={ai.text}
              />

              {ai.transcription && (
                <div className="p-4 rounded-xl bg-muted/40 space-y-1">
                  <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Transkripsi AI</p>
                  <p className="text-sm text-card-foreground">{ai.transcription}</p>
                </div>
              )}

              {ai.feedback && (
                <div className="p-4 rounded-xl bg-muted/40 space-y-1">
                  <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Feedback</p>
                  <p className="text-sm text-card-foreground leading-relaxed">{ai.feedback}</p>
                </div>
              )}
            </>
          ) : (
            <p className="text-sm text-muted-foreground text-center py-6">
              Nilai AI belum tersedia untuk rekaman ini.
            </p>
          )}

          {teacherReview && <TeacherReviewSection review={teacherReview} />}
        </div>
      </SheetContent>
    </Sheet>
  );
}