'use client';

import { useState } from 'react';

export default function EmergencyGuidanceModal({ show, onConfirm }) {
  const [confirmed, setConfirmed] = useState(false);

  if (!show) return null;

  return (
    <div className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50 px-4">
      <div className="bg-white max-w-3xl p-8 rounded-md shadow-xl border border-gray-300 overflow-y-auto max-h-[90vh] font-serif text-gray-800">
        <h2 className="text-2xl font-bold text-red-700 mb-4 border-b border-gray-300 pb-2">
          ⚠️ When Not to Use This Service
        </h2>

        <p className="mb-4 leading-relaxed text-[15px]">
          You should <strong>not use this service</strong> and should contact our <strong>private partners</strong> or attend Accident & Emergency (A&E) if you (or the person you are submitting a request for) has a life-threatening emergency, such as:
        </p>

        <ul className="list-disc pl-6 space-y-2 mb-6 text-[15px] leading-relaxed">
          <li>Signs of a heart attack – Chest pain, pressure, heaviness, or tightness.</li>
          <li>Signs of a stroke – Face drooping, arm weakness, or speech difficulty.</li>
          <li>Seizure (fit) – Uncontrolled shaking or unconsciousness.</li>
          <li>Choking – On liquids or solids currently.</li>
          <li>Suicide attempt – Taking something harmful or self-harming.</li>
          <li>Severe difficulty breathing – Gasping, grunting, or ribcage sucking in.</li>
          <li>Unable to stay awake – Eyes closing involuntarily.</li>
          <li>Blue, grey, pale, or blotchy skin, tongue, or lips.</li>
          <li>Limp and floppy – Head falls in any direction.</li>
          <li>Heavy bleeding – Continuous or pooling.</li>
          <li>Severe injuries – From major accidents or assault.</li>
          <li>Sudden, rapid swelling – Of lips, throat, or tongue.</li>
          <li>Sudden confusion – Agitation, disorientation, or inability to recall name/age.</li>
        </ul>

        <div className="mt-6 border-t border-gray-200 pt-4">
          <label className="flex items-start space-x-3 text-sm">
            <input
              type="checkbox"
              className="mt-1 w-4 h-4 text-green-600 border-gray-300 focus:ring-green-500"
              onChange={(e) => setConfirmed(e.target.checked)}
            />
            <span>
              I confirm that none of the above emergency symptoms apply to me.
            </span>
          </label>
        </div>

        <div className="mt-6 text-right">
          <button
            onClick={() => confirmed && onConfirm()}
            disabled={!confirmed}
            className={`px-6 py-2 rounded-md text-white text-sm font-medium transition-colors duration-200 ${confirmed
              ? 'bg-green-600 hover:bg-green-700'
              : 'bg-gray-400 cursor-not-allowed'
              }`}
          >
            Proceed with Consultation
          </button>
        </div>
      </div>
    </div>
  );
}
