'use client';

import { useState } from 'react';
import { useParams } from 'next/navigation';
import { motion } from 'framer-motion';
import { CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Textarea } from '@/components/ui/textarea';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { AudioPlayer } from '@/components/audio/audio-player';
import { getMediaUrl } from '@/lib/utils';
import { ScoreCard } from '@/components/cards/score-card';
import { getSimilarityScores } from '@/components/submission/ai-score-sheet';
import { useQuery } from '@tanstack/react-query';
import { teacherApi } from '@/services/api/teacher';
import { formatDistanceToNow } from 'date-fns';
import { id as idLocale } from 'date-fns/locale';

export default function ReviewDetailPage() {
  const params = useParams();
  const reviewId = params.id as string;
  const [notes, setNotes] = useState('');
  // null = not edited yet, so the input falls back to the AI score
  const [audioInput, setAudioInput] = useState<number | '' | null>(null);
  const [textInput, setTextInput] = useState<number | '' | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const { data: submission, isLoading, isError } = useQuery({
    queryKey: ['teacherReview', reviewId],
    queryFn: () => teacherApi.getReview(reviewId),
    enabled: !!reviewId,
  });

  const similarity = getSimilarityScores(submission?.aiScore?.metrics);
  const audioValue = audioInput ?? similarity.audio ?? '';
  const textValue = textInput ?? similarity.text ?? '';

  const handleReview = async (status: 'approved' | 'need_revision') => {
    setIsSubmitting(true);
    try {
      await teacherApi.reviewSubmission({
        submissionId: reviewId,
        status: status === 'approved' ? 'APPROVED' : 'NEED_REVISION',
        audioSimilarity: audioValue === '' ? 0 : Number(audioValue),
        textSimilarity: textValue === '' ? 0 : Number(textValue),
        notes,
      });
      toast.success(status === 'approved' ? 'Setoran disetujui!' : 'Diminta revisi');
      // Ideally invalidate queries here or navigate back
    } catch {
      toast.error('Gagal memproses review');
    } finally {
      setIsSubmitting(false);
    }
  };

  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
        <Loader2 className="h-8 w-8 animate-spin mb-4" />
        <p>Memuat setoran...</p>
      </div>
    );
  }

  if (isError || !submission) {
    return (
      <div className="text-center py-20 text-muted-foreground">
        <p>Gagal memuat setoran atau data tidak ditemukan.</p>
      </div>
    );
  }

  const studentName = submission.student.user.fullName || 'Siswa';
  const avatarFallback = studentName.charAt(0).toUpperCase();
  const timeAgo = formatDistanceToNow(new Date(submission.submittedAt), { addSuffix: true, locale: idLocale });
  const aiScore = submission.aiScore;

  return (
    <>
      <title>Review Setoran | Nadhom Smart</title>
      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-5">
        {/* Student Info */}
        <Card className="border-border/50">
          <CardContent className="flex items-center gap-3 p-4">
            <Avatar className="h-12 w-12">
              <AvatarFallback className="bg-primary/10 text-primary font-bold">{avatarFallback}</AvatarFallback>
            </Avatar>
            <div>
              <p className="font-heading font-semibold">{studentName}</p>
              <p className="text-xs text-muted-foreground">{submission.student.className} · {timeAgo}</p>
            </div>
          </CardContent>
        </Card>

        {/* Verse */}
        <Card className="border-border/50">
          <div className="h-1 gradient-primary" />
          <CardContent className="py-5 px-5">
            <Badge variant="secondary" className="mb-2 text-[10px]">Bab {submission.verse.chapterId} · #{submission.verse.number}</Badge>
            <p className="arabic-text text-xl text-card-foreground leading-[2.5]">{submission.verse.arabicText}</p>
          </CardContent>
        </Card>

        {/* Audio */}
        <AudioPlayer src={getMediaUrl(submission.audioUrl) || '/audio/placeholder.mp3'} title="Rekaman Siswa" showDownload={true} />

        {/* AI Scores */}
        <div>
          <h3 className="font-heading text-sm font-semibold mb-3">Analisis AI</h3>
          {aiScore ? (
            <div className="grid grid-cols-1 gap-2">
              <ScoreCard label="Audio Similarity" score={similarity.audio ?? 0} />
              <ScoreCard label="Text Similarity" score={similarity.text ?? 0} />
            </div>
          ) : (
            <p className="text-sm text-muted-foreground">Belum ada analisis AI untuk setoran ini.</p>
          )}
        </div>

        {/* AI Transcription */}
        {aiScore?.transcription && (
          <Card className="border-border/50">
            <CardContent className="py-4 px-5">
              <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">Transkripsi AI</p>
              <p className="arabic-text text-base text-card-foreground">{aiScore.transcription}</p>
            </CardContent>
          </Card>
        )}

        <Separator />

        {/* Teacher Notes & Score */}
        <div className="space-y-4">
          <div className="space-y-2">
            <Label>Nilai Guru</Label>
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label htmlFor="audioSimilarity" className="text-xs font-normal text-muted-foreground">
                  Audio Similarity
                </Label>
                <Input
                  id="audioSimilarity"
                  type="number"
                  inputMode="decimal"
                  min={0}
                  max={100}
                  step="0.01"
                  placeholder="0 - 100"
                  value={audioValue}
                  onChange={(e) => setAudioInput(e.target.value ? Number(e.target.value) : '')}
                  className="rounded-xl"
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="textSimilarity" className="text-xs font-normal text-muted-foreground">
                  Text Similarity
                </Label>
                <Input
                  id="textSimilarity"
                  type="number"
                  inputMode="decimal"
                  min={0}
                  max={100}
                  step="0.01"
                  placeholder="0 - 100"
                  value={textValue}
                  onChange={(e) => setTextInput(e.target.value ? Number(e.target.value) : '')}
                  className="rounded-xl"
                />
              </div>
            </div>
            <p className="text-xs text-muted-foreground">Terisi otomatis dari analisis AI, ubah jika perlu.</p>
          </div>
          <div className="space-y-2">
            <Label htmlFor="notes">Catatan Guru</Label>
            <Textarea
              id="notes"
              placeholder="Tuliskan catatan untuk siswa..."
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              className="rounded-xl min-h-[100px]"
            />
          </div>
        </div>

        {/* Actions */}
        <div className="flex gap-3 pb-4">
          <Button
            variant="outline"
            className="flex-1 rounded-xl gap-2 border-destructive/30 text-destructive hover:bg-destructive/5"
            onClick={() => handleReview('need_revision')}
            disabled={isSubmitting}
          >
            {isSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <AlertCircle className="h-4 w-4" />}
            Perlu Revisi
          </Button>
          <Button
            className="flex-1 rounded-xl gap-2 gradient-primary border-0 text-white"
            onClick={() => handleReview('approved')}
            disabled={isSubmitting}
          >
            {isSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <CheckCircle2 className="h-4 w-4" />}
            Setujui
          </Button>
        </div>
      </motion.div>
    </>
  );
}