'use client';

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

function getPracticeStatusBadge(status: string) {
  switch (status.toUpperCase()) {
    case 'PROCESSING':
      return (
        <Badge variant="secondary" className="gap-1">
          <Loader2 className="h-3 w-3 animate-spin" />
          Diproses
        </Badge>
      );
    case 'COMPLETED':
      return <Badge variant="default" className="bg-success text-white">Selesai</Badge>;
    case 'FAILED':
      return <Badge variant="destructive">Gagal</Badge>;
    default:
      return <Badge variant="outline">{status}</Badge>;
  }
}

interface PracticeCardProps {
  practice: Practice;
}

export function PracticeCard({ practice }: PracticeCardProps) {
  const [open, setOpen] = useState(false);

  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">
            <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(practice.recordedAt))}
            </span>
            {getPracticeStatusBadge(practice.status)}
          </div>

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

          {practice.aiScore ? (
            <div className="flex items-center justify-between p-3 rounded-xl bg-primary/10">
              <span className="text-sm font-medium flex items-center gap-1.5">
                <Sparkles className="h-4 w-4 text-primary" />
                Skor AI
              </span>
              <span className="flex items-center gap-1 text-xl font-bold text-primary">
                {practice.aiScore.finalScore}
                <ChevronRight className="h-4 w-4" />
              </span>
            </div>
          ) : (
            <p className="text-xs text-muted-foreground">AI sedang menganalisis rekaman ini...</p>
          )}

          {practice.submission && (
            <div className="text-xs text-muted-foreground border-t border-border/50 pt-2">
              Disetorkan ke guru &bull; {practice.submission.status}
            </div>
          )}
        </CardContent>
      </Card>

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