"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 DhakaToKushtiaClient() {
  const fromId = "dhaka";
  const toId = "kushtia_court";
  const banglaFrom = "ঢাকা";
  const banglaTo = "কুষ্টিয়া কোর্ট";
  const distance = "200 km";
  const duration = "4-5 hours";

  const availableTrains = trainData.filter((t) => {
    const routes = t.data.routes;
    const sourceIndex = routes.findIndex(
      (r) => r.city.toLowerCase().replace(/_/g, "") === "dhaka"
    );
    const destIndex = routes.findIndex(
      (r) => r.city.toLowerCase().replace(/_/g, "") === "kushtiacourt"
    );
    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-primary/10 via-background to-secondary/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">Dhaka to Kushtia</span>
          </nav>

          <div className="max-w-4xl">
            <div className="flex items-center gap-3 mb-4">
              <div className="p-3 bg-primary/10 rounded-full">
                <Train className="h-8 w-8 text-primary" />
              </div>
              <div>
                <p className="text-sm text-muted-foreground font-medium">Train Route</p>
                <p className="text-lg text-primary font-semibold">{banglaFrom} → {banglaTo}</p>
              </div>
            </div>
            <h1 className="text-3xl md:text-5xl font-bold mb-4 leading-tight">
              Dhaka to Kushtia Train Schedule 2026
            </h1>
            <p className="text-xl text-muted-foreground max-w-2xl mb-2">
              Complete guide for traveling from Dhaka (Kamlapur) to Kushtia Court Railway Station 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">৳200</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-primary/10 rounded-lg"><Clock className="h-5 w-5 text-primary" /></div>
                <h2 className="text-2xl font-bold">Dhaka to Kushtia Train Schedule</h2>
              </div>
              <p className="text-muted-foreground mb-6">
                View the complete and updated timetable for all {availableTrains.length} trains from Dhaka to Kushtia Court. Click on any train for detailed route information.
              </p>
              <div className="bg-card rounded-xl border shadow-sm overflow-hidden">
                <Suspense>
                  <Schedule initialStation="dhaka" initialToStation="kushtia_court" showShareButton={false} />
                </Suspense>
              </div>
            </section>

            <section id="trains">
              <div className="flex items-center gap-3 mb-6">
                <div className="p-2 bg-primary/10 rounded-lg"><Train className="h-5 w-5 text-primary" /></div>
                <h2 className="text-2xl font-bold">Trains from Dhaka to Kushtia</h2>
              </div>
              <div className="prose prose-slate max-w-none">
                <p>A total of <strong>{availableTrains.length} trains</strong> stop at Kushtia Court station on their way from Dhaka. These trains also continue onward to Khulna, Rajshahi, or Benapole, so Kushtia Court is an intermediate stop.</p>
                <h3>Popular Trains Stopping at Kushtia Court</h3>
                <ul>
                  {trainNames.slice(0, 8).map((name, idx) => (
                    <li key={idx}><strong>{name}</strong> - {name.toLowerCase().includes("express") ? "Intercity Express" : "Mail/Express"} stopping at Kushtia Court station</li>
                  ))}
                </ul>
                <p><strong>Note:</strong> The Kushtia Court station (কুষ্টিয়া কোর্ট) is the main railway station serving Kushtia city. All these trains make a scheduled stop here before continuing to their final destination.</p>
              </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-primary/10 rounded-lg"><MapPin className="h-5 w-5 text-primary" /></div>
                <h2 className="text-2xl font-bold">About Dhaka to Kushtia Train Route</h2>
              </div>
              <p>The <strong>Dhaka to Kushtia Court train route</strong> connects the capital with the historic city of Kushtia, famous for the great mystic poet Lalon Shah (লালন সাঁই). Trains depart from <strong>Dhaka Kamlapur Railway Station</strong>, cross the Padma Bridge Rail Link through Bhanga and Rajbari, then continue through Pangsha to reach <strong>Kushtia Court Railway Station</strong>.</p>
              <p>Kushtia is a culturally significant city known for its connection to the Baul music tradition, Rabindranath Tagore&apos;s Kuthibari in Shilaidaha, and the tomb of Lalon Fakir in Chheuriya. The Padma Bridge Rail Link has made it much easier to reach from Dhaka.</p>
              <h3>Key Stations on This Route</h3>
              <ul>
                <li><strong>Dhaka (Kamlapur)</strong> - Starting point, main railway hub of Bangladesh</li>
                <li><strong>Bhanga Junction</strong> - First major stop after Padma Bridge</li>
                <li><strong>Rajbari</strong> - District headquarters stop</li>
                <li><strong>Pangsha</strong> - Rajbari district stop</li>
                <li><strong>Kushtia Court</strong> - Destination, main Kushtia city station</li>
              </ul>
              <h3>About Kushtia Court Station</h3>
              <p>Kushtia Court (কুষ্টিয়া কোর্ট) is the primary railway station of Kushtia city, located in the city centre near the courthouse area. From here, you can easily reach all major points of interest in Kushtia by rickshaw or local transport.</p>
            </section>

            <section id="booking" className="bg-muted/30 rounded-xl p-8 border">
              <div className="flex items-center gap-3 mb-6">
                <div className="p-2 bg-primary/10 rounded-lg"><Ticket className="h-5 w-5 text-primary" /></div>
                <h2 className="text-2xl font-bold">How to Book Dhaka to Kushtia Train Tickets</h2>
              </div>
              <div className="prose prose-slate max-w-none">
                <p>Booking train tickets from Dhaka to Kushtia Court:</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;Dhaka&quot; as origin and &quot;Kushtia Court&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.</p>
                <h3>Station Counter</h3>
                <p>Visit <strong>Dhaka Kamlapur Railway Station</strong> counter (opens 6:00 AM). Since Kushtia Court is an intermediate stop for long-distance trains, not all seats may be available — online booking is strongly recommended.</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-primary text-primary-foreground rounded-lg font-semibold hover:bg-primary/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-primary/10 rounded-lg"><CreditCard className="h-5 w-5 text-primary" /></div>
                <h2 className="text-2xl font-bold">Dhaka to Kushtia 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">৳200 - ৳250</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">৳430</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">৳826</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">৳986</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-primary/10 rounded-lg"><Users className="h-5 w-5 text-primary" /></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 go from Dhaka to Kushtia Court?</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 that stop at Kushtia Court station on the way from Dhaka. These are long-distance trains heading to Khulna, Rajshahi, or Benapole.</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>What is the journey time from Dhaka to Kushtia?</span><ChevronRight className="transition-transform group-open:rotate-90" size={18} /></summary>
                  <div className="px-4 pb-4 text-muted-foreground">The journey from Dhaka to Kushtia Court takes approximately 4 to 5 hours by express train, depending on the number of stops en route.</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>What is Kushtia Court station?</span><ChevronRight className="transition-transform group-open:rotate-90" size={18} /></summary>
                  <div className="px-4 pb-4 text-muted-foreground">Kushtia Court (কুষ্টিয়া কোর্ট) is the main railway station serving Kushtia city. It is located near the city&apos;s courthouse area. Kushtia is famous for Lalon Fakir&apos;s shrine, Rabindranath Tagore&apos;s Kuthibari, and the Baul music tradition.</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>Does the Dhaka-Kushtia train cross the Padma Bridge?</span><ChevronRight className="transition-transform group-open:rotate-90" size={18} /></summary>
                  <div className="px-4 pb-4 text-muted-foreground">Yes! All trains on this route now travel via the Padma Bridge Rail Link (পদ্মা সেতু রেল লিংক), making the Dhaka to Kushtia journey much faster and more comfortable than before.</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>What to visit in Kushtia?</span><ChevronRight className="transition-transform group-open:rotate-90" size={18} /></summary>
                  <div className="px-4 pb-4 text-muted-foreground">Top attractions in Kushtia include: Lalon Shah&apos;s Mazar (shrine) in Chheuriya, Rabindranath Tagore&apos;s Kuthibari in Shilaidaha, the Hardinge Bridge, and the Lalon Academy. It&apos;s also famous for the Lalon Festival held every year.</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-secondary/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 Kushtia to Dhaka trains.</p>
              <Link href="/kushtia-to-dhaka" className="inline-flex items-center gap-2 text-primary font-medium hover:underline">
                Kushtia to Dhaka 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="/dhaka-to-rajbari" className="flex items-center justify-between py-2 hover:text-primary transition-colors"><span>Dhaka → Rajbari</span><ChevronRight size={16} /></Link>
                <Link href="/dhaka-to-khulna" className="flex items-center justify-between py-2 hover:text-primary transition-colors"><span>Dhaka → Khulna</span><ChevronRight size={16} /></Link>
                <Link href="/dhaka-to-jashore" className="flex items-center justify-between py-2 hover:text-primary transition-colors"><span>Dhaka → Jashore</span><ChevronRight size={16} /></Link>
                <Link href="/dhaka-to-rajshahi" className="flex items-center justify-between py-2 hover:text-primary transition-colors"><span>Dhaka → Rajshahi</span><ChevronRight size={16} /></Link>
              </div>
            </div>

            <div className="bg-primary text-primary-foreground p-6 rounded-xl">
              <h3 className="font-bold text-lg mb-2">Join Our Community</h3>
              <p className="text-primary-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-primary 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-primary transition-colors"><Calendar className="h-8 w-8 mx-auto mb-2 text-primary" /><p className="font-medium">All Schedules</p><p className="text-xs text-muted-foreground">View full timetable</p></Link>
            <Link href="/dhaka-to-rajbari" className="p-4 bg-card border rounded-xl text-center hover:border-primary transition-colors"><MapPin className="h-8 w-8 mx-auto mb-2 text-primary" /><p className="font-medium">Dhaka → Rajbari</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-primary transition-colors"><Users className="h-8 w-8 mx-auto mb-2 text-primary" /><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-primary transition-colors"><Train className="h-8 w-8 mx-auto mb-2 text-primary" /><p className="font-medium">About Us</p><p className="text-xs text-muted-foreground">Our community</p></Link>
          </div>
        </section>
      </div>
    </div>
  );
}
