'use client';

import { useState } from 'react';
import { ChevronRight, Sparkles } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { AudioPlayer } from '@/components/audio/audio-player';
import { AiScoreSheet } from '@/components/submission/ai-score-sheet';
import { Submission } from '@/types';
import { getMediaUrl } from '@/lib/utils';

function getStatusBadge(status: string) {
  switch (status.toUpperCase()) {
    case 'PENDING':
    case 'PENDING_REVIEW':
      return <Badge variant="secondary">Menunggu Review</Badge>;
    case 'APPROVED':
      return <Badge variant="default" className="bg-success text-white">Lulus</Badge>;
    case 'REVISION':
    case 'NEED_REVISION':
      return <Badge variant="destructive">Revisi</Badge>;
    default:
      return <Badge variant="outline">{status}</Badge>;
  }
}

interface SubmissionCardProps {
  submission: Submission;
}

export function SubmissionCard({ submission }: SubmissionCardProps) {
  const [open, setOpen] = useState(false);
  const aiScore = typeof submission.aiScore === 'object' ? submission.aiScore : null;

  return (
    <>
      <Card
        role="button"
        tabIndex={0}
        onClick={() => setOpen(true)}
        onKeyDown={(e) => {
          if (e.target === e.currentTarget && (e.key === 'Enter' || e.key === ' ')) {
            e.preventDefault();
            setOpen(true);
          }
        }}
        className="border-border/50 cursor-pointer transition-colors hover:border-primary/40 active:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
      >
        <CardContent className="p-4 space-y-3">
          <div className="flex justify-between items-start mb-2">
            <span className="text-xs text-muted-foreground font-medium">
              {new Intl.DateTimeFormat('id-ID', {
                day: '2-digit',
                month: 'short',
                year: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
              }).format(new Date(submission.createdAt))}
            </span>
            {getStatusBadge(submission.status)}
          </div>

          {submission.audioUrl && (
            // Keep player controls from opening the score sheet
            <div onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
              <AudioPlayer src={getMediaUrl(submission.audioUrl)} title="Rekaman" showDownload={true} />
            </div>
          )}

          {submission.teacherNotes && (
            <div className="mt-3 p-3 bg-secondary/20 rounded-lg text-sm border border-secondary/10">
              <p className="font-semibold text-xs mb-1 text-secondary-foreground">Catatan Guru:</p>
              <p className="text-muted-foreground italic">&quot;{submission.teacherNotes}&quot;</p>
            </div>
          )}

          <div className="flex items-center justify-between text-xs text-primary font-medium pt-1">
            <span className="flex items-center gap-1.5">
              <Sparkles className="h-3.5 w-3.5" />
              Lihat Nilai AI
            </span>
            <ChevronRight className="h-4 w-4" />
          </div>
        </CardContent>
      </Card>

      <AiScoreSheet
        open={open}
        onOpenChange={setOpen}
        aiScore={aiScore}
        teacherReview={submission.teacherReview}
        description="Hasil analisis otomatis untuk rekaman setoran ini."
      />
    </>
  );
}