import { clsx } from "@/lib/cx";

import { Card } from "@/components/ui";

import type { ReactNode } from "react";

export function SearchFilterBar({

  children,

  count,

  total,

  countLabel = "result",

  onClear,

  clearHref,

  className,

}: {

  children: ReactNode;

  count?: number;

  total?: number;

  countLabel?: string;

  onClear?: () => void;

  clearHref?: string;

  className?: string;

}) {

  const showClear = !!(onClear || clearHref);

  return (

    <Card className={clsx("p-4 sm:p-5", className)}>

      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">{children}</div>

      {(count != null || showClear) && (

        <div className="mt-3 flex flex-wrap items-center justify-between gap-2">

          {count != null && (

            <p className="label text-ash-2">

              {count.toLocaleString()} {countLabel}

              {count !== 1 ? "s" : ""}

              {total != null && count !== total

                ? ` of ${total.toLocaleString()}`

                : ""}

            </p>

          )}

          {onClear && (

            <button

              type="button"

              onClick={onClear}

              className="focus-ring label rounded-sm px-2 py-1 text-ash underline underline-offset-4 hover:text-paper"

            >

              Clear filters

            </button>

          )}

          {clearHref && !onClear && (

            <a

              href={clearHref}

              className="focus-ring label rounded-sm px-2 py-1 text-ash underline underline-offset-4 hover:text-paper"

            >

              Clear filters

            </a>

          )}

        </div>

      )}

    </Card>

  );

}

export function FilterField({

  label,

  span,

  children,

}: {

  label: string;

  span?: "2";

  children: ReactNode;

}) {

  return (

    <label className={clsx("block", span === "2" && "sm:col-span-2")}>

      <span className="label mb-1.5 block text-ash">{label}</span>

      {children}

    </label>

  );

}

export function FilterInput({

  name,

  value,

  defaultValue,

  onChange,

  placeholder,

  "aria-label": ariaLabel,

}: {

  name?: string;

  value?: string;

  defaultValue?: string;

  onChange?: (v: string) => void;

  placeholder?: string;

  "aria-label"?: string;

}) {

  const className =

    "focus-ring w-full min-h-[52px] rounded-[3px] border border-line bg-ink px-3 py-2 text-[18px] leading-snug text-paper placeholder:text-ash-2";

  if (onChange !== undefined) {

    return (

      <input

        type="search"

        value={value ?? ""}

        onChange={(e) => onChange(e.target.value)}

        placeholder={placeholder}

        aria-label={ariaLabel}

        className={className}

      />

    );

  }

  return (

    <input

      type="search"

      name={name}

      defaultValue={defaultValue ?? ""}

      placeholder={placeholder}

      aria-label={ariaLabel}

      className={className}

    />

  );

}

export function FilterSelect({

  name,

  value,

  defaultValue,

  onChange,

  "aria-label": ariaLabel,

  options,

}: {

  name?: string;

  value?: string;

  defaultValue?: string;

  onChange?: (v: string) => void;

  "aria-label"?: string;

  options: Array<{ value: string; label: string }>;

}) {

  const className =

    "focus-ring w-full min-h-[44px] rounded-[3px] border border-line bg-ink px-3 py-2 font-mono text-[13px] text-paper";

  if (onChange !== undefined) {

    return (

      <select

        value={value ?? ""}

        onChange={(e) => onChange(e.target.value)}

        aria-label={ariaLabel}

        className={className}

      >

        {options.map((o) => (

          <option key={o.value} value={o.value} className="bg-surface text-paper">

            {o.label}

          </option>

        ))}

      </select>

    );

  }

  return (

    <select

      name={name}

      defaultValue={defaultValue ?? ""}

      aria-label={ariaLabel}

      className={className}

    >

      {options.map((o) => (

        <option key={o.value} value={o.value} className="bg-surface text-paper">

          {o.label}

        </option>

      ))}

    </select>

  );

}

export function FilterSubmit({ label = "Filter" }: { label?: string }) {

  return (

    <div className="flex items-end">

      <button

        type="submit"

        className="focus-ring label inline-flex min-h-[44px] w-full items-center justify-center rounded-[3px] border border-line bg-surface px-4 text-paper hover:bg-graphite"

      >

        {label}

      </button>

    </div>

  );

}