"use client"

import { Schedule } from "@/components/sections/Schedule";
import { trainData, socialLinks } from "@/data";
import Link from "next/link";
import { Suspense } from "react";
import {
  ChevronRight, Clock, MapPin, Ticket, Train, Calendar,
  CreditCard, ExternalLink, Users, Phone,
} from "lucide-react";

export default function JashoreToDhakaClient() {
  const fromId = "jashore";
  const toId = "dhaka";
  const banglaFrom = "যশোর";
  const banglaTo = "ঢাকা";
  const distance = "280 km";
  const duration = "5-7 hours";

  const availableTrains = trainData.filter((t) => {
    const routes = t.data.routes;
    const sourceIndex = routes.findIndex(
      (r) => r.city.toLowerCase().replace(/_/g, "") === fromId
    );
    const destIndex = routes.findIndex(
      (r) => r.city.toLowerCase().replace(/_/g, "") === toId
    );
    return sourceIndex !== -1 && destIndex !== -1 && destIndex > sourceIndex;
  });

  const trainNames = [
    ...new Set(availableTrains.map((t) => t.data.train_name.split("(")[0].trim())),
  ];

  return (
    <div className="flex flex-col min-h-screen">
      <div className="bg-gradient-to-br from-secondary/10 via-background to-primary/10 pt-24 pb-16 border-b">
        <div className="container px-4">
          <nav className="flex items-center gap-2 text-sm text-muted-foreground mb-6">
            <Link href="/" className="hover:text-primary transition-colors">Home</Link>
            <ChevronRight size={14} />
            <Link href="/schedules" className="hover:text-primary transition-colors">Schedules</Link>
            <ChevronRight size={14} />
            <span className="text-foreground font-medium">Jashore to Dhaka</span>
          </nav>

          <div className="max-w-4xl">
            <div className="flex items-center gap-3 mb-4">
              <div className="p-3 bg-secondary/20 rounded-full">
                <Train className="h-8 w-8 text-secondary" />
              </div>
              <div>
                <p className="text-sm text-muted-foreground font-medium">Train Route</p>
                <p className="text-lg text-secondary font-semibold">{banglaFrom} → {banglaTo}</p>
              </div>
            </div>
            <h1 className="text-3xl md:text-5xl font-bold mb-4 leading-tight">
              Jashore to Dhaka Train Schedule 2026
            </h1>
            <p className="text-xl text-muted-foreground max-w-2xl mb-2">
              Complete guide for traveling from Jashore (Jessore) Railway Station to Dhaka (Kamlapur) via Padma Bridge. Check updated train times, ticket prices, and book online.
            </p>
            <p className="text-lg text-muted-foreground">
              যশোর থেকে ঢাকা ট্রেনের সময়সূচী ও টিকিটের দাম দেখুন। অনলাইনে টিকিট বুক করুন।
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-10 max-w-4xl">
            <div className="flex items-center gap-3 p-4 bg-background rounded-xl border shadow-sm">
              <div className="p-2.5 bg-blue-100 rounded-full text-blue-600"><Clock size={20} /></div>
              <div><p className="text-xs text-muted-foreground">Journey Time</p><p className="font-bold text-lg">{duration}</p></div>
            </div>
            <div className="flex items-center gap-3 p-4 bg-background rounded-xl border shadow-sm">
              <div className="p-2.5 bg-green-100 rounded-full text-green-600"><MapPin size={20} /></div>
              <div><p className="text-xs text-muted-foreground">Distance</p><p className="font-bold text-lg">{distance}</p></div>
            </div>
            <div className="flex items-center gap-3 p-4 bg-background rounded-xl border shadow-sm">
              <div className="p-2.5 bg-purple-100 rounded-full text-purple-600"><Ticket size={20} /></div>
              <div><p className="text-xs text-muted-foreground">Daily Trains</p><p className="font-bold text-lg">{availableTrains.length}</p></div>
            </div>
            <div className="flex items-center gap-3 p-4 bg-background rounded-xl border shadow-sm">
              <div className="p-2.5 bg-orange-100 rounded-full text-orange-600"><CreditCard size={20} /></div>
              <div><p className="text-xs text-muted-foreground">Fare From</p><p className="font-bold text-lg">৳250</p></div>
            </div>
          </div>
        </div>
      </div>

      <div className="container px-4 py-12">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2 space-y-12">
            <section id="schedule">
              <div className="flex items-center gap-3 mb-6">
                <div className="p-2 bg-secondary/10 rounded-lg"><Clock className="h-5 w-5 text-secondary" /></div>
                <h2 className="text-2xl font-bold">Jashore to Dhaka Train Schedule</h2>
              </div>
              <p className="text-muted-foreground mb-6">
                View the complete and updated timetable for all {availableTrains.length} trains from Jashore to Dhaka. Click on any train for detailed route information.
              </p>
              <div className="bg-card rounded-xl border shadow-sm overflow-hidden">
                <Suspense>
                  <Schedule initialStation={fromId} initialToStation={toId} showShareButton={false} />
                </Suspense>
              </div>
            </section>

            <section id="trains">
              <div className="flex items-center gap-3 mb-6">
                <div className="p-2 bg-secondary/10 rounded-lg"><Train className="h-5 w-5 text-secondary" /></div>
                <h2 className="text-2xl font-bold">Trains from Jashore to Dhaka</h2>
              </div>
              <div className="prose prose-slate max-w-none">
                <p>A total of <strong>{availableTrains.length} trains</strong> operate on the Jashore to Dhaka route, connecting the historic city of Jashore (Jessore) with the capital Dhaka.</p>
                <h3>Popular Trains on This Route</h3>
                <ul>
                  {trainNames.slice(0, 8).map((name, idx) => (
                    <li key={idx}><strong>{name}</strong> - {name.toLowerCase().includes("express") ? "Intercity Express" : "Mail/Express"} train with comfortable seating</li>
                  ))}
                </ul>
              </div>
            </section>

            <section id="route-info" className="prose prose-slate max-w-none">
              <div className="flex items-center gap-3 mb-6 not-prose">
                <div className="p-2 bg-secondary/10 rounded-lg"><MapPin className="h-5 w-5 text-secondary" /></div>
                <h2 className="text-2xl font-bold">About Jashore to Dhaka Train Route</h2>
              </div>
              <p>The <strong>Jashore to Dhaka train route</strong> is a vital connection for the people of southwestern Bangladesh heading to the capital. Trains from <strong>Jashore Railway Station</strong> travel through Kushtia, Rajbari, and the Padma Bridge Rail Link before reaching <strong>Dhaka Kamlapur Railway Station</strong>.</p>
              <p>Since the opening of the <strong>Padma Bridge Rail Link</strong> (পদ্মা সেতু রেল লিংক), this journey has become significantly faster, cutting the previous travel time that included lengthy ferry crossings.</p>
              <h3>Key Stations on This Route</h3>
              <ul>
                <li><strong>Jashore</strong> - Starting point, historic city and railway junction</li>
                <li><strong>Kushtia Court</strong> - Stop in Kushtia, home of the Lalon Fakir</li>
                <li><strong>Rajbari</strong> - District headquarters</li>
                <li><strong>Bhanga Junction</strong> - Major stop before Padma Bridge</li>
                <li><strong>Dhaka (Kamlapur)</strong> - Destination, main railway hub of Bangladesh</li>
              </ul>
              <h3>Best Time to Travel</h3>
              <p>The Sundarban Express (725) is a popular overnight option from Khulna that passes through Jashore. For daytime travel, the Benapole Express (795) offers a convenient afternoon departure from Jashore, arriving in Dhaka by evening.</p>
            </section>

            <section id="booking" className="bg-secondary/5 rounded-xl p-8 border">
              <div className="flex items-center gap-3 mb-6">
                <div className="p-2 bg-secondary/10 rounded-lg"><Ticket className="h-5 w-5 text-secondary" /></div>
                <h2 className="text-2xl font-bold">How to Book Jashore to Dhaka Train Tickets</h2>
              </div>
              <div className="prose prose-slate max-w-none">
                <p>Booking train tickets from Jashore to Dhaka is easy:</p>
                <h3>Online Booking (Recommended)</h3>
                <ol>
                  <li>Visit the official <a href="https://eticket.railway.gov.bd/" target="_blank" rel="noopener noreferrer">Bangladesh Railway E-Ticketing Portal</a></li>
                  <li>Create an account or log in</li>
                  <li>Select &quot;Jashore&quot; as origin and &quot;Dhaka&quot; as destination</li>
                  <li>Choose your preferred train and class</li>
                  <li>Complete payment using bKash, Nagad, or card</li>
                </ol>
                <h3>Mobile App Booking</h3>
                <p>Download the <strong>&quot;Rail Sheba&quot;</strong> app for convenient mobile booking with live tracking.</p>
                <h3>Station Counter</h3>
                <p>Visit <strong>Jashore Railway Station</strong> counter (opens 6:00 AM). For guaranteed seats, we recommend booking online 3-5 days in advance.</p>
              </div>
              <a href="https://eticket.railway.gov.bd/" target="_blank" rel="noopener noreferrer" className="inline-flex items-center justify-center gap-2 mt-6 px-6 py-3 bg-secondary text-secondary-foreground rounded-lg font-semibold hover:bg-secondary/90 transition-colors">
                Book Tickets Online <ExternalLink size={18} />
              </a>
            </section>

            <section id="fare">
              <div className="flex items-center gap-3 mb-6">
                <div className="p-2 bg-secondary/10 rounded-lg"><CreditCard className="h-5 w-5 text-secondary" /></div>
                <h2 className="text-2xl font-bold">Jashore to Dhaka Train Ticket Price</h2>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-sm border rounded-lg overflow-hidden">
                  <thead className="bg-muted"><tr><th className="px-4 py-3 text-left font-semibold">Class</th><th className="px-4 py-3 text-left font-semibold">Fare (Approx.)</th><th className="px-4 py-3 text-left font-semibold">Description</th></tr></thead>
                  <tbody className="bg-card">
                    <tr className="border-t"><td className="px-4 py-3 font-medium">Shovan</td><td className="px-4 py-3">৳250 - ৳300</td><td className="px-4 py-3 text-muted-foreground">Economy class, unreserved seating</td></tr>
                    <tr className="border-t"><td className="px-4 py-3 font-medium">Shovan Chair</td><td className="px-4 py-3">৳565</td><td className="px-4 py-3 text-muted-foreground">Reserved comfortable chairs</td></tr>
                    <tr className="border-t"><td className="px-4 py-3 font-medium">Snigdha</td><td className="px-4 py-3">৳1,085</td><td className="px-4 py-3 text-muted-foreground">AC chair with refreshments</td></tr>
                    <tr className="border-t"><td className="px-4 py-3 font-medium">AC Seat (AC_S)</td><td className="px-4 py-3">৳1,296</td><td className="px-4 py-3 text-muted-foreground">Premium AC with extra comfort</td></tr>
                  </tbody>
                </table>
              </div>
              <p className="text-sm text-muted-foreground mt-4">* Prices are approximate and may vary. Check the official e-ticketing portal for exact fares.</p>
            </section>

            <section id="faq">
              <div className="flex items-center gap-3 mb-6">
                <div className="p-2 bg-secondary/10 rounded-lg"><Users className="h-5 w-5 text-secondary" /></div>
                <h2 className="text-2xl font-bold">Frequently Asked Questions</h2>
              </div>
              <div className="space-y-4">
                <details className="group bg-card border rounded-lg" open>
                  <summary className="flex justify-between items-center p-4 font-medium cursor-pointer list-none"><span>How many trains run from Jashore to Dhaka daily?</span><ChevronRight className="transition-transform group-open:rotate-90" size={18} /></summary>
                  <div className="px-4 pb-4 text-muted-foreground">There are {availableTrains.length} trains operating on the Jashore to Dhaka route. These include trains originating from Benapole and Khulna that stop at Jashore.</div>
                </details>
                <details className="group bg-card border rounded-lg">
                  <summary className="flex justify-between items-center p-4 font-medium cursor-pointer list-none"><span>How long does Jashore to Dhaka train take?</span><ChevronRight className="transition-transform group-open:rotate-90" size={18} /></summary>
                  <div className="px-4 pb-4 text-muted-foreground">The journey from Jashore to Dhaka takes approximately 5 to 7 hours depending on the train. Express trains complete the journey faster with fewer stops.</div>
                </details>
                <details className="group bg-card border rounded-lg">
                  <summary className="flex justify-between items-center p-4 font-medium cursor-pointer list-none"><span>Where does the train arrive in Dhaka?</span><ChevronRight className="transition-transform group-open:rotate-90" size={18} /></summary>
                  <div className="px-4 pb-4 text-muted-foreground">All trains from Jashore arrive at Dhaka Kamlapur Railway Station. From there, you can easily connect to any part of Dhaka via Metro Rail, buses, or ride-sharing apps.</div>
                </details>
                <details className="group bg-card border rounded-lg">
                  <summary className="flex justify-between items-center p-4 font-medium cursor-pointer list-none"><span>Is Jashore the same as Jessore?</span><ChevronRight className="transition-transform group-open:rotate-90" size={18} /></summary>
                  <div className="px-4 pb-4 text-muted-foreground">Yes, Jashore is the current official spelling and Jessore is the old spelling. The Bangladesh Railway e-ticketing system uses &quot;Jashore&quot; for booking purposes.</div>
                </details>
                <details className="group bg-card border rounded-lg">
                  <summary className="flex justify-between items-center p-4 font-medium cursor-pointer list-none"><span>Can I book tickets at Jashore Station?</span><ChevronRight className="transition-transform group-open:rotate-90" size={18} /></summary>
                  <div className="px-4 pb-4 text-muted-foreground">Yes, you can purchase tickets at Jashore Railway Station counter. However, for trains originating from Benapole or Khulna that pass through Jashore, seats may already be partially filled — so online booking is strongly recommended.</div>
                </details>
              </div>
            </section>
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            <div className="bg-card p-6 rounded-xl border sticky top-20">
              <h3 className="font-bold text-lg mb-4">Quick Navigation</h3>
              <nav className="space-y-2 text-sm">
                <a href="#schedule" className="block py-2 px-3 rounded-lg hover:bg-muted transition-colors">📅 Train Schedule</a>
                <a href="#trains" className="block py-2 px-3 rounded-lg hover:bg-muted transition-colors">🚂 Available Trains</a>
                <a href="#route-info" className="block py-2 px-3 rounded-lg hover:bg-muted transition-colors">🗺️ Route Information</a>
                <a href="#booking" className="block py-2 px-3 rounded-lg hover:bg-muted transition-colors">🎫 How to Book</a>
                <a href="#fare" className="block py-2 px-3 rounded-lg hover:bg-muted transition-colors">💰 Ticket Prices</a>
                <a href="#faq" className="block py-2 px-3 rounded-lg hover:bg-muted transition-colors">❓ FAQs</a>
              </nav>
            </div>

            <div className="bg-primary/10 p-6 rounded-xl border">
              <h3 className="font-bold text-lg mb-2">Looking for Return Journey?</h3>
              <p className="text-sm text-muted-foreground mb-4">Check the schedule for Dhaka to Jashore trains.</p>
              <Link href="/dhaka-to-jashore" className="inline-flex items-center gap-2 text-primary font-medium hover:underline">
                Dhaka to Jashore Schedule <ChevronRight size={16} />
              </Link>
            </div>

            <div className="bg-muted/30 p-6 rounded-xl border">
              <h3 className="font-bold text-lg mb-4">Related Routes</h3>
              <div className="space-y-3 text-sm">
                <Link href="/khulna-to-dhaka" className="flex items-center justify-between py-2 hover:text-primary transition-colors"><span>Khulna → Dhaka</span><ChevronRight size={16} /></Link>
                <Link href="/rajbari-to-dhaka" className="flex items-center justify-between py-2 hover:text-primary transition-colors"><span>Rajbari → Dhaka</span><ChevronRight size={16} /></Link>
                <Link href="/kushtia-to-dhaka" className="flex items-center justify-between py-2 hover:text-primary transition-colors"><span>Kushtia → Dhaka</span><ChevronRight size={16} /></Link>
                <Link href="/rajshahi-to-dhaka" className="flex items-center justify-between py-2 hover:text-primary transition-colors"><span>Rajshahi → Dhaka</span><ChevronRight size={16} /></Link>
              </div>
            </div>

            <div className="bg-secondary text-secondary-foreground p-6 rounded-xl">
              <h3 className="font-bold text-lg mb-2">Join Our Community</h3>
              <p className="text-secondary-foreground/90 text-sm mb-4">Get real-time train updates and connect with fellow travelers.</p>
              <a href={socialLinks.facebookGroup} target="_blank" rel="noopener noreferrer" className="block w-full py-2.5 bg-background text-foreground text-center rounded-lg font-medium hover:bg-background/90 transition-colors">Join Facebook Group</a>
            </div>

            <div className="bg-card p-6 rounded-xl border">
              <h3 className="font-bold text-lg mb-4">Need Help?</h3>
              <div className="space-y-3 text-sm">
                <div className="flex items-center gap-3"><Phone size={16} className="text-muted-foreground" /><span>Railway Helpline: 131</span></div>
                <a href={socialLinks.facebookPage} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 text-secondary hover:underline"><ExternalLink size={16} /><span>Message us on Facebook</span></a>
              </div>
            </div>
          </div>
        </div>

        <section className="mt-16 py-12 border-t">
          <h2 className="text-2xl font-bold mb-6 text-center">Explore More on Trains of Rajbari</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <Link href="/schedules" className="p-4 bg-card border rounded-xl text-center hover:border-secondary transition-colors"><Calendar className="h-8 w-8 mx-auto mb-2 text-secondary" /><p className="font-medium">All Schedules</p><p className="text-xs text-muted-foreground">View full timetable</p></Link>
            <Link href="/rajbari-to-dhaka" className="p-4 bg-card border rounded-xl text-center hover:border-secondary transition-colors"><MapPin className="h-8 w-8 mx-auto mb-2 text-secondary" /><p className="font-medium">Rajbari → Dhaka</p><p className="text-xs text-muted-foreground">Popular route</p></Link>
            <Link href="/blogs" className="p-4 bg-card border rounded-xl text-center hover:border-secondary transition-colors"><Users className="h-8 w-8 mx-auto mb-2 text-secondary" /><p className="font-medium">Railway Updates</p><p className="text-xs text-muted-foreground">Latest news & stories</p></Link>
            <Link href="/about" className="p-4 bg-card border rounded-xl text-center hover:border-secondary transition-colors"><Train className="h-8 w-8 mx-auto mb-2 text-secondary" /><p className="font-medium">About Us</p><p className="text-xs text-muted-foreground">Our community</p></Link>
          </div>
        </section>
      </div>
    </div>
  );
}
