"use client";

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

const STATUSES = [
  { value: "", label: "All statuses" },
  { value: "DRAFT", label: "Draft" },
  { value: "SUBMITTED", label: "Submitted" },
  { value: "MGR_REVIEW", label: "Pending Approval" },
  { value: "VENDOR_ID_PENDING", label: "Vendor ID Pending" },
  { value: "EDITS_REQUESTED", label: "Edits Requested" },
  { value: "MGR_APPROVED", label: "Approved" },
  { value: "SENT_FOR_PAYMENT", label: "Sent for Payment" },
  { value: "PAID_DELIVERED", label: "Paid / Delivered" },
  { value: "CLOSED", label: "Closed" },
  { value: "REJECTED", label: "Rejected" },
];

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

export function HistoryFilters({ 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") ?? "");
  const [status, setStatus] = useState(sp.get("status") ?? "");

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

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

  const hasFilters = dateFrom || dateTo || vesselId || status;

  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-4">
        <div>
          <label className="block text-xs font-medium text-neutral-600 mb-1">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">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>
          <label className="block text-xs font-medium text-neutral-600 mb-1">Status</label>
          <select value={status} onChange={(e) => setStatus(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">
            {STATUSES.map((s) => <option key={s.value} value={s.value}>{s.label}</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>
  );
}
