'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';

import ConsultationWindow from '@/components/Dashboard/patient/ConsultationWindow';
import DoctorList from '@/components/Dashboard/patient/DoctorList';
import GeneralConsultationForm from '@/components/Dashboard/patient/GeneralConsultationForm';
import EmergencyGuidanceModal from '@/components/Dashboard/patient/EmergencyGuidanceModal';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';

const plans = [
  {
    id: 'membership',
    name: 'Membership',
    price: 1000,
    duration: 'Quarterly',
    type: 'Required Registration',
    features: [
      'Access Med Bridge Afrik services',
      'Basic onboarding and support',
    ],
  },
  {
    id: 'triage',
    name: 'Triage',
    price: 45000,
    type: 'Pay-as-you-Go',
    features: [
      'Initial condition assessment',
      'Diagnosis by certified clinicians',
      'Next-step recommendations',
    ],
  },
  {
    id: 'guidance',
    name: 'Guidance & Next Steps',
    price: 15000,
    type: 'Pay-as-you-Go',
    features: [
      'Expert medical advice',
      'Treatment or referral plan',
      'Short-term monitoring guidance',
    ],
  },
  {
    id: 'speaking',
    name: 'Speaking Only (Video & Text)',
    price: 10000,
    type: 'Pay-as-you-Go',
    features: [
      'Text and video chat with a doctor',
      'No prescriptions or diagnostics',
      'Quick check-ins or second opinions',
    ],
  },
];

export default function BookAppointmentsPage() {
  const [showEmergencyModal, setShowEmergencyModal] = useState(true);
  const [showPayModal, setShowPayModal] = useState(false);
  const router = useRouter();

  const handleEmergencyConfirm = () => {
    setShowEmergencyModal(false);
    // to check later if the user has registered for the membership and if not, show the pay modal
    setShowPayModal(true);
  };

  const handleSelectPlan = (planId) => {
    router.push(`/dashboard/patient/subscription?plan=${planId}`);
  };

  return (
    <>
      {/* Emergency Notice */}
      <EmergencyGuidanceModal show={showEmergencyModal} onConfirm={handleEmergencyConfirm} />

      {/* Consultation Plans Modal */}
      <Dialog open={showPayModal} onOpenChange={setShowPayModal}>
        <DialogContent className="bg-white max-w-xl text-center ">
          {/* Close Button */}
          <button
            onClick={() => setShowPayModal(false)}
            className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
            aria-label="Close"
          >
            
          </button>

          <DialogHeader>
            <DialogTitle className="text-xl font-bold mb-2">
              Choose a Consultation Plan
            </DialogTitle>
            <p className="text-sm text-gray-600 mb-2">
              To proceed, please review and select a suitable option.
            </p>
          </DialogHeader>

          {/* Membership Info Section */}
          <div className="bg-green-100 border border-green-400 text-green-800 p-4 rounded-xl">
            <h4 className="font-bold text-lg mb-1">₦1,000 Quarterly Registration</h4>
            <p className="text-sm mb-2">
              This is required to access Med Bridge Afrik services.
            </p>
            <Link href="/dashboard/patient/subscription" className="text-blue-600 underline text-sm">
              Already registered? Click here to pay and access services
            </Link>
          </div>

          {/* Pay-as-you-go Options */}
          <div className="grid gap-4 mt-6">
            {plans
              .filter((plan) => plan.id !== 'membership')
              .map((plan) => (
                <Button
                  key={plan.id}
                  className="w-full px-5 py-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl shadow-md transition duration-200 ease-in-out"
                  onClick={() => handleSelectPlan(plan.id)}
                >
                  <div className="flex flex-col w-full text-left">
                    <div className="flex justify-between items-center mb-1">
                      <h3 className="text-lg font-semibold">{plan.name}</h3>
                      <span className="text-base font-bold">₦{plan.price.toLocaleString()}</span>
                    </div>
                  </div>
                </Button>
              ))}
          </div>
        </DialogContent>
      </Dialog>

      {/* Main Booking Section */}
      {
        !showEmergencyModal && !showPayModal && (
          <main className="p-4 space-y-6">
            <div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4">
              ⚠️ If this is a life-threatening emergency, contact our <strong>private partners</strong> or go to A&E immediately.
            </div>

            <GeneralConsultationForm />
            <ConsultationWindow />
            <DoctorList />
          </main>
        )
      }
    </>
  );
}
