"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 RajbariToDhakaClient() {
  const fromStation = "Rajbari";
  const toStation = "Dhaka";
  const fromId = "rajbari";
  const toId = "dhaka";
  const banglaFrom = "রাজবাড়ী";
  const banglaTo = "ঢাকা";
  const distance = "150 km";
  const duration = "3-4 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">
      {/* Hero Section */}
      <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">Rajbari 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">
              Rajbari to Dhaka Train Schedule 2026
            </h1>
            <p className="text-xl text-muted-foreground max-w-2xl mb-2">
              Complete guide for traveling from Rajbari Railway Station to Dhaka (Kamlapur). Check updated train times, ticket prices, off days, 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">৳120</p></div>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <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">Rajbari 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 Rajbari 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 Rajbari to Dhaka</h2>
              </div>
              <div className="prose prose-slate max-w-none">
                <p>A total of <strong>{availableTrains.length} trains</strong> operate daily on the Rajbari to Dhaka route. These include both Intercity Express and Mail/Express trains, providing options for different travel preferences and budgets.</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 Rajbari to Dhaka Train Route</h2>
              </div>
              <p>The <strong>Rajbari to Dhaka train route</strong> is a vital railway connection for the people of Rajbari district traveling to the capital. Trains depart from <strong>Rajbari Railway Station</strong> and arrive at <strong>Dhaka Kamlapur Railway Station</strong>, the largest and busiest station in Bangladesh.</p>
              <p>This route has become significantly more convenient since the inauguration of the <strong>Padma Bridge Rail Link</strong> (পদ্মা সেতু রেল লিংক). The bridge has reduced travel time and increased train frequency on this corridor.</p>
              <h3>Key Stations on This Route</h3>
              <ul>
                <li><strong>Rajbari</strong> - Starting point, district headquarters</li>
                <li><strong>Faridpur</strong> - Major stop, district headquarters</li>
                <li><strong>Bhanga Junction</strong> - Connection point for multiple lines</li>
                <li><strong>Dhaka (Kamlapur)</strong> - Destination, main railway hub of Bangladesh</li>
              </ul>
              <h3>Best Time to Travel</h3>
              <p>Early morning trains are popular for those heading to Dhaka for work or appointments. The Sundarban Express (725) arriving at 5:10 AM is convenient for catching morning meetings or onward travel. For a more relaxed journey, afternoon trains offer a scenic view of the countryside.</p>
              <h3>Arrival at Dhaka Kamlapur</h3>
              <p>Upon arriving at Kamlapur Station, you&apos;ll find easy connections to all parts of Dhaka. Bus routes, ride-sharing services (Uber, Pathao), CNG auto-rickshaws, and the Dhaka Metro Rail are all accessible from the station.</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 Rajbari to Dhaka Train Tickets</h2>
              </div>
              <div className="prose prose-slate max-w-none">
                <p>Booking train tickets from Rajbari to Dhaka is easy with multiple options available:</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;Rajbari&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 from Google Play Store or Apple App Store for convenient mobile booking. The app also provides live train tracking and notifications.</p>
                <h3>Station Counter</h3>
                <p>Visit <strong>Rajbari Railway Station</strong> ticket counter. Counters open at 6:00 AM. Advance booking is available up to 10 days before the journey. Note that popular trains often sell out, so booking early is 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">Rajbari 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">৳120 - ৳150</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">৳340</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">৳656</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">৳782</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 Rajbari 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 daily from Rajbari to Dhaka. Popular options include Sundarban Express, Benapole Express, and Madhumati Express.</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 time does the first train leave Rajbari for Dhaka?</span><ChevronRight className="transition-transform group-open:rotate-90" size={18} /></summary>
                  <div className="px-4 pb-4 text-muted-foreground">The earliest train from Rajbari to Dhaka departs around 2:45 AM (Sundarban Express 725), arriving in Dhaka at approximately 5:10 AM. Check our schedule table for all departure times.</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 Rajbari arrive at Dhaka Kamlapur Railway Station. From there, you can connect to any part of Dhaka using buses, Metro Rail, ride-sharing apps (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>Can I book tickets at Rajbari 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 the Rajbari Railway Station counter. The counter opens at 6:00 AM. However, for guaranteed seats, we recommend booking online through the official e-ticketing portal.</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>Are there any direct trains from Rajbari to Dhaka Airport?</span><ChevronRight className="transition-transform group-open:rotate-90" size={18} /></summary>
                  <div className="px-4 pb-4 text-muted-foreground">There are no direct trains to Dhaka Airport (HSIA). From Kamlapur Station, you can take the Airport Express Bus, Uber/Pathao, or a taxi to reach the airport. The journey takes about 45-60 minutes depending on traffic.</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 Rajbari trains.</p>
              <Link href="/dhaka-to-rajbari" className="inline-flex items-center gap-2 text-primary font-medium hover:underline">
                Dhaka to Rajbari Schedule <ChevronRight size={16} />
              </Link>
            </div>

            <div className="bg-muted/30 p-6 rounded-xl border">
              <h3 className="font-bold text-lg mb-4">Other Popular Routes</h3>
              <div className="space-y-3 text-sm">
                <Link href="/pangsha-to-dhaka" className="flex items-center justify-between py-2 hover:text-primary transition-colors"><span>Pangsha → Dhaka</span><ChevronRight size={16} /></Link>
                <Link href="/kalukhali-to-dhaka" className="flex items-center justify-between py-2 hover:text-primary transition-colors"><span>Kalukhali → Dhaka</span><ChevronRight size={16} /></Link>
                <Link href="/dhaka-to-pangsha" className="flex items-center justify-between py-2 hover:text-primary transition-colors"><span>Dhaka → Pangsha</span><ChevronRight size={16} /></Link>
                <Link href="/dhaka-to-kalukhali" className="flex items-center justify-between py-2 hover:text-primary transition-colors"><span>Dhaka → Kalukhali</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, delay notifications, 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="/station/rajbari" 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 Station</p><p className="text-xs text-muted-foreground">Station gallery & info</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>
  );
}
