import { Form, useSearchParams } from "react-router";
import type { Venue } from "~/lib/db.server";

interface Props {
  venues: Venue[];
  defaultDateFrom?: string;
  defaultDateTo?: string;
}

export default function FilterBar({ venues, defaultDateFrom, defaultDateTo }: Props) {
  const [searchParams] = useSearchParams();

  return (
    <Form method="get" className="flex flex-wrap gap-3 items-end">
      {/* Keyword */}
      <div className="flex flex-col gap-1">
        <label className="text-xs text-gray-400">キーワード</label>
        <input
          name="keyword"
          type="text"
          defaultValue={searchParams.get("keyword") ?? ""}
          placeholder="アーティスト名、イベント名..."
          className="rounded-md bg-gray-800 border border-gray-700 px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 w-full sm:w-52"
        />
      </div>

      {/* Venue */}
      <div className="flex flex-col gap-1">
        <label className="text-xs text-gray-400">会場</label>
        <select
          name="venue_id"
          defaultValue={searchParams.get("venue_id") ?? ""}
          className="rounded-md bg-gray-800 border border-gray-700 px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
        >
          <option value="">すべて</option>
          {venues.map((v) => (
            <option key={v.id} value={v.id}>
              {v.name}
            </option>
          ))}
        </select>
      </div>

      {/* Date from */}
      <div className="flex flex-col gap-1">
        <label className="text-xs text-gray-400">開始日</label>
        <input
          name="date_from"
          type="date"
          defaultValue={searchParams.get("date_from") ?? defaultDateFrom ?? ""}
          className="rounded-md bg-gray-800 border border-gray-700 px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
        />
      </div>

      {/* Date to */}
      <div className="flex flex-col gap-1">
        <label className="text-xs text-gray-400">終了日</label>
        <input
          name="date_to"
          type="date"
          defaultValue={searchParams.get("date_to") ?? defaultDateTo ?? ""}
          className="rounded-md bg-gray-800 border border-gray-700 px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
        />
      </div>

      {/* Capacity */}
      <div className="flex flex-col gap-1">
        <label className="text-xs text-gray-400">キャパシティ</label>
        <select
          name="capacity_range"
          defaultValue={searchParams.get("capacity_range") ?? ""}
          className="rounded-md bg-gray-800 border border-gray-700 px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
        >
          <option value="">すべて</option>
          <option value="small">〜100人（小箱）</option>
          <option value="medium">100〜300人（中箱）</option>
          <option value="large">300人〜（大箱）</option>
        </select>
      </div>

      <button
        type="submit"
        className="rounded-md bg-gray-700 px-4 py-1.5 text-sm font-medium hover:bg-gray-600 transition-colors"
      >
        絞り込む
      </button>

      {hasFilters(searchParams) && (
        <a
          href="/events"
          className="rounded-md border border-gray-700 px-4 py-1.5 text-sm text-gray-400 hover:text-white transition-colors"
        >
          クリア
        </a>
      )}
    </Form>
  );
}

function hasFilters(params: URLSearchParams): boolean {
  return ["keyword", "venue_id", "date_from", "date_to", "capacity_range"].some((k) => params.get(k));
}