"use client";

import { Input } from "@/components/ui/input";
import { actionLabels } from "./constants";

export interface AuditFilterValues {
  agentId: string;
  action: string;
  timeRange: string;
  subject: string;
  predicate: string;
}

interface AuditFiltersProps {
  values: AuditFilterValues;
  onChange: (values: AuditFilterValues) => void;
  availableActions: string[];
}

export function AuditFilters({
  values,
  onChange,
  availableActions,
}: AuditFiltersProps) {
  return (
    <div className="flex items-center gap-4 flex-wrap">
      {/* Subject filter */}
      <div className="flex items-center gap-2">
        <label htmlFor="subject-filter" className="text-sm text-muted-foreground">
          Subject:
        </label>
        <Input
          id="subject-filter"
          type="text"
          placeholder="Filter by subject..."
          value={values.subject}
          onChange={(e) => onChange({ ...values, subject: e.target.value })}
          className="w-40"
        />
      </div>

      {/* Predicate filter */}
      <div className="flex items-center gap-2">
        <label htmlFor="predicate-filter" className="text-sm text-muted-foreground">
          Predicate:
        </label>
        <Input
          id="predicate-filter"
          type="text"
          placeholder="Filter by predicate..."
          value={values.predicate}
          onChange={(e) => onChange({ ...values, predicate: e.target.value })}
          className="w-40"
        />
      </div>

      {/* Agent ID filter */}
      <div className="flex items-center gap-2">
        <label htmlFor="agent-filter" className="text-sm text-muted-foreground">
          Agent:
        </label>
        <Input
          id="agent-filter"
          type="text"
          placeholder="Filter by agent..."
          value={values.agentId}
          onChange={(e) => onChange({ ...values, agentId: e.target.value })}
          className="w-40"
        />
      </div>

      {/* Action filter */}
      <div className="flex items-center gap-2">
        <label
          htmlFor="action-filter"
          className="text-sm text-muted-foreground"
        >
          Action:
        </label>
        <select
          id="action-filter"
          value={values.action}
          onChange={(e) => onChange({ ...values, action: e.target.value })}
          className="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none"
        >
          <option value="">All actions</option>
          {availableActions.map((action) => {
            const label = actionLabels[action] ?? action;
            return (
              <option key={action} value={action}>
                {label}
              </option>
            );
          })}
        </select>
      </div>

      {/* Time range filter */}
      <div className="flex items-center gap-2">
        <label htmlFor="time-filter" className="text-sm text-muted-foreground">
          Time:
        </label>
        <select
          id="time-filter"
          value={values.timeRange}
          onChange={(e) => onChange({ ...values, timeRange: e.target.value })}
          className="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none"
        >
          <option value="1h">Last hour</option>
          <option value="24h">Last 24 hours</option>
          <option value="7d">Last 7 days</option>
          <option value="30d">Last 30 days</option>
          <option value="all">All time</option>
        </select>
      </div>

      {/* Clear filters */}
      {(values.subject || values.predicate || values.agentId || values.action || values.timeRange !== "24h") && (
        <button
          onClick={() =>
            onChange({ subject: "", predicate: "", agentId: "", action: "", timeRange: "24h" })
          }
          className="text-xs text-primary hover:underline"
        >
          Clear filters
        </button>
      )}
    </div>
  );
}
