"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 } from "lucide-react";

export default function TrainRouteClient({
  fromStation,
  toStation,
  banglaFrom,
  banglaTo,
  distance,
  duration,
}) {
  const fromId = fromStation.toLowerCase().replace(/_/g, "");
  const toId = toStation.toLowerCase().replace(/_/g, "");
  const fromName = fromStation.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
  const toName = toStation.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());

  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 destIndex !== -1 && destIndex > sourceIndex;
  }).length;

  return (
    <div className="flex flex-col min-h-screen">
      <div className="bg-muted/30 pt-24 pb-12 border-b">
        <div className="container px-4">
          <div className="flex items-center gap-2 text-sm text-muted-foreground mb-4">
            <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">{fromName} to {toName}</span>
          </div>

          <h1 className="text-3xl md:text-5xl font-bold mb-4">
            {fromName} to {toName} Train Schedule
          </h1>
          <p className="text-xl text-muted-foreground max-w-2xl">
            Complete guide for traveling from {fromName} to {toName}. Check updated train times, ticket prices, and off days.
          </p>

          <div className="flex flex-wrap gap-4 mt-8">
            <div className="flex items-center gap-2 px-4 py-2 bg-background rounded-lg border shadow-sm">
              <div className="p-2 bg-primary/10 rounded-full text-primary"><Clock size={18} /></div>
              <div><p className="text-xs text-muted-foreground">Approx Time</p><p className="font-semibold">{duration || "N/A"}</p></div>
            </div>
            <div className="flex items-center gap-2 px-4 py-2 bg-background rounded-lg border shadow-sm">
              <div className="p-2 bg-primary/10 rounded-full text-primary"><MapPin size={18} /></div>
              <div><p className="text-xs text-muted-foreground">Distance</p><p className="font-semibold">{distance || "N/A"}</p></div>
            </div>
            <div className="flex items-center gap-2 px-4 py-2 bg-background rounded-lg border shadow-sm">
              <div className="p-2 bg-primary/10 rounded-full text-primary"><Ticket size={18} /></div>
              <div><p className="text-xs text-muted-foreground">Daily Trains</p><p className="font-semibold">{availableTrains}</p></div>
            </div>
          </div>
        </div>
      </div>

      <div className="container px-4 py-12 grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-2 space-y-12">
          <section>
            <h2 className="text-2xl font-bold mb-6 flex items-center gap-2">
              <Clock className="text-primary" /> Train Schedule
            </h2>
            <div className="bg-card rounded-xl border shadow-sm overflow-hidden">
              <Suspense>
                <Schedule initialStation={fromId} initialToStation={toId} showShareButton={false} />
              </Suspense>
            </div>
          </section>

          <section className="prose prose-slate max-w-none">
            <h2 className="text-2xl font-bold mb-4">About {fromName} to {toName} Route</h2>
            <p>
              Traveling from <strong>{fromName}</strong> to <strong>{toName}</strong> is a popular route for commuters and travelers in the Rajbari district.
              Bangladesh Railway operates {availableTrains} direct trains on this route, ensuring convenient connectivity throughout the day.
            </p>
            <h3>Ticket Booking</h3>
            <p>
              Tickets for {fromName} to {toName} trains can be purchased online through the official
              <a href="https://eticket.railway.gov.bd/" target="_blank" rel="noopener noreferrer"> Bangladesh Railway E-Ticketing website </a>
              or directly at the {fromName} station counters. We recommend booking in advance, especially during holiday seasons.
            </p>
            <h3>Station Information</h3>
            <ul>
              <li><strong>Departure:</strong> {fromName} Railway Station</li>
              <li><strong>Arrival:</strong> {toName} Railway Station</li>
              <li><strong>Journey Type:</strong> Comfortable & Scenic</li>
            </ul>
          </section>
        </div>

        <div className="space-y-8">
          <div className="bg-muted/30 p-6 rounded-xl border">
            <h3 className="font-bold text-lg mb-4">FAQ: {fromName} to {toName}</h3>
            <div className="space-y-4">
              <details className="group">
                <summary className="flex justify-between items-center font-medium cursor-pointer list-none">
                  <span>How many trains are there?</span>
                  <span className="transition group-open:rotate-180"><ChevronRight size={16} /></span>
                </summary>
                <div className="text-muted-foreground mt-3">There are currently {availableTrains} trains operating on this route.</div>
              </details>
              <details className="group">
                <summary className="flex justify-between items-center font-medium cursor-pointer list-none">
                  <span>How do I buy tickets?</span>
                  <span className="transition group-open:rotate-180"><ChevronRight size={16} /></span>
                </summary>
                <div className="text-muted-foreground mt-3">You can buy tickets online at <a href="https://eticket.railway.gov.bd/" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">eticket.railway.gov.bd</a> or at the station counter.</div>
              </details>
              <details className="group">
                <summary className="flex justify-between items-center font-medium cursor-pointer list-none">
                  <span>Is there a mobile app?</span>
                  <span className="transition group-open:rotate-180"><ChevronRight size={16} /></span>
                </summary>
                <div className="text-muted-foreground mt-3">Yes, you can use the &quot;Rail Sheba&quot; app to book tickets.</div>
              </details>
            </div>
          </div>

          <div className="bg-primary text-primary-foreground p-6 rounded-xl">
            <h3 className="font-bold text-lg mb-2">Need Help?</h3>
            <p className="text-primary-foreground/90 text-sm mb-4">Join our community to get live updates on train locations and delays.</p>
            <a href={socialLinks.facebookGroup} target="_blank" rel="noopener noreferrer" className="block w-full py-2 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">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="/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="/schedules" className="flex items-center justify-between py-2 hover:text-primary transition-colors"><span>All Schedules</span><ChevronRight size={16} /></Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
