import { useRef } from "preact/hooks";

interface MaintenanceQuickActionsProps {
  requestId: string;
  status?: string | null;
  priority?: string | null;
}

function submitForm(formRef: { current: HTMLFormElement | null }) {
  const form = formRef.current;
  if (!form) return;
  if (typeof form.requestSubmit === "function") {
    form.requestSubmit();
  } else {
    form.submit();
  }
}

export default function MaintenanceQuickActions(
  { requestId, status, priority }: MaintenanceQuickActionsProps,
) {
  const statusFormRef = useRef<HTMLFormElement>(null);
  const priorityFormRef = useRef<HTMLFormElement>(null);

  return (
    <>
      <form method="POST" class="inline" ref={statusFormRef}>
        <input type="hidden" name="request_id" value={requestId} />
        <select
          name="new_status"
          defaultValue={status ?? ""}
          onChange={() => submitForm(statusFormRef)}
          aria-label="Change status"
          class="text-xs border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
        >
          <option value="">Change Status</option>
          <option value="open">Open</option>
          <option value="in_progress">In Progress</option>
          <option value="completed">Completed</option>
        </select>
      </form>

      <form method="POST" class="inline" ref={priorityFormRef}>
        <input type="hidden" name="request_id" value={requestId} />
        <select
          name="new_priority"
          defaultValue={priority ?? ""}
          onChange={() => submitForm(priorityFormRef)}
          aria-label="Change priority"
          class="text-xs border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
        >
          <option value="">Change Priority</option>
          <option value="low">Low</option>
          <option value="medium">Medium</option>
          <option value="high">High</option>
          <option value="emergency">Emergency</option>
        </select>
      </form>
    </>
  );
}