"use client";

import { ShieldAlert } from "lucide-react";
import { usePathname } from "next/navigation";
import { useRef, useState } from "react";
import { useFormStatus } from "react-dom";

import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import { cn } from "@/lib/utils";

type SidebarMaintenanceControlProps = {
  action: (formData: FormData) => Promise<void>;
  initialEnabled: boolean;
  label: string;
};

type SidebarMaintenanceFieldProps = Omit<
  SidebarMaintenanceControlProps,
  "action" | "initialEnabled"
> & {
  enabled: boolean;
  onToggle: (checked: boolean) => void;
};

function SidebarMaintenanceField({
  enabled,
  label,
  onToggle,
}: SidebarMaintenanceFieldProps) {
  const { pending } = useFormStatus();

  return (
    <>
      <label
        htmlFor="sidebar-maintenance-enabled"
        aria-disabled={pending}
        className={cn(
          "flex items-center justify-between gap-3 rounded-nested border px-3 py-2 transition-colors",
          pending && "cursor-wait opacity-70",
          !pending && "cursor-pointer",
          enabled
            ? "border-status-warning/40 bg-status-warning-soft/80"
            : "border-status-success/30 bg-status-success-soft/80 hover:bg-status-success-soft",
        )}
      >
        <span className="flex min-w-0 items-center gap-3">
          <span
            className={cn(
              "flex h-9 w-9 items-center justify-center rounded-pill border",
              enabled
                ? "border-status-warning/40 bg-status-warning-soft text-status-warning"
                : "border-status-success/30 bg-status-success-soft text-status-success",
            )}
          >
            <ShieldAlert className="h-4 w-4" />
          </span>
          <span className="min-w-0 text-sm font-medium text-foreground">{label}</span>
        </span>

        <Badge variant={enabled ? "warning" : "success"}>
          {enabled ? "OFFLINE" : "LIVE"}
        </Badge>
      </label>

      <Checkbox
        id="sidebar-maintenance-enabled"
        checked={enabled}
        checkedValue="true"
        uncheckedValue="false"
        disabled={pending}
        onCheckedChange={(checked) => onToggle(checked === true)}
        className="sr-only"
      />
    </>
  );
}

export function SidebarMaintenanceControl({
  action,
  initialEnabled,
  label,
}: SidebarMaintenanceControlProps) {
  const formRef = useRef<HTMLFormElement>(null);
  const enabledInputRef = useRef<HTMLInputElement>(null);
  const pathname = usePathname();
  const [enabled, setEnabled] = useState(initialEnabled);

  return (
    <form
      id="sidebar-maintenance-form"
      ref={formRef}
      action={action}
      className="space-y-2"
    >
      <input type="hidden" name="redirectPath" value={pathname} />
      <input
        ref={enabledInputRef}
        type="hidden"
        name="enabled"
        value={enabled ? "true" : "false"}
      />
      <SidebarMaintenanceField
        enabled={enabled}
        label={label}
        onToggle={(checked) => {
          setEnabled(checked);
          if (enabledInputRef.current) {
            enabledInputRef.current.value = checked ? "true" : "false";
          }
          formRef.current?.requestSubmit();
        }}
      />
    </form>
  );
}