'use client';

import { TrophyIcon, CalendarIcon } from '@heroicons/react/24/outline';
import { cn } from '@/utils/cn';
import { notFound } from 'next/navigation';

// Mock data sertifikat (sama seperti di certificates/page.tsx)
const certificates = [
  {
    id: '1',
    title: 'Sertifikat HACCP - Hazard Analysis Critical Control Point',
    course: 'HACCP - Hazard Analysis Critical Control Point',
    issuedDate: '2024-01-20',
    expiryDate: '2027-01-20',
    certificateNumber: 'HACCP-2024-001234',
    status: 'active',
    score: 88,
    grade: 'A',
    issuer: 'Lembaga Sertifikasi Keamanan Pangan Indonesia',
    credentialId: 'LSKPI-HACCP-2024-001234',
    skills: ['Hazard Analysis', 'Critical Control Points', 'Food Safety Management', 'Risk Assessment']
  },
  {
    id: '2',
    title: 'Sertifikat Sistem Jaminan Halal',
    course: 'Sertifikasi Halal - Sistem Jaminan Halal',
    issuedDate: '2024-01-18',
    expiryDate: '2026-01-18',
    certificateNumber: 'SJH-2024-005678',
    status: 'active',
    score: 92,
    grade: 'A+',
    issuer: 'Badan Penyelenggara Jaminan Produk Halal',
    credentialId: 'BPJPH-SJH-2024-005678',
    skills: ['Halal Certification', 'Islamic Law', 'Product Analysis', 'Halal Auditing']
  },
  {
    id: '3',
    title: 'Sertifikat Sanitasi Lingkungan Hidup Sehat',
    course: 'SLHS - Sanitasi Lingkungan Hidup Sehat',
    issuedDate: '2023-12-15',
    expiryDate: '2025-12-15',
    certificateNumber: 'SLHS-2023-009876',
    status: 'expiring_soon',
    score: 85,
    grade: 'A',
    issuer: 'Kementerian Kesehatan Republik Indonesia',
    credentialId: 'KEMKES-SLHS-2023-009876',
    skills: ['Environmental Sanitation', 'Public Health', 'Waste Management', 'Water Quality']
  },
  {
    id: '4',
    title: 'Sertifikat ISO 22000',
    course: 'Food Safety Management System',
    issuedDate: '2023-12-05',
    expiryDate: '2024-12-05',
    certificateNumber: 'ISO-2023-004',
    status: 'expired',
    score: 96,
    grade: 'A',
    issuer: 'LMS BGN Academy',
    credentialId: 'IS23-96234',
    skills: ['ISO Standards', 'Food Safety', 'Management System']
  }
];

const statusConfig = {
  active: {
    label: 'Aktif',
    color: 'bg-green-100 text-green-800 border-green-200',
    bgColor: 'bg-green-50'
  },
  expiring_soon: {
    label: 'Akan Berakhir',
    color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
    bgColor: 'bg-yellow-50'
  },
  expired: {
    label: 'Kedaluwarsa',
    color: 'bg-red-100 text-red-800 border-red-200',
    bgColor: 'bg-red-50'
  }
};

function formatDate(dateString: string) {
  const date = new Date(dateString);
  return date.toLocaleDateString('id-ID', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
}

function getGradeColor(grade: string) {
  switch (grade) {
    case 'A+':
      return 'text-green-600';
    case 'A':
      return 'text-blue-600';
    case 'B+':
      return 'text-yellow-600';
    case 'B':
      return 'text-orange-600';
    default:
      return 'text-gray-600';
  }
}

export default function CertificateVerifyPage({ params }: { params: { id: string } }) {
  const certificate = certificates.find(cert => cert.id === params.id);

  if (!certificate) {
    notFound();
  }

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
      <div className={cn(
        "bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden max-w-4xl w-full",
        statusConfig[certificate.status as keyof typeof statusConfig].bgColor
      )}>
        {/* Header */}
        <div className="bg-gradient-to-r from-blue-600 to-purple-600 p-6 text-white">
          <div className="flex items-start justify-between">
            <div className="flex-1">
              <div className="flex items-center mb-2">
                <TrophyIcon className="h-6 w-6 mr-2" />
                <span className={cn(
                  "px-3 py-1 rounded-full text-sm font-medium border",
                  statusConfig[certificate.status as keyof typeof statusConfig].color,
                  "bg-white"
                )}>
                  {statusConfig[certificate.status as keyof typeof statusConfig].label}
                </span>
              </div>
              <h3 className="text-lg font-semibold mb-2">{certificate.title}</h3>
              <p className="text-blue-100 text-sm">{certificate.course}</p>
            </div>
            <div className="text-right">
              <div className={cn(
                "text-2xl font-bold",
                getGradeColor(certificate.grade)
              )}>
                {certificate.grade}
              </div>
              <div className="text-blue-100 text-sm">{certificate.score}%</div>
            </div>
          </div>
        </div>

        {/* Content */}
        <div className="p-6">
          {/* Details */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
              <h4 className="font-semibold text-gray-900 mb-3">Informasi Sertifikat</h4>
              <div className="space-y-3">
                <div>
                  <p className="text-sm text-gray-600">Nomor Sertifikat</p>
                  <p className="font-medium text-gray-900">{certificate.certificateNumber}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Credential ID</p>
                  <p className="font-medium text-gray-900">{certificate.credentialId}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Penerbit</p>
                  <p className="font-medium text-gray-900">{certificate.issuer}</p>
                </div>
              </div>
            </div>
            <div>
              <h4 className="font-semibold text-gray-900 mb-3">Tanggal</h4>
              <div className="space-y-3">
                <div>
                  <p className="text-sm text-gray-600">Tanggal Terbit</p>
                  <p className="font-medium text-gray-900">{formatDate(certificate.issuedDate)}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Berlaku Hingga</p>
                  <p className="font-medium text-gray-900">{formatDate(certificate.expiryDate)}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Status</p>
                  <span className={cn(
                    "px-3 py-1 rounded-full text-sm font-medium border",
                    statusConfig[certificate.status as keyof typeof statusConfig].color
                  )}>
                    {statusConfig[certificate.status as keyof typeof statusConfig].label}
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* Skills */}
          <div className="mb-6">
            <h4 className="font-semibold text-gray-900 mb-3">Kompetensi yang Diperoleh</h4>
            <div className="flex flex-wrap gap-2">
              {certificate.skills.map((skill: string, index: number) => (
                <span key={index} className="px-3 py-1 bg-blue-100 text-blue-700 text-sm rounded-full">
                  {skill}
                </span>
              ))}
            </div>
          </div>

          {/* Verification Message */}
          <div className="text-center py-4 bg-green-50 rounded-lg">
            <p className="text-green-700 font-medium">Sertifikat ini valid dan telah diverifikasi oleh sistem LMS BGN Academy.</p>
          </div>
        </div>
      </div>
    </div>
  );
}