import React from 'react';
import prisma from '@/lib/prisma';
import { notFound } from 'next/navigation';
import Link from 'next/link';
import { AudioPlayer } from '@/components/AudioPlayer';

export default async function DictionaryDetailPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;

  const word = await prisma.vocabulary.findUnique({
    where: { slug }
  });

  if (!word) {
    notFound();
  }

  // Parse part of speech arrays safely
  let pos = [];
  try {
    pos = JSON.parse(word.partOfSpeech);
  } catch(e) {}
  
  let posShort = [];
  try {
    posShort = JSON.parse(word.partOfSpeechShort);
  } catch(e) {}

  return (
    <main className="min-h-[calc(100vh-75px)] bg-gray-50 py-6 px-4 md:py-8 flex flex-col justify-center">
      <div className="w-full max-w-2xl mx-auto">
        
        {/* Navigation */}
        <div className="mb-4">
          <Link href="/dashboard" className="inline-flex items-center gap-2 text-gray-500 hover:text-blue-600 transition-colors font-semibold text-sm">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
            Kembali ke Ruang Belajar
          </Link>
        </div>

        {/* Dictionary Card */}
        <div className="bg-white rounded-[24px] p-6 md:p-10 shadow-xl border border-gray-100 relative overflow-hidden">
          {/* Decorative subtle gradient */}
          <div className="absolute top-0 right-0 w-48 h-48 bg-gradient-to-bl from-blue-50 to-transparent rounded-bl-full opacity-50 pointer-events-none"></div>

          <div className="relative z-10">
            {/* Badges */}
            <div className="flex flex-wrap gap-2 mb-6">
              <span className="px-3 py-1 bg-gray-900 text-white text-[10px] md:text-xs font-bold uppercase tracking-widest rounded-full">
                Level {word.level}
              </span>
              {pos.map((p: string, idx: number) => (
                <span key={idx} className="px-3 py-1 bg-blue-50 text-blue-700 text-[10px] md:text-xs font-bold uppercase tracking-widest rounded-full">
                  {p}
                </span>
              ))}
              {word.infinitive && (
                <span className="px-3 py-1 bg-purple-50 text-purple-700 text-[10px] md:text-xs font-bold uppercase tracking-widest rounded-full">
                  Infinitive
                </span>
              )}
            </div>

            {/* Word & IPA */}
            <h1 className="text-5xl md:text-6xl font-black text-gray-900 mb-4 tracking-tight">
              {word.word}
            </h1>
            
            <div className="flex flex-col gap-1 mb-6 text-lg font-medium text-gray-500">
              {word.ipaUk && <span>🇬🇧 {word.ipaUk}</span>}
              {word.ipaUs && <span>🇺🇸 {word.ipaUs}</span>}
            </div>

            {/* Audio Controls */}
            <div className="mb-8">
              <AudioPlayer word={word.word} audioUs={word.audioUs} audioUk={word.audioUk} />
            </div>

            {/* Translation Area */}
            <div className="pt-6 border-t border-gray-100">
              <h3 className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2">Terjemahan</h3>
              <p className="text-2xl md:text-3xl font-bold text-gray-900 leading-tight">
                {word.translation}
              </p>
            </div>
          </div>
        </div>

      </div>
    </main>
  );
}