import * as React from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export type AlertSeverity = "NEED_ACTION" | "WATCH" | "INSIGHT";

export interface ReviewableAlert {
  id: string;
  name: string;
  severityCode: AlertSeverity;
  snoozedUntil?: string;
  dismissed?: boolean;
}

export interface ReviewAlertsDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  alerts: ReviewableAlert[];
  onSave: (
    alertId: string,
    action: { markDone: boolean; snooze: boolean },
  ) => void;
  className?: string;
}

// ---------------------------------------------------------------------------
// Severity config
// ---------------------------------------------------------------------------

const SEVERITY_CONFIG: Record<AlertSeverity, { dot: string; text: string }> = {
  NEED_ACTION: { dot: "bg-destructive", text: "text-destructive" },
  WATCH: { dot: "bg-warning", text: "text-warning" },
  INSIGHT: { dot: "bg-success", text: "text-success" },
};

// ---------------------------------------------------------------------------
// ReviewAlertsDialog
// ---------------------------------------------------------------------------

export function ReviewAlertsDialog({
  open,
  onOpenChange,
  alerts,
  onSave,
  className,
}: ReviewAlertsDialogProps) {
  const [markDone, setMarkDone] = React.useState(false);
  const [snooze, setSnooze] = React.useState(false);

  const activeAlert = alerts.find((a) => !a.dismissed && !a.snoozedUntil);

  React.useEffect(() => {
    if (open) {
      setMarkDone(false);
      setSnooze(false);
    }
  }, [open, activeAlert?.id]);

  const canSave = (markDone || snooze) && !!activeAlert;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent size="sm" className={className}>
        <DialogHeader>
          <DialogTitle>Alerts</DialogTitle>
        </DialogHeader>

        {/* Alert list */}
        <div className="flex flex-col gap-2">
          {alerts.length === 0 ? (
            <p className="text-sm text-muted-foreground">
              No alerts for this client.
            </p>
          ) : (
            alerts.map((alert) => {
              const { dot, text } = SEVERITY_CONFIG[alert.severityCode];
              return (
                <div
                  key={alert.id}
                  className={cn(
                    "flex items-center gap-2",
                    alert.id !== activeAlert?.id && "opacity-40",
                  )}
                >
                  <span
                    aria-hidden
                    className={cn(
                      "inline-block size-2 shrink-0 rounded-full",
                      dot,
                    )}
                  />
                  <span className={cn("text-sm font-medium", text)}>
                    {alert.name}
                  </span>
                </div>
              );
            })
          )}
        </div>

        {/* Actions */}
        {activeAlert && (
          <div className="flex flex-col gap-3">
            <p className="text-sm font-medium text-foreground">Actions</p>

            <div className="flex items-center gap-2">
              <Checkbox
                id="alert-mark-done"
                checked={markDone}
                onCheckedChange={(v) => setMarkDone(!!v)}
              />
              <Label
                htmlFor="alert-mark-done"
                className="cursor-pointer font-normal"
              >
                Mark as done (will reset in 6 months)
              </Label>
            </div>

            <div className="flex items-center gap-2">
              <Checkbox
                id="alert-snooze"
                checked={snooze}
                onCheckedChange={(v) => setSnooze(!!v)}
              />
              <Label
                htmlFor="alert-snooze"
                className="cursor-pointer font-normal"
              >
                Snooze for 30 days
              </Label>
            </div>
          </div>
        )}

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button
            disabled={!canSave}
            onClick={() => onSave(activeAlert!.id, { markDone, snooze })}
          >
            Save
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}