"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";

interface Props {
  vessels: { id: string; name: string }[];
}

export function PaymentHistoryFilters({ vessels }: Props) {
  const router = useRouter();
  const sp = useSearchParams();

  const [dateFrom, setDateFrom] = useState(sp.get("dateFrom") ?? "");
  const [dateTo, setDateTo] = useState(sp.get("dateTo") ?? "");
  const [vesselId, setVesselId] = useState(sp.get("vesselId") ?? "");

  function apply() {
    const params = new URLSearchParams();
    if (dateFrom) params.set("dateFrom", dateFrom);
    if (dateTo) params.set("dateTo", dateTo);
    if (vesselId) params.set("vesselId", vesselId);
    router.push(`/payments/history?${params.toString()}`);
  }

  function clear() {
    setDateFrom("");
    setDateTo("");
    setVesselId("");
    router.push("/payments/history");
  }

  const hasFilters = dateFrom || dateTo || vesselId;

  return (
    <div className="mb-4 rounded-lg border border-neutral-200 bg-white p-4">
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
        <div>
          <label className="block text-xs font-medium text-neutral-600 mb-1">Paid From</label>
          <input
            type="date"
            value={dateFrom}
            onChange={(e) => setDateFrom(e.target.value)}
            className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
          />
        </div>
        <div>
          <label className="block text-xs font-medium text-neutral-600 mb-1">Paid To</label>
          <input
            type="date"
            value={dateTo}
            onChange={(e) => setDateTo(e.target.value)}
            className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
          />
        </div>
        <div>
          <label className="block text-xs font-medium text-neutral-600 mb-1">Cost Centre</label>
          <select
            value={vesselId}
            onChange={(e) => setVesselId(e.target.value)}
            className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
          >
            <option value="">All cost centres</option>
            {vessels.map((v) => (
              <option key={v.id} value={v.id}>{v.name}</option>
            ))}
          </select>
        </div>
      </div>
      <div className="mt-3 flex items-center gap-2">
        <button
          onClick={apply}
          className="rounded-lg bg-primary-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-primary-700 transition-colors"
        >
          Apply
        </button>
        {hasFilters && (
          <button
            onClick={clear}
            className="rounded-lg border border-neutral-300 bg-white px-3 py-1.5 text-sm font-medium text-neutral-600 hover:bg-neutral-50 transition-colors"
          >
            Clear
          </button>
        )}
      </div>
    </div>
  );
}
