"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 KushtaToDhakaClient() {
  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, "") === "kushtiacourt"
    );
    const destIndex = routes.findIndex(
      (r) => r.city.toLowerCase().replace(/_/g, "") === "dhaka"
    );
    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">Kushtia 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">
              Kushtia to Dhaka Train Schedule 2026
            </h1>
            <p className="text-xl text-muted-foreground max-w-2xl mb-2">
              Complete guide for traveling from Kushtia Court 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">৳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-secondary/10 rounded-lg"><Clock className="h-5 w-5 text-secondary" /></div>
                <h2 className="text-2xl font-bold">Kushtia 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 Kushtia Court 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="kushtia_court" initialToStation="dhaka" 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 Kushtia Court to Dhaka</h2>
              </div>
              <div className="prose prose-slate max-w-none">
                <p>A total of <strong>{availableTrains.length} trains</strong> stop at Kushtia Court station heading towards Dhaka. These are long-distance intercity trains originating from Khulna, Rajshahi, or Benapole that make a scheduled stop at Kushtia Court.</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 en route to Dhaka</li>
                  ))}
                </ul>
                <p><strong>Important:</strong> Since Kushtia Court is an intermediate stop for all these trains, passengers boarding here should book tickets in advance online, as some seats may already be occupied from the originating station.</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-secondary/10 rounded-lg"><MapPin className="h-5 w-5 text-secondary" /></div>
                <h2 className="text-2xl font-bold">About Kushtia Court to Dhaka Train Route</h2>
              </div>
              <p>The <strong>Kushtia Court to Dhaka train route</strong> is an important connection for the people of Kushtia district. Trains from <strong>Kushtia Court Railway Station</strong> travel through Pangsha, Rajbari, Bhanga, and the Padma Bridge Rail Link before reaching <strong>Dhaka Kamlapur Railway Station</strong>.</p>
              <p>The <strong>Padma Bridge Rail Link</strong> (পদ্মা সেতু রেল লিংক) has made this journey significantly faster than before, transforming what was once a time-consuming trip into a comfortable 4-5 hour journey.</p>
              <h3>Key Stations on This Route</h3>
              <ul>
                <li><strong>Kushtia Court</strong> - Starting point, main station of Kushtia city</li>
                <li><strong>Pangsha</strong> - Stop in Rajbari district</li>
                <li><strong>Rajbari</strong> - District headquarters</li>
                <li><strong>Bhanga Junction</strong> - Major interchange, gateway to Padma Bridge</li>
                <li><strong>Dhaka (Kamlapur)</strong> - Destination, main railway hub of Bangladesh</li>
              </ul>
              <h3>About Kushtia</h3>
              <p>Kushtia is a historically and culturally rich city in western Bangladesh. It is famous for being the home of <strong>Lalon Shah</strong> (লালন সাঁই), the great mystic poet and philosopher. Rabindranath Tagore&apos;s <strong>Kuthibari</strong> in Shilaidaha and the <strong>Hardinge Bridge</strong> across the Padma are also located nearby.</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 Kushtia to Dhaka Train Tickets</h2>
              </div>
              <div className="prose prose-slate max-w-none">
                <p>Booking train tickets from Kushtia Court to Dhaka:</p>
                <h3>Online Booking (Strongly 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;Kushtia Court&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.</p>
                <h3>Station Counter</h3>
                <p>Visit <strong>Kushtia Court Railway Station</strong> counter. Since these are all intermediate-stop trains, not all seat classes may be available at the station counter — online booking is highly 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-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">Kushtia 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">৳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-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 go from Kushtia to Dhaka?</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 heading toward Dhaka. These are long-distance intercity trains originating from 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>How long does Kushtia 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 Kushtia Court to Dhaka takes approximately 4 to 5 hours by express train. The exact time varies by train and number of 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 Kushtia Court arrive at Dhaka Kamlapur Railway Station. From there, you can connect to any part of Dhaka via Metro Rail, buses, Uber/Pathao, or CNG auto-rickshaws.</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>Why is it called Kushtia Court station?</span><ChevronRight className="transition-transform group-open:rotate-90" size={18} /></summary>
                  <div className="px-4 pb-4 text-muted-foreground">The station is named &quot;Kushtia Court&quot; because it is located near the district court (কোর্ট) area of Kushtia city. This distinguishes it from other railway points in the Kushtia area. On the railway booking system it is listed as &quot;Kushtia Court.&quot;</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 Kushtia Court 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 Kushtia Court Railway Station counter. However, since these trains originate elsewhere (Khulna, Rajshahi, etc.) and make a stop here, available seats may be limited. We strongly recommend online booking in advance.</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 Kushtia trains.</p>
              <Link href="/dhaka-to-kushtia" className="inline-flex items-center gap-2 text-primary font-medium hover:underline">
                Dhaka to Kushtia 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="/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="/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="/jashore-to-dhaka" className="flex items-center justify-between py-2 hover:text-primary transition-colors"><span>Jashore → 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>
  );
}
