import React from 'react';
import { NewsArticle } from '../types';

interface ArticleModalProps {
  article: NewsArticle | null;
  summary: string | null;
  loading: boolean;
  onClose: () => void;
}

const ArticleModal: React.FC<ArticleModalProps> = ({ article, summary, loading, onClose }) => {
  if (!article) return null;

  return (
    <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 sm:p-6 bg-slate-900/60 backdrop-blur-sm">
      <div className="relative w-full max-w-2xl bg-white rounded-3xl shadow-2xl overflow-hidden animate-in fade-in zoom-in duration-300">
        <button
          onClick={onClose}
          className="absolute top-4 right-4 z-10 p-2 bg-white/50 backdrop-blur hover:bg-white rounded-full transition-all shadow-md"
        >
          <i className="fa-solid fa-xmark text-slate-900"></i>
        </button>

        <div className="h-64 sm:h-80 overflow-hidden">
          <img
            src={article.imageUrl}
            alt={article.title}
            className="w-full h-full object-cover"
          />
        </div>

        <div className="p-6 sm:p-8 max-h-[60vh] overflow-y-auto">
          <div className="flex items-center gap-2 mb-4">
            <span className="px-2.5 py-1 bg-indigo-50 text-indigo-600 rounded-lg text-xs font-bold uppercase tracking-wider">
              {article.source}
            </span>
            <span className="text-xs text-slate-400">•</span>
            <span className="text-xs text-slate-500 font-medium">
              {new Date(article.publishedAt).toLocaleDateString()}
            </span>
          </div>

          <h2 className="text-2xl sm:text-3xl font-bold text-slate-900 mb-6 leading-tight">
            {article.title}
          </h2>

          <div className="space-y-6">
            <div className="bg-slate-50 rounded-2xl p-6 border border-slate-100 relative">
              <div className="absolute -top-3 left-6 px-3 py-1 bg-indigo-600 text-white text-[10px] font-bold rounded-full flex items-center gap-1 shadow-lg">
                <i className="fa-solid fa-sparkles"></i>
                AI ANALYSIS
              </div>
              
              {loading ? (
                <div className="flex flex-col items-center justify-center py-10 space-y-4">
                  <div className="w-10 h-10 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
                  <p className="text-sm font-medium text-slate-500 animate-pulse">
                    Gemini is reading the article...
                  </p>
                </div>
              ) : (
                <div className="prose prose-slate max-w-none">
                  {summary?.split('\n').map((line, idx) => (
                    <p key={idx} className="text-slate-700 leading-relaxed mb-4 last:mb-0">
                      {line}
                    </p>
                  ))}
                </div>
              )}
            </div>

            <div className="flex justify-end pt-4">
              <a
                href={article.url}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 px-6 py-3 bg-slate-900 text-white rounded-2xl font-bold hover:bg-slate-800 transition-all shadow-xl shadow-slate-200"
              >
                Read Full Story
                <i className="fa-solid fa-arrow-up-right-from-square text-xs"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ArticleModal;