import React, { useState } from 'react';
import { PRACTICE_INFO } from '../data/mockData';
import { X, Phone, Mail, MapPin, Clock, MessageSquare, Send, CheckCircle2, ShieldAlert } from 'lucide-react';

interface ContactModalProps {
  isOpen: boolean;
  onClose: () => void;
  onOpenBooking: () => void;
}

export const ContactModal: React.FC<ContactModalProps> = ({
  isOpen,
  onClose,
  onOpenBooking
}) => {
  const [senderName, setSenderName] = useState("");
  const [senderPhone, setSenderPhone] = useState("");
  const [senderMsg, setSenderMsg] = useState("");
  const [sent, setSent] = useState(false);

  if (!isOpen) return null;

  const handleSendMessage = (e: React.FormEvent) => {
    e.preventDefault();
    if (!senderName || !senderPhone) return;
    setSent(true);
    setTimeout(() => {
      setSent(false);
      setSenderName("");
      setSenderPhone("");
      setSenderMsg("");
      onClose();
    }, 2500);
  };

  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-slate-900 to-primary p-6 text-white relative flex items-center justify-between">
          <div>
            <span className="text-xs font-semibold uppercase tracking-wider text-secondary block mb-1">
              Dr. Matseke Surgery
            </span>
            <h2 className="text-xl sm:text-2xl font-bold">Contact & Practice Information</h2>
          </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">
          
          {/* Direct contact buttons grid */}
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <a
              href={`tel:${PRACTICE_INFO.phone.replace(/\s+/g, '')}`}
              className="bg-primary/10 hover:bg-primary/20 border border-primary/30 p-4 rounded-xl text-center transition-all group"
            >
              <div className="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mx-auto mb-2 group-hover:scale-110 transition-transform">
                <Phone className="w-5 h-5" />
              </div>
              <span className="block text-xs text-slate-500 font-semibold uppercase">Reception Phone</span>
              <span className="block text-sm font-bold text-slate-900 mt-0.5">{PRACTICE_INFO.phone}</span>
            </a>

            <a
              href={`https://wa.me/${PRACTICE_INFO.whatsapp.replace(/[^0-9]/g, '')}`}
              target="_blank"
              rel="noreferrer"
              className="bg-secondary/10 hover:bg-secondary/20 border border-secondary/30 p-4 rounded-xl text-center transition-all group"
            >
              <div className="w-10 h-10 rounded-full bg-secondary text-white flex items-center justify-center mx-auto mb-2 group-hover:scale-110 transition-transform">
                <MessageSquare className="w-5 h-5" />
              </div>
              <span className="block text-xs text-slate-500 font-semibold uppercase">WhatsApp Chat</span>
              <span className="block text-sm font-bold text-slate-900 mt-0.5">{PRACTICE_INFO.whatsapp}</span>
            </a>

            <a
              href={`mailto:${PRACTICE_INFO.email}`}
              className="bg-slate-100 hover:bg-slate-200 border border-slate-300 p-4 rounded-xl text-center transition-all group"
            >
              <div className="w-10 h-10 rounded-full bg-slate-800 text-white flex items-center justify-center mx-auto mb-2 group-hover:scale-110 transition-transform">
                <Mail className="w-5 h-5" />
              </div>
              <span className="block text-xs text-slate-500 font-semibold uppercase">Email Reception</span>
              <span className="block text-xs font-bold text-slate-900 mt-0.5 truncate">{PRACTICE_INFO.email}</span>
            </a>
          </div>

          {/* Location & Hours */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-slate-50 p-4 rounded-xl border border-slate-200">
              <div className="flex items-center space-x-2 text-primary font-bold text-sm mb-2">
                <MapPin className="w-4 h-4" />
                <span>Practice Address</span>
              </div>
              <p className="text-xs sm:text-sm text-slate-700 leading-relaxed font-medium">
                {PRACTICE_INFO.address}
              </p>
              <p className="text-xs text-slate-500 mt-2">
                * Ample secure patient parking available in the medical centre basement. Wheelchair accessible lift directly to Suite 104.
              </p>
            </div>

            <div className="bg-slate-50 p-4 rounded-xl border border-slate-200">
              <div className="flex items-center space-x-2 text-secondary font-bold text-sm mb-2">
                <Clock className="w-4 h-4" />
                <span>Operating Hours</span>
              </div>
              <div className="space-y-1.5 text-xs">
                {PRACTICE_INFO.hours.map((h, idx) => (
                  <div key={idx} className="flex justify-between items-center py-1 border-b border-slate-200/60 last:border-0">
                    <span className="text-slate-600 font-medium">{h.day}</span>
                    <span className={`font-semibold ${h.isOpen ? 'text-slate-900' : 'text-amber-700'}`}>
                      {h.time}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Quick Message Form */}
          <div className="border-t border-slate-200 pt-6">
            <h3 className="text-sm font-bold text-slate-800 uppercase tracking-wider mb-3">
              Send a Quick Inquiry to Reception
            </h3>
            {sent ? (
              <div className="bg-secondary/10 border border-secondary text-secondary-dark p-4 rounded-xl text-center text-sm font-semibold flex items-center justify-center space-x-2">
                <CheckCircle2 className="w-5 h-5" />
                <span>Message sent! Our reception team will call or WhatsApp you shortly.</span>
              </div>
            ) : (
              <form onSubmit={handleSendMessage} className="space-y-3">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  <input
                    type="text"
                    required
                    value={senderName}
                    onChange={(e) => setSenderName(e.target.value)}
                    placeholder="Your Name & Surname *"
                    className="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-sm focus:ring-2 focus:ring-primary focus:outline-none"
                  />
                  <input
                    type="tel"
                    required
                    value={senderPhone}
                    onChange={(e) => setSenderPhone(e.target.value)}
                    placeholder="Your Phone / WhatsApp *"
                    className="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-sm focus:ring-2 focus:ring-primary focus:outline-none"
                  />
                </div>
                <textarea
                  rows={2}
                  value={senderMsg}
                  onChange={(e) => setSenderMsg(e.target.value)}
                  placeholder="How can we assist you? (e.g. general question or medical aid query)"
                  className="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-sm focus:ring-2 focus:ring-primary focus:outline-none resize-none"
                />
                <button
                  type="submit"
                  className="bg-slate-900 hover:bg-slate-800 text-white px-6 py-2.5 rounded-xl font-semibold text-sm transition-all flex items-center justify-center space-x-2 w-full sm:w-auto"
                >
                  <Send className="w-4 h-4" />
                  <span>Send Message to Reception</span>
                </button>
              </form>
            )}
          </div>

          {/* Emergency Notice */}
          <div className="bg-red-50 border border-red-200 rounded-xl p-3.5 flex items-start space-x-3 text-xs text-red-900">
            <ShieldAlert className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
            <div>
              <strong className="block font-bold text-red-950 mb-0.5">After-Hours Acute Emergencies:</strong>
              If you require emergency hospital admission outside our operating hours, please proceed immediately to Netcare Sunninghill or Mediclinic Morningside Emergency Room.
            </div>
          </div>

        </div>

        {/* Footer */}
        <div className="bg-slate-50 px-6 py-4 border-t border-slate-100 flex items-center justify-between">
          <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();
              onOpenBooking();
            }}
            className="bg-primary hover:bg-primary-dark text-white px-6 py-2 rounded-xl font-bold text-sm shadow-md transition-all ml-auto"
          >
            Book Appointment Instead
          </button>
        </div>

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