"use client";

import { ShieldAlert } from "lucide-react";
import { usePathname } from "next/navigation";
import { useState } from "react";

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;
  onLabel: string;
  offLabel: string;
};

export function SidebarMaintenanceControl({
  action,
  initialEnabled,
  label,
  onLabel,
  offLabel,
}: SidebarMaintenanceControlProps) {
  const pathname = usePathname();
  const [enabled, setEnabled] = useState(initialEnabled);

  return (
    <form id="sidebar-maintenance-form" action={action} className="space-y-2">
      <input type="hidden" name="redirectPath" value={pathname} />

      <label
        htmlFor="sidebar-maintenance-enabled"
        className={cn(
          "flex cursor-pointer items-center justify-between gap-3 rounded-nested border px-3 py-2 transition-colors",
          enabled
            ? "border-status-warning/40 bg-status-warning-soft/80"
            : "border-input bg-card hover:bg-accent/20",
        )}
      >
        <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-border bg-background text-muted-foreground",
            )}
          >
            <ShieldAlert className="h-4 w-4" />
          </span>
          <span className="min-w-0">
            <span className="block text-sm font-medium text-foreground">{label}</span>
            <span className="block text-xs text-muted-foreground">
              {enabled ? onLabel : offLabel}
            </span>
          </span>
        </span>

        <Badge variant={enabled ? "warning" : "success"}>
          {enabled ? "ON" : "OFF"}
        </Badge>
      </label>

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