// Next.js renders this automatically the instant navigation to /booking/results
// begins — before the route's JS has even finished downloading/compiling and
// well before the page component mounts or its data fetch starts. That closes
// the "I clicked Search and nothing happened" gap: previously there was no
// visual feedback at all until the route fully loaded and hit its own isLoading
// state. Mirrors that same isLoading skeleton so the transition is seamless.
export default function ResultsLoading() {
  return (
    <div className="booking-page">
      <div className="container mx-auto px-4">
        <div className="max-w-6xl mx-auto">
          <div className="mb-8">
            <div className="card p-6">
              <div className="flex items-center gap-4">
                <div className="relative">
                  <div className="w-12 h-12 rounded-full border-4 border-primary/20 border-t-primary animate-spin" />
                </div>
                <div className="flex-1">
                  <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-1">
                    Searching for trains...
                  </h2>
                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    Finding the best options for your journey
                  </p>
                </div>
              </div>
              <div className="mt-4 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                <div
                  className="h-full bg-primary rounded-full"
                  style={{
                    animation: "progressBar 2s ease-in-out infinite",
                  }}
                />
              </div>
            </div>
          </div>

          <div className="space-y-4">
            {[1, 2, 3].map((i) => (
              <div key={i} className="card animate-pulse">
                <div className="flex flex-col lg:flex-row lg:items-center gap-6">
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-4">
                      <div
                        className="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-lg"
                        style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
                      />
                      <div className="flex-1 space-y-2">
                        <div
                          className="h-5 bg-gray-200 dark:bg-gray-700 rounded w-24"
                          style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
                        />
                        <div
                          className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-32"
                          style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
                        />
                      </div>
                    </div>
                    <div className="flex items-center gap-4">
                      <div className="text-center space-y-2">
                        <div
                          className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-16"
                          style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
                        />
                        <div
                          className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-12"
                          style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
                        />
                      </div>
                      <div className="flex-1 h-0.5 bg-gray-200 dark:bg-gray-700" />
                      <div className="text-center space-y-2">
                        <div
                          className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-16"
                          style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
                        />
                        <div
                          className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-12"
                          style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
                        />
                      </div>
                    </div>
                  </div>
                  <div className="lg:border-l dark:border-gray-700 lg:pl-6 lg:min-w-[220px]">
                    <div className="text-center lg:text-right space-y-2">
                      <div
                        className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mx-auto lg:ml-auto lg:mr-0"
                        style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
                      />
                      <div
                        className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-24 mx-auto lg:ml-auto lg:mr-0"
                        style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
                      />
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
