import { COMMODITIES, COMMODITY_LABELS, DEAL_TYPES, DEAL_TYPE_LABELS, COUNTRY_LABELS, SORT_OPTIONS } from '@/lib/constants'
import type { ListingFilter } from '@/lib/types'

const SORT_LABELS: Record<string, string> = {
  recientes: 'Más recientes',
  precio_asc: 'Precio: menor a mayor',
  precio_desc: 'Precio: mayor a menor',
}

export function FilterBar({ filter }: { filter: ListingFilter }) {
  return (
    <form method="get" className="flex flex-wrap items-end gap-3 rounded-xl border border-white/5 bg-night-700 p-4">
      <Field
        label="Commodity"
        name="commodity"
        value={filter.commodity}
        options={COMMODITIES.map((c) => ({ value: c, label: COMMODITY_LABELS[c] }))}
      />
      <Field
        label="Negocio"
        name="negocio"
        value={filter.dealType}
        options={DEAL_TYPES.map((d) => ({ value: d, label: DEAL_TYPE_LABELS[d] }))}
      />
      <Field
        label="País"
        name="pais"
        value={filter.country}
        options={Object.entries(COUNTRY_LABELS).map(([value, label]) => ({ value, label }))}
      />
      <NumberField label="Precio mín (USD)" name="precioMin" value={filter.priceMin} />
      <NumberField label="Precio máx (USD)" name="precioMax" value={filter.priceMax} />
      <Field
        label="Orden"
        name="orden"
        value={filter.sort}
        includeEmpty={false}
        options={SORT_OPTIONS.map((s) => ({ value: s, label: SORT_LABELS[s] }))}
      />
      <label className="flex items-center gap-2 text-sm text-slatey">
        <input type="checkbox" name="verificados" value="1" defaultChecked={filter.verifiedOnly} /> Solo verificados
      </label>
      <button type="submit" className="rounded-md bg-amber-brand px-4 py-2 text-sm font-semibold text-night">
        Filtrar
      </button>
      <a href="/marketplace" className="text-sm text-slatey hover:text-white">
        Limpiar
      </a>
    </form>
  )
}

function Field({
  label,
  name,
  value,
  options,
  includeEmpty = true,
}: {
  label: string
  name: string
  value?: string
  options: { value: string; label: string }[]
  includeEmpty?: boolean
}) {
  return (
    <label className="flex flex-col gap-1 text-xs text-slatey">
      {label}
      <select
        name={name}
        defaultValue={value ?? ''}
        className="rounded-md border border-white/10 bg-night-600 px-2 py-1.5 text-sm text-white"
      >
        {includeEmpty && <option value="">Todos</option>}
        {options.map((o) => (
          <option key={o.value} value={o.value}>
            {o.label}
          </option>
        ))}
      </select>
    </label>
  )
}

function NumberField({ label, name, value }: { label: string; name: string; value?: number }) {
  return (
    <label className="flex flex-col gap-1 text-xs text-slatey">
      {label}
      <input
        type="number"
        name={name}
        defaultValue={value ?? ''}
        className="w-32 rounded-md border border-white/10 bg-night-600 px-2 py-1.5 text-sm text-white"
      />
    </label>
  )
}