brackt/app/components/league/settings/HistoryDangerSection.tsx

import { Activity, RotateCcw, ShieldAlert } from "lucide-react";
import { Form, Link } from "react-router";
import { Button } from "~/components/ui/button";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "~/components/ui/alert-dialog";
import { cn } from "~/lib/utils";
import { SettingsSection, SettingsStatusPill } from "./SettingsSection";

export function HistoryDangerSection({
  active,
  league,
  season,
  isAdmin,
  isDeleteDialogOpen,
  onDeleteDialogOpenChange,
  navigationState,
}: {
  active: boolean;
  league: { id: string; name: string };
  season: { id: string } | null;
  isAdmin: boolean;
  isDeleteDialogOpen: boolean;
  onDeleteDialogOpenChange: (open: boolean) => void;
  navigationState: "idle" | "loading" | "submitting";
}) {
  return (
    <SettingsSection
      id="history-danger"
      icon={ShieldAlert}
      title="History & Danger"
      description="Audit history is informational. Reset and delete actions are intentionally separated from normal settings."
      status={<SettingsStatusPill tone="warning">Careful</SettingsStatusPill>}
      className={cn("border-destructive/40", !active && "hidden")}
    >
      <div className="space-y-3">
        <div className="flex flex-col gap-4 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between">
          <div className="flex min-w-0 items-start gap-3">
            <Activity className="mt-0.5 h-5 w-5 shrink-0 text-muted-foreground" />
            <div>
              <h3 className="font-semibold">Audit Log</h3>
              <p className="mt-1 text-sm text-muted-foreground">View the full history of commissioner actions for this season.</p>
            </div>
          </div>
          <Button variant="outline" className="sm:w-44" asChild>
            <Link to={`/leagues/${league.id}/audit-log`}>View Audit Log</Link>
          </Button>
        </div>

        {isAdmin && season && (
          <div className="flex flex-col gap-4 rounded-lg border border-destructive/30 p-4 sm:flex-row sm:items-center sm:justify-between">
            <div className="flex min-w-0 items-start gap-3">
              <RotateCcw className="mt-0.5 h-5 w-5 shrink-0 text-destructive" />
              <div>
                <h3 className="font-semibold">Reset Draft</h3>
                <p className="mt-1 text-sm text-muted-foreground">
                  Delete all picks, queues, and timers. Draft order is preserved.
                </p>
              </div>
            </div>
            <AlertDialog>
              <AlertDialogTrigger asChild>
                <Button variant="destructive" className="sm:w-44">
                  Reset Draft
                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
                  <AlertDialogTitle>Reset the draft?</AlertDialogTitle>
                  <AlertDialogDescription>
                    This deletes all draft picks, queues, and timers, then returns the season to pre-draft. This cannot be undone.
                  </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                  <AlertDialogCancel>Cancel</AlertDialogCancel>
                  <Form method="post">
                    <input type="hidden" name="intent" value="reset-draft" />
                    <AlertDialogAction type="submit" className="bg-destructive hover:bg-destructive/90">
                      Reset Draft
                    </AlertDialogAction>
                  </Form>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </div>
        )}

        <div className="flex flex-col gap-4 rounded-lg border border-destructive/30 p-4 sm:flex-row sm:items-center sm:justify-between">
          <div className="flex min-w-0 items-start gap-3">
            <ShieldAlert className="mt-0.5 h-5 w-5 shrink-0 text-destructive" />
            <div>
              <h3 className="font-semibold">Delete League</h3>
              <p className="mt-1 text-sm text-muted-foreground">
                Permanently delete this league and all associated data.
              </p>
            </div>
          </div>
          <AlertDialog open={isDeleteDialogOpen} onOpenChange={onDeleteDialogOpenChange}>
            <AlertDialogTrigger asChild>
              <Button variant="destructive" className="sm:w-44" disabled={navigationState === "submitting"}>
                Delete League
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                <AlertDialogDescription>
                  This permanently deletes <strong>{league.name}</strong> and all associated data including seasons, teams, and commissioners.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <Form method="post">
                  <input type="hidden" name="intent" value="delete" />
                  <AlertDialogAction type="submit" className="bg-destructive hover:bg-destructive/90">
                    Delete League
                  </AlertDialogAction>
                </Form>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </div>
      </div>
    </SettingsSection>
  );
}