import React from 'react';
import Link from 'next/link';
import { TPrestasi } from '@/types/domain';
import { StatusBadge } from '@/components/common/StatusBadge';
import { formatDate } from '@/lib/utils';
import { Calendar, Award, FileText, ArrowRight, Eye, ShieldAlert } from 'lucide-react';

interface PrestasiCardProps {
  prestasi: TPrestasi;
}

export function PrestasiCard({ prestasi }: PrestasiCardProps) {
  return (
    <div className="bg-card border border-text-muted/10 rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow flex flex-col justify-between gap-4 relative overflow-hidden">
      
      {/* Top Section */}
      <div className="space-y-3 relative z-10">
        <div className="flex items-center justify-between gap-2">
          <span className="text-[10px] font-bold text-primary uppercase tracking-wider bg-primary/5 px-2 py-0.5 rounded-md border border-primary/10">
            {prestasi.jenisKegiatan}
          </span>
          <StatusBadge status={prestasi.status} />
        </div>

        <div className="space-y-1">
          <h4 className="text-base font-bold text-text-primary leading-snug line-clamp-2">
            {prestasi.namaKegiatan}
          </h4>
          <p className="text-xs text-text-muted font-medium">
            Penyelenggara: <span className="text-text-primary font-semibold">{prestasi.penyelenggara}</span>
          </p>
        </div>

        {/* Level & Capaian Highlights */}
        <div className="flex items-center gap-2 pt-1.5">
          <span className="inline-flex items-center gap-1 text-xs font-bold text-accent bg-accent/5 border border-accent/10 px-2.5 py-0.5 rounded-lg">
            <Award className="h-3.5 w-3.5" />
            {prestasi.capaian}
          </span>
          <span className="text-xs font-bold text-text-muted bg-surface border border-text-muted/10 px-2.5 py-0.5 rounded-lg">
            {prestasi.tingkat}
          </span>
        </div>
      </div>

      {/* Rejection Notification box if Ditolak */}
      {prestasi.status === 'ditolak' && prestasi.alasanPenolakan && (
        <div className="p-3 bg-danger/5 border border-danger/10 rounded-xl flex items-start gap-2 text-danger text-xs relative z-10">
          <ShieldAlert className="h-4 w-4 flex-shrink-0 mt-0.5" />
          <div className="space-y-0.5">
            <span className="font-bold">Alasan Penolakan:</span>
            <p className="leading-relaxed font-medium">{prestasi.alasanPenolakan}</p>
          </div>
        </div>
      )}

      {/* Footer Details */}
      <div className="flex items-center justify-between text-[11px] text-text-muted border-t border-text-muted/5 pt-4 relative z-10 font-medium">
        <div className="flex items-center gap-1">
          <Calendar className="h-3.5 w-3.5" />
          <span>{formatDate(prestasi.tanggalKegiatan)}</span>
        </div>
        
        <Link
          href={`/dashboard/mahasiswa/prestasi/${prestasi.id}`}
          className="inline-flex items-center gap-1 text-primary hover:text-primary-dark font-bold hover:underline"
        >
          Lihat Detail
          <ArrowRight className="h-3.5 w-3.5" />
        </Link>
      </div>

      {/* Backdrop decorative shapes */}
      <div className="absolute right-[-20px] bottom-[-20px] w-20 h-20 rounded-full bg-primary/5 blur-xl pointer-events-none" />
    </div>
  );
}