import { AlertCircle, WifiOff } from "lucide-react";
import { Button } from "@/components/ui/button";

type ProviderDrawerErrorProps = {
  kind: "not_found" | "network";
  onRetry?: () => void;
  onClose: () => void;
};

const COPY = {
  not_found: {
    eyebrow: "NOT FOUND",
    message: "This provider doesn't exist or has been removed.",
  },
  network: {
    eyebrow: "CONNECTION",
    message: "Couldn't reach the server. Check your connection and try again.",
  },
} as const;

/**
 * Error state for the provider drill-down drawer (SP21 Task 2.2).
 *
 * Two shapes — `not_found` (the NPI in the URL doesn't resolve on the
 * server, e.g. a stale deep link) and `network` (the request failed).
 * The not_found variant has no retry affordance (retrying won't help),
 * the network variant does when `onRetry` is supplied.
 *
 * Visual twin of `RemitDrawerError` / `ClaimDrawerError` so the drawer
 * family feels like one component family — same icon size, same eyebrow
 * color, same button spacing.
 */
export function ProviderDrawerError({
  kind,
  onRetry,
  onClose,
}: ProviderDrawerErrorProps) {
  const { eyebrow, message } = COPY[kind];
  const Icon = kind === "network" ? WifiOff : AlertCircle;

  return (
    <div
      className="flex flex-col items-start gap-4 p-6 bg-[color:var(--m-surface)] text-[color:var(--m-ink-primary)]"
      role="alert"
      data-testid={`provider-drawer-error-${kind}`}
    >
      <div className="flex items-center gap-2">
        <Icon
          className="h-5 w-5 text-[color:var(--m-error)]"
          strokeWidth={1.75}
          aria-hidden
        />
        <span className="eyebrow text-[color:var(--m-error)]">
          {eyebrow}
        </span>
      </div>
      <p className="text-sm text-[color:var(--m-ink-secondary)] max-w-sm">{message}</p>
      <div className="flex items-center gap-2">
        {kind === "network" && onRetry ? (
          <Button variant="outline" size="sm" onClick={onRetry} data-testid="error-retry">
            Retry
          </Button>
        ) : null}
        <Button variant="ghost" size="sm" onClick={onClose} data-testid="error-close">
          Close
        </Button>
      </div>
    </div>
  );
}