import type { ContractSummary } from "../../lib/api";

interface HistoryFiltersProps {
  contracts: ContractSummary[];
  selectedContractId: string | null;
  onContractChange: (contractId: string | null) => void;
  dateFrom: string;
  dateTo: string;
  onDateFromChange: (date: string) => void;
  onDateToChange: (date: string) => void;
  totalCount: number;
}

export function HistoryFilters({
  contracts,
  selectedContractId,
  onContractChange,
  dateFrom,
  dateTo,
  onDateFromChange,
  onDateToChange,
  totalCount,
}: HistoryFiltersProps) {
  return (
    <div className="shrink-0 flex items-center gap-4 p-3 border border-[rgba(117,170,252,0.15)] bg-[rgba(0,0,0,0.2)]">
      {/* Contract filter */}
      <div className="flex items-center gap-2">
        <label className="font-mono text-[10px] text-[#7788aa] uppercase">Contract</label>
        <select
          value={selectedContractId || ""}
          onChange={(e) => onContractChange(e.target.value || null)}
          className="font-mono text-xs text-[#9bc3ff] bg-[#0a1525] border border-[rgba(117,170,252,0.25)] px-2 py-1 focus:border-[#3f6fb3] focus:outline-none min-w-[150px]"
        >
          <option value="">All Contracts</option>
          {contracts.map((contract) => (
            <option key={contract.id} value={contract.id}>
              {contract.name}
            </option>
          ))}
        </select>
      </div>

      {/* Date range */}
      <div className="flex items-center gap-2">
        <label className="font-mono text-[10px] text-[#7788aa] uppercase">From</label>
        <input
          type="date"
          value={dateFrom}
          onChange={(e) => onDateFromChange(e.target.value)}
          className="font-mono text-xs text-[#9bc3ff] bg-[#0a1525] border border-[rgba(117,170,252,0.25)] px-2 py-1 focus:border-[#3f6fb3] focus:outline-none"
        />
      </div>

      <div className="flex items-center gap-2">
        <label className="font-mono text-[10px] text-[#7788aa] uppercase">To</label>
        <input
          type="date"
          value={dateTo}
          onChange={(e) => onDateToChange(e.target.value)}
          className="font-mono text-xs text-[#9bc3ff] bg-[#0a1525] border border-[rgba(117,170,252,0.25)] px-2 py-1 focus:border-[#3f6fb3] focus:outline-none"
        />
      </div>

      {/* Clear filters */}
      {(selectedContractId || dateFrom || dateTo) && (
        <button
          onClick={() => {
            onContractChange(null);
            onDateFromChange("");
            onDateToChange("");
          }}
          className="font-mono text-[10px] text-[#7788aa] hover:text-[#9bc3ff] uppercase transition-colors"
        >
          Clear Filters
        </button>
      )}

      {/* Result count */}
      <div className="ml-auto font-mono text-[10px] text-[#556677]">
        {totalCount} event{totalCount !== 1 ? "s" : ""}
      </div>
    </div>
  );
}
