import React, { useState } from 'react';
import { InsuranceQuote } from '../types';

interface QuoteCardProps {
  quote: InsuranceQuote;
  onBuy?: () => void;
}

const QuoteCard: React.FC<QuoteCardProps> = ({ quote, onBuy }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  // Specific features to highlight on the front line
  const highlightFeatures = quote.features.filter(f => 
    ['PERSONAL_ACCIDENT_COVER', 'ROAD_SIDE_ASSISTANCE', 'ZERO_DEPRECIATION', 'ENGINE_COVER', 'Tax'].includes(f.label)
  ).slice(0, 4); // Keep only one line worth of features

  return (
    <div className="bg-white rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow overflow-hidden mb-4">
      {/* Top Row: Insurer & Pricing */}
      <div className="p-5 flex flex-col md:flex-row items-center gap-6">
        {/* Insurer Logo & Name */}
        <div className="flex items-center gap-4 w-full md:w-1/3">
          <div className="w-14 h-14 bg-white rounded-lg p-1 flex items-center justify-center border border-slate-100 flex-shrink-0">
            <img src={quote.insurerLogo} alt={quote.insurerName} className="max-h-full max-w-full object-contain" />
          </div>
          <div>
            <h3 className="text-[#1a2b4b] font-bold text-sm leading-tight line-clamp-2">{quote.insurerName}</h3>
            <div className="flex items-center gap-2 mt-1">
              <span className="bg-emerald-50 text-emerald-600 text-[9px] font-black px-1.5 py-0.5 rounded uppercase border border-emerald-100">Quick Approval</span>
            </div>
          </div>
        </div>

        {/* IDV Value Display */}
        <div className="flex-1 flex items-center justify-center md:border-x border-slate-100">
          <div className="text-center md:px-4">
            <p className="text-[10px] text-slate-400 uppercase font-black tracking-widest mb-0.5">IDV Value</p>
            <p className="text-sm font-bold text-[#1a2b4b]">₹ {quote.idvValue.toLocaleString()}</p>
          </div>
        </div>

        {/* Action & Price */}
        <div className="flex items-center gap-4 w-full md:w-auto justify-between md:justify-end">
          <div className="text-right">
             <p className="text-[10px] text-slate-400 font-bold line-through">₹ {(quote.premium + 150).toLocaleString()}</p>
             <p className="text-2xl font-black text-[#1a2b4b] leading-none">
                <span className="text-xs font-bold mr-0.5">₹</span>
                {quote.premium.toLocaleString()}
             </p>
          </div>
          <button 
            onClick={onBuy}
            className="bg-[#2b458c] hover:bg-[#1a2b4b] text-white px-8 py-3 rounded-xl font-black text-sm transition-all shadow-lg shadow-[#2b458c]/10"
          >
            BUY NOW
          </button>
        </div>
      </div>

      {/* NEW SECTION: Key features in one line below Buy Now */}
      <div className="px-5 pb-4">
        <div className="flex flex-wrap gap-4 items-center">
          <span className="text-[9px] font-black text-slate-400 uppercase tracking-widest mr-2">Key Benefits:</span>
          {highlightFeatures.map((f, i) => (
            <div key={i} className="flex items-center gap-1.5">
              <svg className="w-3 h-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7" /></svg>
              <span className="text-[10px] text-[#1a2b4b] font-bold">
                {f.label.replace(/_/g, ' ')}: <span className="text-slate-500 font-black">{typeof f.value === 'number' && f.value > 1000 ? `₹${(f.value/100000).toFixed(1)}L` : f.value}</span>
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* Expand/Collapse Toggle Bar */}
      <button 
        onClick={() => setIsExpanded(!isExpanded)}
        className="w-full py-2 bg-slate-50/50 border-t border-slate-50 flex items-center justify-center gap-2 hover:bg-slate-50 transition-colors"
      >
        <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">
          {isExpanded ? 'Hide Details' : 'View All Policy Features'}
        </span>
        <svg 
          className={`w-3 h-3 text-slate-400 transition-transform duration-300 ${isExpanded ? 'rotate-180' : ''}`} 
          fill="none" stroke="currentColor" viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
        </svg>
      </button>

      {/* Expanded Content */}
      {isExpanded && (
        <div className="p-6 bg-white border-t border-slate-100 animate-in fade-in slide-in-from-top-2 duration-300">
          <h4 className="text-[#1a2b4b] text-[10px] font-black uppercase tracking-[0.2em] mb-4 opacity-50">Detailed Coverage & Breakdown</h4>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-2">
            {quote.features.map((feature, idx) => (
              <div key={idx} className="flex items-center justify-between gap-2 text-[10px] py-1 border-b border-slate-50 last:border-0">
                <div className="flex items-center gap-2 overflow-hidden">
                  <svg className="w-3 h-3 text-emerald-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7" />
                  </svg>
                  <span className="text-slate-500 font-bold uppercase tracking-tight truncate">{feature.label.replace(/_/g, ' ')}</span>
                </div>
                <span className="text-[#1a2b4b] font-black flex-shrink-0">
                   {feature.value === true || feature.value === 'True' || feature.value === 'Included' || feature.value === 'Yes' ? 'Yes' : 
                    feature.value === false || feature.value === 'False' || feature.value === 'No' ? 'No' : 
                    feature.value}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default QuoteCard;