"use client";

import { SearchBar } from "@/components/molecules/search-bar";
import { ShopGrid } from "@/components/organisms/shop-grid";
import { useState } from "react";

export default function FeedPage() {
  const [searchName, setSearchName] = useState("");
  const [searchAddress, setSearchAddress] = useState("");

  const hasFilters = searchName || searchAddress;

  return (
    <main className="bg-background min-h-[calc(100vh-var(--spacing-header-height))]">
      <div className="mx-auto max-w-7xl px-4 py-8 md:px-6 lg:px-8">
        {/* Page title */}
        <div className="mb-8">
          <h1 className="text-foreground text-2xl font-bold md:text-3xl">
            Explore Shops
          </h1>
          <p className="mt-1 text-sm text-(--color-text-muted)">
            Find and choose your favorite shop
          </p>
        </div>

        {/* Shop grid */}
        <div className="mb-10">
          <ShopGrid searchName={searchName} searchAddress={searchAddress} />
          {hasFilters && (
            <div className="mt-4 flex justify-center">
              <button
                onClick={() => {
                  setSearchName("");
                  setSearchAddress("");
                }}
                className="cursor-pointer border-none bg-transparent text-sm text-(--color-primary) hover:underline"
              >
                Clear filters
              </button>
            </div>
          )}
        </div>

        {/* Filter / Search bar — sticky bottom */}
        <div className="sticky bottom-0 rounded-2xl border border-(--color-border) bg-(--color-bg-card) p-4 shadow-[0_-2px_16px_var(--color-shadow-sm)] md:p-5">
          <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
            <div className="flex shrink-0 items-center gap-2 text-sm font-semibold text-(--color-text-secondary)">
              <i className="fa-solid fa-filter text-(--color-primary)"></i>
              <span>Filter shops</span>
            </div>

            {/* Name search */}
            <SearchBar
              value={searchName}
              onChange={setSearchName}
              onClear={() => setSearchName("")}
              placeholder="Search by shop name..."
              className="min-w-0 flex-1"
            />

            {/* Address search — different icon so not using SearchBar atom */}
            <div className="relative min-w-0 flex-1">
              <i className="fa-solid fa-location-dot pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-xs text-(--color-text-muted)"></i>
              <input
                type="text"
                value={searchAddress}
                onChange={(e) => setSearchAddress(e.target.value)}
                placeholder="Search by address..."
                className="bg-background text-foreground focus:ring-opacity-20 w-full rounded-xl border border-(--color-border) py-2.5 pr-9 pl-9 text-sm transition-all duration-150 outline-none placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary)"
              />
              {searchAddress && (
                <button
                  onClick={() => setSearchAddress("")}
                  aria-label="Clear address search"
                  className="absolute top-1/2 right-3 -translate-y-1/2 cursor-pointer border-none bg-transparent p-0 text-(--color-text-muted) transition-colors duration-150 hover:text-(--color-primary)"
                >
                  <i className="fa-solid fa-xmark text-sm"></i>
                </button>
              )}
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}