"use client"

import { motion } from "framer-motion";
import Link from "next/link";
import { ArrowLeft, Clock, MapPin, Calendar, Train } from "lucide-react";
import { ImageViewer } from "@/components/ui/ImageViewer";
import { useState } from "react";

export default function TrainDetailClient({
  train,
  trainName,
  trainNumber,
  firstStation,
  lastStation,
  images,
}) {
  const [selectedImage, setSelectedImage] = useState(null);
  const routes = train.data.routes;
  const days = train.data.days;

  const allDays = ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"];
  const offDays = allDays.filter((day) => !days.includes(day));

  return (
    <div className="pt-20">
      <div className="py-16">
        <div className="container px-4 max-w-4xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <Link
              href="/schedules"
              className="inline-flex items-center text-primary hover:underline mb-8"
            >
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Schedules
            </Link>

            {/* Train Header */}
            <div className="bg-primary/5 rounded-xl p-6 md:p-8 mb-8 border border-primary/20">
              <div className="flex items-start gap-4">
                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
                  <Train className="h-6 w-6 text-primary" />
                </div>
                <div>
                  <h1 className="text-3xl md:text-4xl font-bold mb-1">
                    {trainName}
                  </h1>
                  {trainNumber && (
                    <span className="text-muted-foreground">
                      Train No. {trainNumber}
                    </span>
                  )}
                  <p className="text-muted-foreground mt-2">
                    {firstStation} → {lastStation}
                  </p>
                </div>
              </div>
            </div>

            {/* Train Images */}
            {images.length > 0 && (
              <div className="mb-8">
                <h2 className="text-xl font-bold mb-4">Photos</h2>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                  {images.map((src, index) => (
                    <motion.div
                      key={index}
                      initial={{ opacity: 0, scale: 0.95 }}
                      whileInView={{ opacity: 1, scale: 1 }}
                      viewport={{ once: true }}
                      className="aspect-video rounded-lg overflow-hidden bg-muted cursor-pointer group"
                      onClick={() =>
                        setSelectedImage({
                          src,
                          alt: `${trainName} - Photo ${index + 1}`,
                          category: trainName,
                        })
                      }
                    >
                      <img
                        src={src}
                        alt={`${trainName} - Photo ${index + 1}`}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                      />
                    </motion.div>
                  ))}
                </div>
              </div>
            )}

            {/* Schedule Info */}
            <div className="grid md:grid-cols-2 gap-6 mb-8">
              <div className="bg-card rounded-xl p-6 border">
                <h2 className="text-lg font-bold mb-3 flex items-center gap-2">
                  <Calendar className="h-5 w-5 text-primary" />
                  Running Days
                </h2>
                <div className="flex flex-wrap gap-2">
                  {allDays.map((day) => (
                    <span
                      key={day}
                      className={`px-3 py-1 rounded-full text-sm font-medium ${
                        days.includes(day)
                          ? "bg-primary text-primary-foreground"
                          : "bg-destructive/10 text-destructive line-through"
                      }`}
                    >
                      {day}
                    </span>
                  ))}
                </div>
                {offDays.length > 0 && (
                  <p className="text-sm text-muted-foreground mt-3">
                    Off day: {offDays.join(", ")}
                  </p>
                )}
              </div>

              <div className="bg-card rounded-xl p-6 border">
                <h2 className="text-lg font-bold mb-3 flex items-center gap-2">
                  <MapPin className="h-5 w-5 text-primary" />
                  Route Info
                </h2>
                <p className="text-muted-foreground text-sm">
                  <strong>Total Stops:</strong> {routes.length}
                </p>
                <p className="text-muted-foreground text-sm">
                  <strong>Origin:</strong> {firstStation}
                </p>
                <p className="text-muted-foreground text-sm">
                  <strong>Destination:</strong> {lastStation}
                </p>
              </div>
            </div>

            {/* Route Table */}
            <div className="bg-card rounded-xl border overflow-hidden">
              <h2 className="text-lg font-bold p-6 pb-0 flex items-center gap-2">
                <Clock className="h-5 w-5 text-primary" />
                Detailed Route & Timings
              </h2>
              <div className="overflow-x-auto p-6">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b text-xs uppercase text-muted-foreground">
                      <th className="text-left py-3 px-2">#</th>
                      <th className="text-left py-3 px-2">Station</th>
                      <th className="text-left py-3 px-2">Arrival</th>
                      <th className="text-left py-3 px-2">Departure</th>
                    </tr>
                  </thead>
                  <tbody>
                    {routes.map((route, index) => (
                      <tr
                        key={index}
                        className="border-b last:border-0 hover:bg-muted/50"
                      >
                        <td className="py-3 px-2 text-muted-foreground">
                          {index + 1}
                        </td>
                        <td className="py-3 px-2 font-medium">
                          {route.city?.replace(/_/g, " ")}
                        </td>
                        <td className="py-3 px-2 text-muted-foreground">
                          {route.arrival_time
                            ? route.arrival_time
                                .replace(" am BST", " AM")
                                .replace(" pm BST", " PM")
                            : "—"}
                        </td>
                        <td className="py-3 px-2 text-primary font-medium">
                          {route.departure_time
                            ? route.departure_time
                                .replace(" am BST", " AM")
                                .replace(" pm BST", " PM")
                            : "—"}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </motion.div>
        </div>
      </div>

      <ImageViewer
        isOpen={!!selectedImage}
        onClose={() => setSelectedImage(null)}
        src={selectedImage?.src}
        alt={selectedImage?.alt}
        category={selectedImage?.category}
      />
    </div>
  );
}
