import React, { useState } from 'react';
import { Calendar, Phone, MessageCircle, Sparkles, CheckCircle2, Loader2 } from 'lucide-react';
import { trpc } from '@/lib/trpc';

export const BookingSection: React.FC = () => {
  const [formData, setFormData] = useState({
    name: '',
    mobile: '',
    address: '',
    service: 'फिजियोथेरेपी',
    problem: '',
    date: '',
    time: '',
    message: '',
  });

  const [submitted, setSubmitted] = useState(false);

  const mutation = trpc.clinic.createAppointment.useMutation({
    onSuccess: () => {
      setSubmitted(true);
    },
    onError: (err) => {
      alert('अपॉइंटमेंट बुक करने में त्रुटि: ' + err.message);
    }
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.name || !formData.mobile) {
      alert('कृपया अपना नाम और मोबाइल नंबर दर्ज करें।');
      return;
    }
    mutation.mutate(formData);
  };

  const whatsappUrl = "https://wa.me/919939332200?text=" + encodeURIComponent(
    `नमस्ते स्काई हेल्थ सेंटर, मेरा नाम ${formData.name || 'मरीज'} है। सेवा: ${formData.service}। समस्या: ${formData.problem || formData.message}। समय: ${formData.date} ${formData.time}`
  );

  return (
    <section id="booking" className="py-20 bg-gradient-to-b from-slate-50 to-sky-50/40">
      <div className="container">
        <div className="max-w-4xl mx-auto bg-white rounded-3xl shadow-2xl border border-slate-200/80 overflow-hidden">
          {/* Header Banner */}
          <div className="bg-gradient-to-r from-blue-700 to-sky-600 p-8 sm:p-10 text-white text-center">
            <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/20 text-white text-xs font-bold uppercase tracking-wider mb-3 backdrop-blur-md">
              <Sparkles className="w-3.5 h-3.5" />
              <span>त्वरित अपॉइंटमेंट (Database Backed)</span>
            </div>
            <h2 className="text-3xl sm:text-4xl font-extrabold mb-3">
              अपना समय बुक करें (Book Appointment)
            </h2>
            <p className="text-sky-100 text-sm sm:text-base max-w-xl mx-auto">
              अपनी समस्या साझा करें और क्लिनिक परामर्श या घर पर फिजियोथेरेपी के लिए समय तय करें। डेटाबेस में सुरक्षित सहेजा जाता है।
            </p>
          </div>

          {/* Form Body */}
          <div className="p-8 sm:p-12">
            {submitted ? (
              <div className="text-center py-12 space-y-4">
                <div className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto shadow-md">
                  <CheckCircle2 className="w-10 h-10" />
                </div>
                <h3 className="text-2xl font-bold text-slate-900">धन्यवाद! आपका अपॉइंटमेंट डेटाबेस में दर्ज हो गया है।</h3>
                <p className="text-slate-600 max-w-md mx-auto">
                  हमारी टीम जल्द आपसे संपर्क करेगी और आपके समय की पुष्टि करेगी।
                </p>
                <div className="pt-6 flex flex-wrap justify-center gap-4">
                  <a
                    href={whatsappUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl shadow-md inline-flex items-center gap-2"
                  >
                    <MessageCircle className="w-4 h-4 fill-white" />
                    <span>WhatsApp पर तुरंत बात करें</span>
                  </a>
                  <button
                    onClick={() => {
                      setSubmitted(false);
                      setFormData({
                        name: '',
                        mobile: '',
                        address: '',
                        service: 'फिजियोथेरेपी',
                        problem: '',
                        date: '',
                        time: '',
                        message: '',
                      });
                    }}
                    className="px-6 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-xl"
                  >
                    नया फॉर्म भरें
                  </button>
                </div>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-bold text-slate-700 mb-2">
                      नाम (Full Name) *
                    </label>
                    <input
                      type="text"
                      required
                      value={formData.name}
                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      placeholder="अपना पूरा नाम दर्ज करें"
                      className="w-full px-4 py-3.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-600 text-slate-800 text-sm"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-bold text-slate-700 mb-2">
                      मोबाइल नंबर (Mobile Number) *
                    </label>
                    <input
                      type="tel"
                      required
                      value={formData.mobile}
                      onChange={(e) => setFormData({ ...formData, mobile: e.target.value })}
                      placeholder="10 अंकों का मोबाइल नंबर"
                      className="w-full px-4 py-3.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-600 text-slate-800 text-sm"
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-bold text-slate-700 mb-2">
                      इलाका / पता (Locality / Address)
                    </label>
                    <input
                      type="text"
                      value={formData.address}
                      onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                      placeholder="जैसे: फतेहपुर गोगरी जमालपुर / खगड़िया"
                      className="w-full px-4 py-3.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-600 text-slate-800 text-sm"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-bold text-slate-700 mb-2">
                      आपको किस सेवा की जरूरत है? (Service)
                    </label>
                    <select
                      value={formData.service}
                      onChange={(e) => setFormData({ ...formData, service: e.target.value })}
                      className="w-full px-4 py-3.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-600 text-slate-800 text-sm bg-white"
                    >
                      <option value="फिजियोथेरेपी">फिजियोथेरेपी (Physiotherapy)</option>
                      <option value="त्वचा की समस्या">त्वचा की समस्या (Skin Care)</option>
                      <option value="बालों की समस्या">बालों की समस्या (Hair Care)</option>
                      <option value="जोड़ों का दर्द">जोड़ों का दर्द (Joint Pain)</option>
                      <option value="कमर दर्द">कमर दर्द (Back Pain)</option>
                      <option value="घुटने का दर्द">घुटने का दर्द (Knee Pain)</option>
                      <option value="गर्दन दर्द">गर्दन दर्द (Neck Pain)</option>
                      <option value="अन्य">अन्य (Other)</option>
                    </select>
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
                  <div>
                    <label className="block text-sm font-bold text-slate-700 mb-2">
                      समस्या क्या है? (Problem)
                    </label>
                    <input
                      type="text"
                      value={formData.problem}
                      onChange={(e) => setFormData({ ...formData, problem: e.target.value })}
                      placeholder="संक्षेप में समस्या बताएं"
                      className="w-full px-4 py-3.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-600 text-slate-800 text-sm"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-bold text-slate-700 mb-2">
                      तारीख (Date)
                    </label>
                    <input
                      type="date"
                      value={formData.date}
                      onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                      className="w-full px-4 py-3.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-600 text-slate-800 text-sm bg-white"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-bold text-slate-700 mb-2">
                      समय (Time)
                    </label>
                    <input
                      type="time"
                      value={formData.time}
                      onChange={(e) => setFormData({ ...formData, time: e.target.value })}
                      className="w-full px-4 py-3.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-600 text-slate-800 text-sm bg-white"
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-bold text-slate-700 mb-2">
                    संदेश / विशेष विवरण (Message)
                  </label>
                  <textarea
                    rows={3}
                    value={formData.message}
                    onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                    placeholder="यदि कोई अन्य बात बतानी हो..."
                    className="w-full px-4 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-600 text-slate-800 text-sm"
                  ></textarea>
                </div>

                <div className="pt-4 flex flex-col sm:flex-row sm:flex-wrap items-stretch sm:items-center gap-3 sm:gap-4">
                  <button
                    type="submit"
                    disabled={mutation.isPending}
                    className="w-full sm:flex-1 min-w-0 py-4 px-4 sm:px-8 bg-blue-700 hover:bg-blue-800 disabled:bg-blue-400 text-white font-bold rounded-xl shadow-lg shadow-blue-700/25 transition-all flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap"
                  >
                    {mutation.isPending ? (
                      <>
                        <Loader2 className="w-5 h-5" />
                        <span>सहेजा जा रहा है...</span>
                      </>
                    ) : (
                      <>
                        <Sparkles className="w-5 h-5" />
                        <span>समय बुक करें</span>
                      </>
                    )}
                  </button>

                  <div className="grid grid-cols-2 gap-3 w-full sm:contents">
                    <a
                      href={whatsappUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="w-full sm:w-auto py-4 px-3 sm:px-6 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl shadow-md flex items-center justify-center gap-2 whitespace-nowrap"
                    >
                      <MessageCircle className="w-5 h-5 fill-white shrink-0" />
                      <span>WhatsApp करें</span>
                    </a>

                    <a
                      href="tel:+919939332200"
                      className="w-full sm:w-auto py-4 px-3 sm:px-6 bg-sky-50 hover:bg-sky-100 text-sky-800 font-bold rounded-xl border border-sky-300 flex items-center justify-center gap-2 whitespace-nowrap"
                    >
                      <Phone className="w-5 h-5 text-sky-700 shrink-0" />
                      <span>कॉल करें</span>
                    </a>
                  </div>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};
