'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import { CheckCircle2, Clock, AlertCircle, BookOpen } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';
import type { Verse, VerseStatus } from '@/types';

interface VerseCardProps {
  verse: Verse;
  index?: number;
}

const statusConfig: Record<VerseStatus, {
  label: string;
  icon: typeof CheckCircle2;
  variant: 'default' | 'secondary' | 'destructive' | 'outline';
  className: string;
}> = {
  completed: {
    label: 'Selesai',
    icon: CheckCircle2,
    variant: 'default',
    className: 'bg-success/10 text-success border-success/20',
  },
  in_progress: {
    label: 'Dalam Proses',
    icon: Clock,
    variant: 'secondary',
    className: 'bg-warning/10 text-warning border-warning/20',
  },
  need_revision: {
    label: 'Perlu Revisi',
    icon: AlertCircle,
    variant: 'destructive',
    className: 'bg-destructive/10 text-destructive border-destructive/20',
  },
  not_started: {
    label: 'Belum Mulai',
    icon: BookOpen,
    variant: 'outline',
    className: 'bg-muted/50 text-muted-foreground border-muted',
  },
};

export function VerseCard({ verse, index = 0 }: VerseCardProps) {
  const status = verse.status || 'not_started';
  const config = statusConfig[status];
  const StatusIcon = config.icon;

  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: index * 0.05, duration: 0.3 }}
      whileHover={{ y: -1 }}
    >
      <Link href={`/verses/${verse.id}`}>
        <div className="group rounded-2xl border border-border/50 bg-card p-4 shadow-sm hover:shadow-md hover:border-primary/30 transition-all cursor-pointer">
          <div className="flex items-start gap-3">
            {/* Verse number */}
            <div className={cn(
              'flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-sm font-bold',
              status === 'completed'
                ? 'bg-success/10 text-success'
                : 'bg-primary/10 text-primary'
            )}>
              {verse.number}
            </div>

            <div className="flex-1 min-w-0">
              {/* Arabic preview */}
              <p className="arabic-text text-base leading-relaxed text-card-foreground truncate">
                {verse.arabicText}
              </p>

              {/* Latin preview */}
              <p className="mt-1 text-xs text-muted-foreground truncate">
                {verse.latinText}
              </p>
            </div>

            {/* Status badge */}
            <Badge variant={config.variant} className={cn('shrink-0 text-[10px] gap-1', config.className)}>
              <StatusIcon className="h-3 w-3" />
              {config.label}
            </Badge>
          </div>
        </div>
      </Link>
    </motion.div>
  );
}