import { useState } from "react";
import { createFileRoute } from "@tanstack/react-router";
import { Check, ChevronDown } from "lucide-react";
import { SectionHeading } from "@/components/site/PageHero";

export const Route = createFileRoute("/patient-info")({
  head: () => ({
    meta: [
      { title: "Patient Information — Ward 8 Gynaecology & Obstetrics, JPMC" },
      {
        name: "description",
        content:
          "What to bring, the OPD visit process, ward visiting guidelines, and frequently asked questions for patients of Ward 8, JPMC Karachi.",
      },
      { property: "og:title", content: "Patient Information Guide — Ward 8, JPMC" },
      {
        property: "og:description",
        content: "Everything you need to know before your visit to Ward 8, JPMC Karachi.",
      },
    ],
  }),
  component: PatientInfoPage,
});

/* ── English data ── */

const bring = [
  "National Identity Card (CNIC) or B-Form for children",
  "Previous medical records, reports, and prescriptions",
  "Referral letter (if referred from another facility)",
  "Blood group card (if available)",
  "Any previous ultrasound reports",
  "List of current medications",
];

const steps = [
  {
    title: "Registration",
    body: "Register at the OPD reception desk. Bring your CNIC. Registration is free.",
  },
  {
    title: "Triage & Vitals",
    body: "A nurse will record your blood pressure, weight, and initial health information.",
  },
  {
    title: "Doctor Consultation",
    body: "You will be seen by a qualified doctor or registrar. Consultants are available for complex cases.",
  },
  {
    title: "Investigations",
    body: "Blood tests, urine tests, or ultrasound may be arranged if needed — usually on site.",
  },
  {
    title: "Follow-Up",
    body: "A follow-up appointment date will be given. Bring this paperwork to your next visit.",
  },
];

const etiquette = [
  "Visiting hours: 4:00 PM – 6:00 PM daily (subject to ward conditions)",
  "Only two visitors per patient at a time",
  "Children under 12 are not permitted in the ward",
  "Mobile phones must be on silent; photography is not permitted",
  "Please wash hands before and after visiting",
  "Visitors must not bring food or drinks into the ward without permission",
  "Follow all instructions from nursing staff at all times",
];

/* ── Urdu data ── */

const bringUrdu = [
  "اصل شناختی کارڈ (CNIC) یا بچوں کے لیے B-Form",
  "پرانی میڈیکل رپورٹس، ٹیسٹ اور ڈاکٹر کی پرچیاں",
  "ریفرل لیٹر یا پرچی (اگر کسی اور ہسپتال سے بھیجا گیا ہو)",
  "بلڈ گروپ کارڈ (اگر موجود ہو)",
  "پرانی الٹراساؤنڈ رپورٹس",
  "آج کل جو دوائیاں چل رہی ہیں ان کا نام یا پرچی",
];

const stepsUrdu = [
  {
    title: "پرچی بنوانا",
    body: "OPD کاؤنٹر پر پرچی بنوائیں۔ اپنا شناختی کارڈ ساتھ لائیں۔ پرچی بالکل مفت ہے۔",
  },
  {
    title: "ابتدائی جانچ",
    body: "نرس آپ کا بلڈ پریشر، وزن اور صحت کی بنیادی معلومات لکھے گی۔",
  },
  {
    title: "ڈاکٹر سے معائنہ",
    body: "ڈاکٹر یا رجسٹرار آپ کا معائنہ کریں گے۔ ضرورت پر سینئر کنسلٹنٹ سے بھی ملوایا جائے گا۔",
  },
  {
    title: "ٹیسٹ اور الٹراساؤنڈ",
    body: "ضرورت ہونے پر خون، پیشاب کے ٹیسٹ یا الٹراساؤنڈ کروایا جائے گا — جو ہسپتال میں ہی ہو جاتے ہیں۔",
  },
  {
    title: "اگلی ملاقات (فالو اپ)",
    body: "اگلے معائنے کی تاریخ دی جائے گی۔ اگلی بار آتے وقت تمام پرچیاں اور رپورٹس ساتھ لائیں۔",
  },
];

const etiquetteUrdu = [
  "ملاقات کا وقت: روز شام 4 بجے سے شام 6 بجے تک (وارڈ کے حالات کے مطابق)",
  "ایک وقت میں صرف 2 لوگ ایک مریض سے مل سکتے ہیں",
  "12 سال سے کم عمر بچوں کو وارڈ میں آنے کی اجازت نہیں ہے",
  "موبائل فون سائلنٹ پر رکھیں۔ وارڈ میں تصویر یا ویڈیو بنانا منع ہے",
  "مریض سے ملنے سے پہلے اور بعد میں صابن سے ہاتھ دھوئیں",
  "بغیر اجازت وارڈ میں باہر کا کھانا پینا لانا منع ہے",
  "ڈاکٹرز اور نرسنگ سٹاف کی تمام ہدایات پر ہمیشہ عمل کریں",
];

const faqsBilingual = [
  {
    q: "Are all services really free?",
    a: "Yes. As a government public hospital, all basic obstetric and gynaecological services at Ward 8 are provided free of charge. Some specialised investigations or medicines may have a nominal subsidised cost. No patient is turned away for financial reasons.",
    qUrdu: "کیا واقعی سب علاج مفت ہے؟",
    aUrdu: "جی ہاں۔ یہ سرکاری ہسپتال ہے اور وارڈ 8 میں زچگی اور گائنی کا بنیادی علاج بالکل مفت ہے۔ بعض خاص ٹیسٹ یا دوائیوں کی معمولی قیمت ہو سکتی ہے۔ کسی بھی مریض کو پیسوں کی وجہ سے واپس نہیں کیا جاتا۔",
  },
  {
    q: "Do I need an appointment for OPD?",
    a: "Walk-in patients are welcome during OPD hours (Tuesday–Friday, 8:00 AM–2:00 PM). Emergency cases are seen at any time, 24/7. For follow-up visits, your doctor will give you a specific date.",
    qUrdu: "کیا OPD کے لیے پہلے سے وقت لینا ضروری ہے؟",
    aUrdu: "نہیں۔ OPD کے اوقات میں (منگل سے جمعہ، صبح 8 سے دوپہر 2 بجے تک) آپ بغیر اپائنٹمنٹ آ سکتے ہیں۔ ایمرجنسی مریضوں کو ہر وقت دیکھا جاتا ہے۔ فالو اپ کے لیے ڈاکٹر آپ کو تاریخ دے گا۔",
  },
  {
    q: "What do I do in an obstetric emergency outside OPD hours?",
    a: "Go directly to the Emergency Department at any time. Emergency obstetric care is available 24 hours a day, 7 days a week. You may also call our emergency helpline before arriving.",
    qUrdu: "OPD بند ہونے کے بعد ایمرجنسی ہو تو کیا کریں؟",
    aUrdu: "سیدھا ایمرجنسی میں آ جائیں۔ زچگی کی ایمرجنسی کا علاج 24 گھنٹے، ہفتے کے ساتوں دن دستیاب ہے۔ آنے سے پہلے ہسپتال کی ہیلپ لائن پر فون بھی کر سکتے ہیں۔",
  },
  {
    q: "Can my husband or female relative accompany me during examination?",
    a: "Female relatives may be permitted to accompany you during consultation, subject to space and clinical circumstances. Please ask the nursing staff at reception.",
    qUrdu: "کیا معائنے کے دوران خاوند یا خاتون رشتہ دار ساتھ آ سکتے ہیں؟",
    aUrdu: "خواتین رشتہ دار معائنے کے وقت ساتھ آ سکتی ہیں — جگہ اور حالات کے مطابق اجازت دی جاتی ہے۔ استقبالیہ پر نرسنگ سٹاف سے پوچھ لیں۔",
  },
  {
    q: "I have been referred from another hospital. What should I bring?",
    a: "Bring your referral letter, all previous reports and scan images, your CNIC, and a list of any current medications. This helps our doctors assess you quickly and safely.",
    qUrdu: "دوسرے ہسپتال سے بھیجا گیا ہوں — کیا ساتھ لاؤں؟",
    aUrdu: "ریفرل لیٹر، تمام پرانی رپورٹس اور الٹراساؤنڈ تصویریں، شناختی کارڈ اور جو دوائیاں چل رہی ہیں ان کی پرچی ساتھ لائیں۔ اس سے ڈاکٹر آپ کا جلدی اور صحیح معائنہ کر سکیں گے۔",
  },
  {
    q: "Is the ward accessible for patients with mobility difficulties?",
    a: "The hospital has facilities for patients with mobility challenges. Please inform the reception staff on arrival and they will assist you. Wheelchair assistance is available.",
    qUrdu: "کیا چلنے پھرنے میں مشکل والے مریضوں کے لیے سہولت ہے؟",
    aUrdu: "جی ہاں۔ ہسپتال میں ایسے مریضوں کے لیے سہولت موجود ہے۔ آتے ہی استقبالیہ پر بتائیں، عملہ آپ کی مدد کرے گا۔ وہیل چیئر بھی دستیاب ہے۔",
  },
  {
    q: "How long will I wait in OPD?",
    a: "Waiting times vary depending on patient volume. Arriving early in the OPD session (before 9:00 AM) is recommended. Emergency and urgent cases are prioritised at all times.",
    qUrdu: "OPD میں کتنا انتظار کرنا پڑے گا؟",
    aUrdu: "انتظار کا وقت مریضوں کی تعداد پر منحصر ہے۔ صبح جلدی آنا بہتر ہے (9 بجے سے پہلے)۔ ایمرجنسی اور فوری کیسز کو ہمیشہ پہلے دیکھا جاتا ہے۔",
  },
];

function PatientInfoPage() {
  const [open, setOpen] = useState<number | null>(null);

  return (
    <main id="main-content">
      {/* ── Hero with Urdu beneath English ── */}
      <section className="bg-navy py-16 sm:py-20 lg:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6">
          <p className="eyebrow text-gold">Before You Visit</p>
          <h1 className="mt-4 max-w-4xl text-4xl font-bold text-white sm:text-5xl lg:text-6xl">
            Patient Information Guide
          </h1>
          <div className="mt-6 h-1 w-12 rounded-full bg-gold" />
          <p className="mt-7 max-w-2xl text-base leading-relaxed text-white/70 sm:text-lg">
            Everything you need to know before your visit to Ward 8, Gynaecology &amp; Obstetrics, JPMC.
          </p>

          {/* Urdu translation beneath */}
          <div className="mt-10 border-t border-white/15 pt-10" dir="rtl">
            <p className="font-urdu text-sm font-bold tracking-wide text-gold">
              ہسپتال آنے سے پہلے
            </p>
            <h2 className="font-urdu mt-4 text-2xl font-bold text-white sm:text-3xl">
              مریضوں کے لیے ضروری معلومات
            </h2>
            <p className="font-urdu mt-4 max-w-2xl text-base leading-loose text-white/70">
              وارڈ 8 (گائنی شعبہ) جناح ہسپتال، کراچی آنے سے پہلے آپ کو جو ضروری باتیں جاننی چاہیئں وہ سب یہاں دی گئی ہیں۔
            </p>
          </div>
        </div>
      </section>

      {/* ── Section 1: What to Bring — Row-by-Row Aligned Split ── */}
      <section className="py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6">
          {/* Aligned Headers */}
          <div className="grid gap-6 lg:grid-cols-2 lg:gap-16 items-start">
            <div>
              <SectionHeading eyebrow="Preparing for Your Visit" title="What to Bring" />
            </div>
            <div dir="rtl">
              <p className="eyebrow font-urdu text-gold">ہسپتال آنے کی تیاری</p>
              <h2 className="mt-3 font-urdu text-3xl font-bold text-navy sm:text-4xl">ساتھ کیا لائیں؟</h2>
              <div className="mt-5 h-1 w-12 rounded-full bg-teal" />
            </div>
          </div>

          {/* Row-by-row Aligned Cards */}
          <div className="mt-8 space-y-3">
            {bring.map((b, i) => (
              <div key={b} className="grid items-stretch gap-3 lg:grid-cols-2 lg:gap-16">
                {/* English Item */}
                <div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4 text-sm text-navy min-h-[58px]">
                  <Check className="size-4 shrink-0 text-teal" aria-hidden />
                  <span>{b}</span>
                </div>
                {/* Urdu Item */}
                <div
                  dir="rtl"
                  className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-2.5 text-navy min-h-[58px]"
                >
                  <Check className="size-4 shrink-0 text-teal" aria-hidden />
                  <span className="font-urdu text-base">{bringUrdu[i]}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Section 2: OPD Visit Process — Row-by-Row Aligned Split ── */}
      <section className="bg-cream-deep py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6">
          {/* Aligned Headers */}
          <div className="grid gap-6 lg:grid-cols-2 lg:gap-16 items-start">
            <div>
              <SectionHeading eyebrow="What to Expect" title="OPD Visit Process" rule="gold" />
            </div>
            <div dir="rtl">
              <p className="eyebrow font-urdu text-gold">OPD میں کیا ہوگا؟</p>
              <h2 className="mt-3 font-urdu text-3xl font-bold text-navy sm:text-4xl">OPD کا طریقہ کار</h2>
              <div className="mt-5 h-1 w-12 rounded-full bg-gold" />
            </div>
          </div>

          {/* Row-by-row Aligned Steps */}
          <div className="mt-10 space-y-5">
            {steps.map((s, i) => (
              <div key={s.title} className="grid items-stretch gap-5 lg:grid-cols-2 lg:gap-16">
                {/* English Step */}
                <div className="grid grid-cols-[auto_minmax(0,1fr)] gap-5 rounded-xl border border-border bg-card p-6 items-start min-h-[110px]">
                  <span className="grid size-10 shrink-0 place-items-center rounded-full bg-navy font-display text-sm font-bold text-white">
                    {i + 1}
                  </span>
                  <div className="min-w-0">
                    <h3 className="font-display font-bold text-navy">{s.title}</h3>
                    <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{s.body}</p>
                  </div>
                </div>

                {/* Urdu Step */}
                <div
                  dir="rtl"
                  className="grid grid-cols-[auto_minmax(0,1fr)] gap-5 rounded-xl border border-border bg-card p-6 items-start min-h-[110px]"
                >
                  <span className="grid size-10 shrink-0 place-items-center rounded-full bg-navy font-display text-sm font-bold text-white">
                    {i + 1}
                  </span>
                  <div className="min-w-0">
                    <h3 className="font-urdu text-lg font-bold text-navy">{stepsUrdu[i].title}</h3>
                    <p className="font-urdu mt-1.5 text-base leading-loose text-muted-foreground">{stepsUrdu[i].body}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Section 3: Visiting Guidelines — Row-by-Row Aligned Split ── */}
      <section className="py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6">
          {/* Aligned Headers */}
          <div className="grid gap-6 lg:grid-cols-2 lg:gap-16 items-start">
            <div>
              <SectionHeading eyebrow="Ward Etiquette" title="Visiting Guidelines" />
            </div>
            <div dir="rtl">
              <p className="eyebrow font-urdu text-gold">وارڈ کے اصول</p>
              <h2 className="mt-3 font-urdu text-3xl font-bold text-navy sm:text-4xl">ملاقات کی ہدایات</h2>
              <div className="mt-5 h-1 w-12 rounded-full bg-teal" />
            </div>
          </div>

          {/* Row-by-row Aligned Guidelines */}
          <div className="mt-8 space-y-3">
            {etiquette.map((e, i) => (
              <div key={e} className="grid items-stretch gap-3 lg:grid-cols-2 lg:gap-16">
                {/* English Rule */}
                <div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4 text-sm text-navy min-h-[58px]">
                  <Check className="size-4 shrink-0 text-gold" aria-hidden />
                  <span>{e}</span>
                </div>

                {/* Urdu Rule */}
                <div
                  dir="rtl"
                  className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-2.5 text-navy min-h-[58px]"
                >
                  <Check className="size-4 shrink-0 text-gold" aria-hidden />
                  <span className="font-urdu text-base">{etiquetteUrdu[i]}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── FAQs — Bilingual ── */}
      <section className="bg-cream-deep py-16 sm:py-20">
        <div className="mx-auto max-w-4xl px-4 sm:px-6">
          <SectionHeading eyebrow="Common Questions" title="Frequently Asked Questions" />
          <div className="mt-8 space-y-3">
            {faqsBilingual.map((f, i) => {
              const isOpen = open === i;
              return (
                <div key={f.q} className="rounded-xl border border-border bg-card">
                  <button
                    type="button"
                    onClick={() => setOpen(isOpen ? null : i)}
                    aria-expanded={isOpen}
                    className="grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-4 p-5 text-left"
                  >
                    <div>
                      <span className="font-display text-sm font-bold text-navy">{f.q}</span>
                      <span className="font-urdu mt-2 block text-base font-bold text-navy/70" dir="rtl">{f.qUrdu}</span>
                    </div>
                    <ChevronDown
                      className={`size-5 shrink-0 text-muted-foreground transition-transform ${
                        isOpen ? "rotate-180" : ""
                      }`}
                      aria-hidden
                    />
                  </button>
                  {isOpen ? (
                    <div className="border-t border-border px-5 py-5">
                      <p className="text-sm leading-relaxed text-muted-foreground">
                        {f.a}
                      </p>
                      <p className="font-urdu mt-4 border-t border-border pt-4 text-base leading-loose text-muted-foreground" dir="rtl">
                        {f.aUrdu}
                      </p>
                    </div>
                  ) : null}
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </main>
  );
}