import { createFileRoute } from '@tanstack/react-router'
import { getBrewsData } from '~/lib/data'
import { TastingFlight } from '~/components/tasting-flight'

export const Route = createFileRoute('/our-brews')({
  head: () => ({
    meta: [
      { title: 'Our Brews | The Great Bear Microbrewery' },
      {
        name: 'description',
        content:
          'Explore our core lineup and seasonal experiments — handcrafted in small batches within our state-of-the-art copper kettles.',
      },
    ],
  }),
  loader: () => getBrewsData(),
  component: OurBrewsPage,
})

function OurBrewsPage() {
  const { flagship, coreBrews, seasonalBrews, flightBrews } = Route.useLoaderData()
  const tapsFlowing = flightBrews.length

  return (
    <div className="flex w-full flex-col">
      {/* Hero / Intro Header */}
      <section className="relative w-full overflow-hidden bg-surface-container-low px-grid-margin py-space-xl">
        <div className="pointer-events-none absolute -right-20 -top-20 h-96 w-96 rounded-full bg-primary/10 blur-3xl" />
        <div className="relative z-10 mx-auto flex max-w-7xl flex-col justify-between gap-space-lg md:flex-row md:items-center">
          <div className="flex max-w-2xl flex-col gap-space-md">
            <div className="flex items-center gap-space-sm">
              <span className="h-[1px] w-12 bg-primary" />
              <span className="text-label-lg uppercase tracking-widest text-primary">
                On Tap Today
              </span>
            </div>
            <h1 className="font-headline-xl text-headline-xl text-on-surface">
              Freshly Brewed Masterpieces
            </h1>
            <p className="text-body-lg text-on-surface-variant">
              Handcrafted in small batches within our state-of-the-art copper kettles. Explore our
              core lineup and seasonal experiments designed to challenge and delight your palate.
            </p>
          </div>
          <div className="flex flex-col items-center gap-space-md rounded-xl bg-surface-container p-space-md shadow-lg sm:flex-row">
            <div className="flex flex-col text-center sm:text-left">
              <span className="text-label-md uppercase text-on-surface-variant">
                Brewery Status
              </span>
              <span className="mt-1 flex items-center gap-2 text-body-md font-semibold text-on-surface">
                <span className="h-2.5 w-2.5 animate-pulse rounded-full bg-green-500" />{' '}
                {tapsFlowing} Taps Flowing Fresh
              </span>
            </div>
            <a
              className="rounded-lg bg-primary px-space-md py-space-sm text-center text-label-lg font-medium text-on-primary transition-all hover:bg-primary/90"
              href="#tasting-flight"
            >
              Build a Flight
            </a>
          </div>
        </div>
      </section>

      {/* Featured Brew Banner */}
      {flagship ? (
        <section className="w-full px-grid-margin py-space-xl">
          <div className="mx-auto grid max-w-7xl grid-cols-1 items-center gap-grid-gutter overflow-hidden rounded-xl bg-surface-container shadow-xl lg:grid-cols-12">
            <div className="relative h-96 lg:h-[500px] lg:col-span-6">
              <div
                className="h-full w-full bg-cover bg-center"
                style={{ backgroundImage: `url('${flagship.image}')` }}
              />
              <div className="absolute left-4 top-4 rounded-full bg-surface/80 px-space-md py-space-xs backdrop-blur-md">
                <span className="text-label-md font-semibold uppercase text-primary">
                  Flagship Brew
                </span>
              </div>
            </div>
            <div className="flex flex-col justify-center gap-space-md p-space-xl lg:col-span-6">
              <div className="flex items-center gap-space-sm">
                <span className="rounded bg-surface-container-high px-space-sm py-space-xs text-label-md uppercase text-primary">
                  {flagship.style}
                </span>
                <span className="text-body-sm text-on-surface-variant">
                  ABV: {flagship.abv}% | IBU: {flagship.ibu}
                </span>
              </div>
              <h2 className="font-headline-lg text-on-surface">{flagship.name}</h2>
              <p className="text-body-md text-on-surface-variant">{flagship.description}</p>
              <div className="my-space-sm grid grid-cols-2 gap-space-md">
                <div className="rounded-lg bg-surface p-space-md">
                  <span className="block text-label-md uppercase text-on-surface-variant">
                    Tasting Notes
                  </span>
                  <span className="mt-1 block text-body-sm font-medium text-on-surface">
                    {flagship.tasting_notes}
                  </span>
                </div>
                <div className="rounded-lg bg-surface p-space-md">
                  <span className="block text-label-md uppercase text-on-surface-variant">
                    Suggested Pairing
                  </span>
                  <span className="mt-1 block text-body-sm font-medium text-on-surface">
                    {flagship.pairing}
                  </span>
                </div>
              </div>
              <div className="flex items-center gap-space-md pt-space-sm">
                <button
                  type="button"
                  className="flex items-center gap-space-sm rounded-lg bg-primary px-space-lg py-space-md text-label-lg font-medium text-on-primary shadow-md transition-all hover:bg-primary/90"
                  onClick={(event) => {
                    const button = event.currentTarget
                    button.disabled = true
                    const label = button.textContent
                    button.textContent = 'Added to your table order!'
                    setTimeout(() => {
                      button.disabled = false
                      button.textContent = label
                    }, 2500)
                  }}
                >
                  <span className="material-symbols-outlined text-[18px]">sports_bar</span> Order
                  Pint (500ml)
                </button>
              </div>
            </div>
          </div>
        </section>
      ) : null}

      {/* Core Beers Grid */}
      <section className="w-full bg-surface-container-low px-grid-margin py-space-xl">
        <div className="mx-auto flex max-w-7xl flex-col gap-space-xl">
          <div className="mx-auto flex max-w-xl flex-col items-center gap-space-sm text-center">
            <span className="text-label-lg uppercase tracking-widest text-primary">
              The Permanent Taproom Lineup
            </span>
            <h2 className="font-headline-lg text-on-surface">Crafted Without Compromise</h2>
            <p className="text-body-md text-on-surface-variant">
              Each brew is an ode to traditional European brewing craft infused with modern Indian
              creativity.
            </p>
          </div>
          <div className="grid grid-cols-1 gap-grid-gutter md:grid-cols-2 lg:grid-cols-3">
            {coreBrews.map((brew) => (
              <div
                key={brew.uid}
                className="flex flex-col justify-between overflow-hidden rounded-xl bg-surface shadow-md transition-transform hover:-translate-y-1"
              >
                <div className="relative h-64">
                  <div
                    className="h-full w-full bg-cover bg-center"
                    style={{ backgroundImage: `url('${brew.image}')` }}
                  />
                  <div className="absolute right-4 top-4 rounded-full bg-surface/90 px-space-md py-space-xs backdrop-blur-sm">
                    <span className="text-label-md font-semibold text-primary">
                      ABV: {brew.abv}% • IBU: {brew.ibu}
                    </span>
                  </div>
                </div>
                <div className="flex flex-grow flex-col gap-space-md p-space-lg">
                  <div className="flex items-center justify-between">
                    <h3 className="font-headline-md text-on-surface">{brew.name}</h3>
                    <span className="text-label-md uppercase tracking-wider text-on-surface-variant">
                      {brew.style}
                    </span>
                  </div>
                  <p className="text-body-sm text-on-surface-variant">{brew.description}</p>
                  <div className="mt-auto flex flex-col gap-space-xs border-t border-outline-variant/20 pt-space-md text-body-sm">
                    <div className="flex justify-between">
                      <span className="text-on-surface-variant">Notes:</span>
                      <span className="font-medium text-on-surface">{brew.tasting_notes}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-on-surface-variant">Pairing:</span>
                      <span className="font-medium text-on-surface">{brew.pairing}</span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Seasonal Fruit Beers Section */}
      <section className="w-full px-grid-margin py-space-xl">
        <div className="mx-auto flex max-w-7xl flex-col items-center gap-space-xl lg:flex-row">
          <div className="flex flex-col gap-space-md lg:w-1/2">
            <span className="text-label-lg uppercase tracking-widest text-primary">
              Limited Release
            </span>
            <h2 className="font-headline-xl text-on-surface">Seasonal Fruit Infusions</h2>
            <p className="text-body-lg text-on-surface-variant">
              Our brewmaster experiments with seasonal harvest fruits to create vibrant, refreshing
              ales that capture the essence of the changing seasons.
            </p>
            <div className="my-space-sm flex flex-col gap-space-md">
              {seasonalBrews.map((brew) => (
                <div
                  key={brew.uid}
                  className="flex items-start gap-space-md rounded-xl bg-surface-container p-space-md"
                >
                  <span className="material-symbols-outlined text-[32px] text-primary">
                    {brew.seasonal_icon || 'local_florist'}
                  </span>
                  <div>
                    <h4 className="font-headline-md text-[18px] text-on-surface">
                      {brew.name} (ABV: {brew.abv}%)
                    </h4>
                    <p className="mt-1 text-body-sm text-on-surface-variant">{brew.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="relative h-[450px] w-full overflow-hidden rounded-xl shadow-2xl lg:w-1/2">
            <div
              className="h-full w-full bg-cover bg-center"
              style={{ backgroundImage: "url('/images/seasonal-flight.jpg')" }}
            />
          </div>
        </div>
      </section>

      {/* Interactive Tasting Flight Customizer */}
      <section
        className="w-full bg-surface-container-low px-grid-margin py-space-2xl"
        id="tasting-flight"
      >
        <div className="mx-auto max-w-4xl">
          <TastingFlight brews={flightBrews} />
        </div>
      </section>
    </div>
  )
}
