"use client";

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { gsap } from "gsap";
import LayoutContainer from "@/components/layout/LayoutContainer";
import StorefrontHeader from "@/components/storefront/StorefrontHeader";
import StorefrontFooter from "@/components/storefront/StorefrontFooter";
import { TUXEDO_IMAGES } from "@/components/storefront/tuxedo-images";
import type { PublicStop } from "@/actions/stops";

type Props = {
  stops: PublicStop[];
  brandName: string;
  brandSlug: string;
};

export default function TuxedoStopsList({ stops, brandName, brandSlug }: Props) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [now] = useState(() => new Date());

  // Subtle scroll-in stagger for the stops list. The Motion policy in
  // ScrollAnimations.tsx caps translation to 16px / 320ms, which matches
  // what we want here — the list reveals as a quiet beat, not a show.
  useEffect(() => {
    if (!containerRef.current) return;
    const ctx = gsap.context(() => {
      gsap.from(".stop-row", {
        y: 16,
        opacity: 0,
        duration: 0.32,
        stagger: 0.04,
        ease: "power1.out",
        scrollTrigger: {
          trigger: containerRef.current,
          start: "top 90%",
          toggleActions: "play none none none",
        },
      });
    }, containerRef);
    return () => ctx.revert();
  }, []);

  const upcomingStops = stops.filter((s) => new Date(s.date) >= now);
  const pastStops = stops.filter((s) => new Date(s.date) < now);

  return (
    <div ref={containerRef} className="min-h-screen bg-stone-50">
      <StorefrontHeader brandName={brandName} brandSlug={brandSlug} brandAccent="green" />

      <main>
        {/* Hero — dark editorial opener with the field photograph as a
            soft half-bleed at the bottom, same register as the
            Contact page hero. */}
        <section className="relative bg-stone-950 overflow-hidden isolate">
          {/* Soft field image, bottom-anchored, partially visible
              behind the headline column. */}
          <div className="absolute inset-x-0 bottom-0 h-2/3 -z-10">
            <Image
              src={TUXEDO_IMAGES.heroField}
              alt=""
              fill
              sizes="100vw"
              quality={85}
              priority
              className="object-cover object-center filter-editorial opacity-40"
            />
            <div className="absolute inset-0 bg-gradient-to-b from-stone-950 via-stone-950/70 to-stone-950" />
          </div>
          <div
            aria-hidden="true"
            className="absolute inset-x-0 bottom-0 h-px bg-amber-300/30 z-10"
          />

          <LayoutContainer>
            <div className="relative py-20 sm:py-28 lg:py-32 max-w-3xl">
              <p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-amber-300/85 mb-6">
                {brandName} · Summer 2026
              </p>
              <h1
                className="font-display text-stone-50 text-[clamp(2.5rem,5.4vw,4.5rem)] leading-[1.02] tracking-[-0.02em]"
                style={{ textWrap: "balance" }}
              >
                Stops
                <br className="hidden sm:block" />{" "}
                <span className="italic text-amber-200/90">near you.</span>
              </h1>
              <div className="mt-8 h-px w-16 bg-gradient-to-r from-emerald-500 via-amber-400 to-amber-300/0" />
              <p className="mt-8 text-stone-300 text-lg sm:text-xl leading-[1.65]">
                Fresh Olathe Sweet&trade; sweet corn delivered to a stop
                near you. Preorder for pickup, or just show up — we&rsquo;ll
                have coolers on the truck.
              </p>
              <div className="mt-10 flex flex-wrap items-center gap-x-8 gap-y-3 text-[11px] uppercase tracking-[0.28em]">
                <span className="text-amber-200/80">
                  {upcomingStops.length} upcoming
                </span>
                <span className="text-stone-700">·</span>
                <span className="text-stone-400">Updated weekly</span>
                <span className="text-stone-700">·</span>
                <Link
                  href="/api/tuxedo/schedule-pdf"
                  download
                  className="text-stone-400 hover:text-amber-200/80 underline underline-offset-4 transition-colors"
                >
                  Download full schedule
                </Link>
              </div>
            </div>
          </LayoutContainer>
        </section>

        {/* Stops list — hairline-ruled magazine sidebar style. Each
            row is a single horizontal hairline + date numerals + city
            + location + time + chevron. No cards, no gradients. */}
        <section className="relative bg-stone-50 py-20 sm:py-24">
          <LayoutContainer>
            {upcomingStops.length === 0 ? (
              <EmptyStops />
            ) : (
              <div className="mx-auto max-w-5xl">
                {/* Eyebrow + hairline-ruled list header */}
                <div className="flex items-baseline justify-between gap-4 mb-8">
                  <p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-emerald-700">
                    Upcoming
                  </p>
                  <p className="text-[10px] uppercase tracking-[0.3em] text-stone-400 tabular-nums">
                    {upcomingStops.length} stops
                  </p>
                </div>

                <ol className="border-t border-stone-900/15">
                  {upcomingStops.map((stop) => (
                    <StopRow key={stop.id} stop={stop} brandSlug={brandSlug} />
                  ))}
                </ol>

                {pastStops.length > 0 && (
                  <div className="mt-20">
                    <div className="flex items-baseline justify-between gap-4 mb-8">
                      <p className="text-[10px] font-bold uppercase tracking-[0.32em] text-stone-400">
                        Past Stops
                      </p>
                      <p className="text-[10px] uppercase tracking-[0.3em] text-stone-400 tabular-nums">
                        Last {Math.min(5, pastStops.length)}
                      </p>
                    </div>
                    <ol className="border-t border-stone-900/10 opacity-70">
                      {pastStops.slice(0, 5).map((stop) => (
                        <StopRow
                          key={stop.id}
                          stop={stop}
                          brandSlug={brandSlug}
                          past
                        />
                      ))}
                    </ol>
                  </div>
                )}
              </div>
            )}
          </LayoutContainer>
        </section>
      </main>

      <StorefrontFooter brandName={brandName} brandSlug={brandSlug} brandAccent="green" />
    </div>
  );
}

// ── STOP ROW — hairline-ruled magazine-sidebar cell ────────────────
// Date numerals on the left (large tabular day, small month above),
// city/state + location + time in the middle, chevron on the right.
// All hairline-divided rows; the list reads as a sidebar, not a feed.
function StopRow({
  stop,
  brandSlug,
  past = false,
}: {
  stop: PublicStop;
  brandSlug: string;
  past?: boolean;
}) {
  const date = new Date(stop.date);
  const day = date.getDate();
  const month = date.toLocaleDateString("en-US", { month: "short" });
  const weekday = date.toLocaleDateString("en-US", { weekday: "short" });

  const content = (
    <div className="grid grid-cols-12 gap-4 sm:gap-6 items-center py-5 sm:py-6 group">
      {/* Date column — big tabular day, small month/weekday above */}
      <div className="col-span-3 sm:col-span-2">
        <p
          className={`text-[10px] uppercase tracking-[0.28em] tabular-nums ${
            past ? "text-stone-400" : "text-emerald-700"
          }`}
        >
          {weekday} · {month}
        </p>
        <p
          className={`mt-1 font-display tabular-nums leading-none tracking-[-0.02em] ${
            past
              ? "text-stone-400 text-3xl sm:text-4xl"
              : "text-stone-950 text-4xl sm:text-5xl"
          }`}
        >
          {day}
        </p>
      </div>

      {/* City + location */}
      <div className="col-span-9 sm:col-span-6 min-w-0">
        <h3
          className={`font-display leading-[1.15] tracking-[-0.012em] ${
            past
              ? "text-stone-500 text-base sm:text-lg"
              : "text-stone-950 text-lg sm:text-xl group-hover:text-emerald-800 transition-colors"
          }`}
        >
          {stop.city}, {stop.state}
        </h3>
        <p
          className={`mt-1 truncate ${past ? "text-stone-400 text-sm" : "text-stone-500 text-sm"}`}
        >
          {stop.location}
        </p>
        {stop.address && (
          <p
            className={`mt-0.5 truncate ${past ? "text-stone-400 text-xs" : "text-stone-400 text-xs"}`}
          >
            {stop.address}
          </p>
        )}
      </div>

      {/* Time + cutoff */}
      <div className="col-span-8 sm:col-span-3 text-right">
        <p
          className={`font-mono tabular-nums text-sm ${
            past ? "text-stone-400" : "text-stone-950"
          }`}
        >
          {stop.time}
        </p>
        {!past && stop.cutoff_time && (
          <p className="mt-1 text-[10px] uppercase tracking-[0.2em] text-stone-400">
            Order by{" "}
            {new Date(stop.cutoff_time).toLocaleTimeString("en-US", {
              hour: "numeric",
              minute: "2-digit",
            })}
          </p>
        )}
        {past && (
          <p className="mt-1 text-[10px] uppercase tracking-[0.2em] text-stone-400">
            Completed
          </p>
        )}
      </div>

      {/* Chevron — only on upcoming rows */}
      <div className="hidden sm:flex col-span-1 justify-end">
        {!past && (
          <svg
            className="w-4 h-4 text-stone-300 group-hover:text-emerald-700 group-hover:translate-x-1 transition-all"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2}
            aria-hidden="true"
          >
            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        )}
      </div>
    </div>
  );

  const inner = (
    <li className="stop-row border-b border-stone-900/15 last:border-b-0">
      {content}
    </li>
  );

  if (past) {
    return inner;
  }

  return (
    <Link
      href={`/${brandSlug}/stops/${stop.slug}`}
      className="stop-row block border-b border-stone-900/15 last:border-b-0 hover:bg-stone-100/60 transition-colors"
    >
      {content}
    </Link>
  );
}

// ── EMPTY STATE — editorial Fraunces italic copy ──────────────────
// Same "no stops yet" message as before, but rendered as a quiet
// editorial panel instead of an icon-in-rounded-box illustration.
function EmptyStops() {
  return (
    <div className="mx-auto max-w-2xl text-center py-12">
      <p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-emerald-700 mb-5">
        Coming Soon
      </p>
      <h2
        className="font-display text-stone-950 text-[clamp(2rem,4.4vw,3.25rem)] leading-[1.05] tracking-[-0.02em]"
        style={{ textWrap: "balance" }}
      >
        The corn is still ripening
        <br className="hidden sm:block" />{" "}
        <span className="italic text-amber-700/90">in the field.</span>
      </h2>
      <div className="mx-auto mt-7 h-px w-12 bg-emerald-700/60" />
      <p className="mt-7 text-stone-600 text-lg leading-[1.65]">
        New pickup stops are added every week. Check back soon, or browse
        the full season schedule below.
      </p>
      <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3">
        <Link
          href="/tuxedo"
          className="group inline-flex items-center gap-3 rounded-full bg-gradient-to-br from-emerald-700 to-emerald-600 px-8 py-3.5 text-sm font-bold text-white shadow-[0_8px_32px_rgba(16,185,129,0.3),inset_0_1px_0_rgba(255,255,255,0.2)] hover:-translate-y-0.5 transition-all duration-200"
        >
          <span>Back to Tuxedo Corn</span>
          <svg
            className="w-4 h-4 transition-transform group-hover:translate-x-1"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2}
            aria-hidden="true"
          >
            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </Link>
        <Link
          href="/api/tuxedo/schedule-pdf"
          download
          className="inline-flex items-center gap-2 rounded-full bg-white px-8 py-3.5 text-sm font-bold text-stone-900 ring-1 ring-stone-200 hover:ring-emerald-600 hover:text-emerald-700 transition-all"
        >
          <svg
            className="h-4 w-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2}
            aria-hidden="true"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
            />
          </svg>
          Download Schedule
        </Link>
      </div>
    </div>
  );
}