import React, { useState } from 'react';
import Link from 'next/link';

interface WordCardProps {
  vocabulary: any;
  isLocked: boolean;
  isLearned: boolean;
  onToggleLearned: (id: number, currentStatus: boolean) => void;
  onToggleBookmark?: (id: number, isBookmarked: boolean) => void;
}

export function WordCard({ vocabulary, isLocked, isLearned, onToggleLearned, onToggleBookmark }: WordCardProps) {
  const [animating, setAnimating] = useState(false);
  const [bookmarked, setBookmarked] = useState(false); // Local state for immediate UI feedback

  const handleLearnClick = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setAnimating(true);
    onToggleLearned(vocabulary.id, isLearned);
    setTimeout(() => setAnimating(false), 300);
  };

  const handleBookmarkClick = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    const newStatus = !bookmarked;
    setBookmarked(newStatus);
    if (onToggleBookmark) {
      onToggleBookmark(vocabulary.id, newStatus);
    }
  };

  const playAudio = (e: React.MouseEvent, type: 'us' | 'uk') => {
    e.preventDefault();
    e.stopPropagation();
    const audioUrl = `/api/audio?word=${encodeURIComponent(vocabulary.word)}&type=${type}`;
    const audio = new Audio(audioUrl);
    audio.play().catch(err => console.error("Error playing audio", err));
  };

  if (isLocked) {
    return (
      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 relative overflow-hidden h-[180px] flex flex-col group transition-all">
        <div className="absolute inset-0 bg-gray-50/80 backdrop-blur-[2px] z-10 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
          <div className="bg-gray-900 text-white text-xs font-bold px-3 py-1.5 rounded-full shadow-lg">
            Upgrade untuk buka
          </div>
        </div>
        
        <div className="flex justify-between items-start mb-3 blur-[1px]">
          <h3 className="text-xl font-bold text-gray-900">{vocabulary.word}</h3>
          <span className="text-xs font-semibold bg-gray-100 text-gray-500 px-2 py-1 rounded">
            🔒 {vocabulary.partOfSpeechShort || '...'}
          </span>
        </div>
        
        <div className="flex gap-3 text-sm text-gray-400 mb-4 blur-sm select-none">
          <div className="flex items-center gap-1">
            <span>US: /.../</span>
          </div>
          <div className="flex items-center gap-1">
            <span>UK: /.../</span>
          </div>
        </div>
        
        <div className="mt-auto pt-4 border-t border-gray-100 blur-sm">
          <p className="text-gray-400 font-medium">**********</p>
        </div>
      </div>
    );
  }

  return (
    <Link href={`/dictionary/${vocabulary.slug}`} className="block h-full group">
      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 relative h-full flex flex-col hover:shadow-md transition-shadow">
        
        {/* Top bar: Word + Bookmark */}
        <div className="flex justify-between items-start mb-2">
          <h3 className="text-xl font-bold text-blue-600 group-hover:text-blue-700 transition-colors">
            {vocabulary.word}
          </h3>
          <div className="flex items-center gap-2">
            <span className="text-[10px] font-bold bg-gray-100 text-gray-500 px-2 py-1 rounded-full uppercase tracking-wider">
              {vocabulary.partOfSpeechShort}
            </span>
            <button 
              onClick={handleBookmarkClick}
              className="text-gray-400 hover:text-yellow-500 transition-colors p-1"
              aria-label="Bookmark"
            >
              <svg className={`w-5 h-5 ${bookmarked ? 'text-yellow-500 fill-current' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
              </svg>
            </button>
          </div>
        </div>
        
        {/* Phonetics & Audio Icons */}
        <div className="flex flex-wrap gap-4 text-sm text-gray-500 mb-4 items-center">
          {vocabulary.ipaUs && (
            <div className="flex items-center gap-1.5">
              <button 
                onClick={(e) => playAudio(e, 'us')}
                className="text-blue-500 hover:text-blue-700 bg-blue-50 hover:bg-blue-100 p-1.5 rounded-full transition-colors"
                aria-label="Play US Audio"
              >
                <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clipRule="evenodd" /></svg>
              </button>
              <span className="font-mono text-[13px]">US: {vocabulary.ipaUs}</span>
            </div>
          )}
          
          {vocabulary.ipaUk && (
            <div className="flex items-center gap-1.5">
              <button 
                onClick={(e) => playAudio(e, 'uk')}
                className="text-red-500 hover:text-red-700 bg-red-50 hover:bg-red-100 p-1.5 rounded-full transition-colors"
                aria-label="Play UK Audio"
              >
                <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clipRule="evenodd" /></svg>
              </button>
              <span className="font-mono text-[13px]">UK: {vocabulary.ipaUk}</span>
            </div>
          )}
        </div>
        
        {/* Bottom bar: Translation & Action */}
        <div className="mt-auto pt-4 border-t border-gray-100 flex justify-between items-end gap-2">
          <p className="text-gray-900 font-medium leading-tight flex-1">{vocabulary.translation}</p>
          
          <button 
            onClick={handleLearnClick}
            className={`flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-full transition-all duration-300 ${
              isLearned 
                ? 'bg-green-100 text-green-600 hover:bg-green-200' 
                : 'bg-gray-100 text-gray-400 hover:bg-blue-100 hover:text-blue-600'
            } ${animating ? 'scale-110' : 'scale-100'}`}
            aria-label={isLearned ? "Batal Tandai Hafal" : "Tandai Hafal"}
            title={isLearned ? "Batal Tandai Hafal" : "Tandai Hafal"}
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M5 13l4 4L19 7" />
            </svg>
          </button>
        </div>
      </div>
    </Link>
  );
}