"use client";

import Image from "next/image";
import Link from "next/link";
import { ChevronDownIcon } from "@/components/ui/Icons";
import { ROUTES } from "@/lib/routes";
import {
  PARTNER_FOCUSES,
  PARTNER_REGIONS,
  type PartnerFocus,
  type PartnerRegion,
} from "@/data/partners";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import {
  ALL_REGIONS,
  resetFilters,
  selectDirectoryFilters,
  selectVisiblePartners,
  setFocus,
  setLocation,
} from "@/store/slices/directorySlice";

const selectClasses =
  "w-full cursor-pointer appearance-none rounded-lg border border-slate-300 bg-white py-3 pr-10 pl-4 text-[0.95rem] text-slate-700 outline-none transition-[border-color,box-shadow] duration-200 focus:border-accent focus:shadow-[0_0_0_3px_rgba(46,94,153,0.15)]";

/** Filterable partner cards. Filter state lives in the Redux `directory` slice. */
export function PartnerDirectory() {
  const dispatch = useAppDispatch();
  const { location, focus } = useAppSelector(selectDirectoryFilters);
  const visiblePartners = useAppSelector(selectVisiblePartners);

  return (
    <section
      id="partnership-directory"
      className="mx-auto mb-[50px] max-w-[1320px] rounded-[30px] bg-slate-50 px-[60px] py-[60px] max-[641px]:px-5"
    >
      <div className="mx-auto max-w-[1320px]">
        <h2 className="mb-6 text-[clamp(1.6rem,2.5vw,2.2rem)] font-bold text-slate-800">
          Partnership Directory
        </h2>

        <div className="mb-10 flex flex-wrap items-center gap-4 rounded-xl border border-slate-200 bg-white px-6 py-4 shadow-[0_4px_16px_rgba(15,23,42,0.04)] max-[641px]:flex-col max-[641px]:items-stretch">
          <div className="relative min-w-[220px] flex-1">
            <select
              aria-label="Filter by Location"
              value={location}
              onChange={(event) =>
                dispatch(setLocation(event.target.value as PartnerRegion | typeof ALL_REGIONS | ""))
              }
              className={selectClasses}
            >
              <option value="">Location</option>
              <option value={ALL_REGIONS}>All Regions</option>
              {PARTNER_REGIONS.map((region) => (
                <option key={region} value={region}>
                  {region}
                </option>
              ))}
            </select>
            <ChevronDownIcon className="pointer-events-none absolute top-1/2 right-[14px] -translate-y-1/2 text-slate-500" />
          </div>

          <div className="relative min-w-[220px] flex-1">
            <select
              aria-label="Filter by Platform Focus"
              value={focus}
              onChange={(event) => dispatch(setFocus(event.target.value as PartnerFocus | ""))}
              className={selectClasses}
            >
              <option value="">Platform Focus</option>
              {PARTNER_FOCUSES.map((item) => (
                <option key={item} value={item}>
                  {item}
                </option>
              ))}
            </select>
            <ChevronDownIcon className="pointer-events-none absolute top-1/2 right-[14px] -translate-y-1/2 text-slate-500" />
          </div>

          <button
            type="button"
            onClick={() => dispatch(resetFilters())}
            className="cursor-pointer rounded-lg border border-slate-300 bg-slate-100 px-6 py-3 text-[0.95rem] font-medium text-slate-500 transition-all duration-200 hover:bg-slate-200 hover:text-slate-800"
          >
            Reset
          </button>
        </div>

        <div className="grid grid-cols-3 gap-[22px] max-[1025px]:grid-cols-2 max-[641px]:grid-cols-1">
          {visiblePartners.map((partner) => (
            <div
              key={partner.id}
              className="flex flex-col overflow-hidden rounded-[14px] border-[1.5px] border-[#d1d5db] bg-white shadow-[0_4px_16px_rgba(15,23,42,0.05)] transition-[transform,box-shadow,border-color] duration-300 hover:-translate-y-1.5 hover:shadow-[0_16px_36px_rgba(15,23,42,0.12)]"
            >
              <div className="rounded-t-xl bg-gradient-to-r from-[#769dc6] to-[#3a71b4] px-[22px] py-[14px] text-[0.88rem] font-semibold tracking-[0.3px] text-white">
                {partner.banner}
              </div>
              <div className="flex grow flex-col p-6">
                <div className="flex h-16 w-full items-center justify-start">
                  <Image
                    src={partner.logo.src}
                    alt={partner.logo.alt}
                    width={partner.logo.width}
                    height={partner.logo.height}
                    className="h-[50px] w-auto max-w-[180px] shrink-0 object-contain object-left"
                    style={{ width: "auto" }}
                  />
                </div>
                <hr className="my-4 border-0 border-t border-slate-200" />
                <p className="mb-6 grow text-[0.92rem] leading-[1.65] font-light text-slate-600">
                  {partner.description}
                </p>
                <a
                  href={partner.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex w-full items-center justify-center gap-[6px] rounded-lg border-[1.5px] border-[#A3CDF3] bg-transparent px-5 py-3 text-[0.92rem] font-medium text-[#61b4ff] transition-all duration-300 hover:bg-[#dddddd8e] hover:text-black"
                >
                  View Partner Site <span className="text-[1.05rem] leading-none">↗</span>
                </a>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-12 mb-5 flex w-full items-center justify-center">
          <div className="flex flex-wrap items-center justify-center gap-4">
            <Link
              href="#partnership-directory"
              className="inline-flex items-center justify-center rounded-lg border-[1.5px] border-[#a3cdf3] bg-white px-7 py-3 text-[0.95rem] font-medium text-accent transition-all duration-300 hover:border-accent hover:bg-[#f0f7ff]"
            >
              See all Partners
            </Link>
            <Link
              href={ROUTES.contact}
              className="inline-flex items-center justify-center rounded-lg border-[1.5px] border-accent-strong bg-accent-strong px-7 py-3 text-[0.95rem] font-medium text-white shadow-[0_4px_12px_rgba(58,113,180,0.25)] transition-all duration-300 hover:border-[#2b5993] hover:bg-[#2b5993] hover:shadow-[0_6px_16px_rgba(58,113,180,0.35)]"
            >
              Become a Sterling Partner
            </Link>
          </div>
        </div>

        {visiblePartners.length === 0 && (
          <div className="rounded-xl border border-dashed border-slate-300 bg-white px-5 py-[60px] text-center text-base text-slate-500">
            No partners found matching the selected Location and Platform Focus filters. Try
            resetting your search.
          </div>
        )}
      </div>
    </section>
  );
}