import React from 'react';
import { ServiceItem } from '../types';
import { IconRenderer } from './IconRenderer';
import { X, CheckCircle2, Clock, ShieldCheck, AlertCircle, Calendar, ArrowRight } from 'lucide-react';

interface ServiceDetailModalProps {
  service: ServiceItem | null;
  onClose: () => void;
  onBookThisService: (serviceId: string) => void;
}

export const ServiceDetailModal: React.FC<ServiceDetailModalProps> = ({
  service,
  onClose,
  onBookThisService
}) => {
  if (!service) return null;

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4 animate-in fade-in duration-200">
      <div className="bg-white rounded-2xl max-w-2xl w-full overflow-hidden shadow-2xl border border-slate-100 transition-all">
        
        {/* Header */}
        <div className="bg-gradient-to-r from-primary to-secondary p-6 text-white relative flex items-start justify-between">
          <div className="flex items-center space-x-4">
            <div className="w-14 h-14 rounded-2xl bg-white/10 backdrop-blur-md flex items-center justify-center text-white border border-white/20 shadow-inner flex-shrink-0">
              <IconRenderer name={service.iconName} className="w-7 h-7 stroke-[2]" />
            </div>
            <div>
              <span className="inline-block px-2.5 py-0.5 rounded-full bg-medical-accent/90 text-primary text-[10px] font-bold uppercase tracking-wider mb-1">
                {service.category.toUpperCase()} MEDICAL CARE
              </span>
              <h2 className="text-xl sm:text-2xl font-bold">{service.title}</h2>
            </div>
          </div>
          <button
            onClick={onClose}
            className="w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
            aria-label="Close modal"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Body */}
        <div className="p-6 sm:p-8 max-h-[75vh] overflow-y-auto space-y-6">
          
          {/* Overview */}
          <div>
            <h3 className="text-sm font-bold text-slate-800 uppercase tracking-wider mb-2">
              Clinical Overview
            </h3>
            <p className="text-sm sm:text-base text-slate-600 leading-relaxed">
              {service.fullDescription}
            </p>
          </div>

          {/* Key Details pill box */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 bg-medical-gray p-4 rounded-xl border border-slate-200">
            <div className="flex items-center space-x-2.5">
              <div className="w-8 h-8 rounded-lg bg-white shadow-xs flex items-center justify-center text-primary">
                <Clock className="w-4 h-4" />
              </div>
              <div>
                <span className="block text-[11px] text-slate-500 font-semibold uppercase">Est. Consultation Time</span>
                <span className="text-sm font-bold text-slate-800">{service.duration}</span>
              </div>
            </div>

            <div className="flex items-center space-x-2.5">
              <div className="w-8 h-8 rounded-lg bg-white shadow-xs flex items-center justify-center text-secondary">
                <ShieldCheck className="w-4 h-4" />
              </div>
              <div>
                <span className="block text-[11px] text-slate-500 font-semibold uppercase">Billing / Tariff</span>
                <span className="text-sm font-bold text-slate-800">{service.priceRange}</span>
              </div>
            </div>
          </div>

          {/* What's Included */}
          <div>
            <h3 className="text-sm font-bold text-slate-800 uppercase tracking-wider mb-3 flex items-center space-x-1.5">
              <CheckCircle2 className="w-4 h-4 text-secondary" />
              <span>What is Included in This Consultation:</span>
            </h3>
            <ul className="space-y-2.5">
              {service.includes.map((inc, idx) => (
                <li key={idx} className="flex items-start space-x-3 text-sm text-slate-700">
                  <span className="w-1.5 h-1.5 rounded-full bg-secondary mt-2 flex-shrink-0" />
                  <span>{inc}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Preparation tips if any */}
          {service.preparation && (
            <div className="bg-amber-50/80 border border-amber-200 rounded-xl p-4 flex items-start space-x-3 text-xs sm:text-sm text-amber-900">
              <AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
              <div>
                <strong className="block font-bold text-amber-950 mb-0.5">Patient Preparation Instruction:</strong>
                {service.preparation}
              </div>
            </div>
          )}

          {/* Medical aid note */}
          <div className="text-xs text-slate-500 bg-slate-50 p-3.5 rounded-xl border border-slate-200/80">
            <strong>Medical Aid & Direct Claims:</strong> We submit claims electronically to Discovery, Bonitas, Momentum, GEMS, Medihelp, Bestmed, and Bankmed. If your plan requires pre-authorization for specialized diagnostics or minor procedures, our reception team will assist you.
          </div>

        </div>

        {/* Footer actions */}
        <div className="bg-slate-50 px-6 py-4 border-t border-slate-100 flex flex-wrap items-center justify-between gap-3">
          <button
            onClick={onClose}
            className="px-5 py-2 rounded-xl font-semibold text-slate-600 hover:bg-slate-200 transition-colors text-sm"
          >
            Close
          </button>
          
          <button
            onClick={() => {
              onClose();
              onBookThisService(service.id);
            }}
            className="bg-primary hover:bg-primary-dark text-white px-6 py-2.5 rounded-xl font-bold text-sm shadow-md transition-all flex items-center space-x-2 active:scale-95 ml-auto"
          >
            <Calendar className="w-4 h-4" />
            <span>Book This Service Online</span>
            <ArrowRight className="w-4 h-4" />
          </button>
        </div>

      </div>
    </div>
  );
};