import * as React from "react";
import { cn } from "@/lib/utils";

export type ChartStatus = "ready" | "loading" | "empty" | "error" | "stale";

export type ChartShape = "area" | "bar" | "line" | "donut";

type EmptyContent = {
  title?: string;
  description?: string;
  action?: React.ReactNode;
  /** Override the default icon (a 24×24 stroke glyph reads best). */
  icon?: React.ReactNode;
};

type ErrorContent = {
  title?: string;
  message?: string;
  onRetry?: () => void;
  /** Override the default icon (a 24×24 stroke glyph reads best). */
  icon?: React.ReactNode;
};

type ChartStatesProps = {
  status: ChartStatus;
  shape?: ChartShape;
  /** Minimum height for state placeholders so the layout doesn't jump. */
  minHeight?: number;
  empty?: EmptyContent;
  error?: ErrorContent;
  stale?: { since?: Date; message?: string };
  className?: string;
  children: React.ReactNode;
};

/**
 * Wraps a chart so it handles loading / empty / error / stale states
 * with shapes that match the final chart layout. The headline primitive
 * of the Sextant collection.
 *
 * Self-contained: the skeleton shimmer and the placeholder enter-animation
 * ship inside this file (a single scoped <style>) and both honor
 * `prefers-reduced-motion`, so there's no external CSS or animation dependency.
 */
export function ChartStates({
  status,
  shape = "area",
  minHeight = 256,
  empty,
  error,
  stale,
  className,
  children,
}: ChartStatesProps) {
  if (status === "loading") {
    return (
      <div
        className={cn(
          "sx-state-in relative overflow-hidden rounded-md border bg-card",
          className,
        )}
        style={{ height: minHeight }}
        aria-busy="true"
      >
        <StateStyles />
        <ChartSkeleton shape={shape} />
      </div>
    );
  }

  if (status === "empty") {
    return (
      <div
        className={cn(
          "sx-state-in flex flex-col items-center justify-center gap-1 rounded-md border border-dashed bg-muted/20 p-8 text-center",
          className,
        )}
        style={{ minHeight }}
      >
        <StateStyles />
        <StateBadge tone="muted">{empty?.icon ?? <InboxIcon />}</StateBadge>
        <p className="mt-1 font-medium">{empty?.title ?? "Nothing here yet"}</p>
        {empty?.description && (
          <p className="max-w-xs text-sm leading-relaxed text-muted-foreground">
            {empty.description}
          </p>
        )}
        {empty?.action && <div className="mt-3">{empty.action}</div>}
      </div>
    );
  }

  if (status === "error") {
    return (
      <div
        className={cn(
          "sx-state-in flex flex-col items-center justify-center gap-1 rounded-md border border-destructive/20 bg-destructive/[0.06] p-8 text-center",
          className,
        )}
        style={{ minHeight }}
        role="alert"
      >
        <StateStyles />
        <StateBadge tone="destructive">{error?.icon ?? <AlertIcon />}</StateBadge>
        <p className="mt-1 font-medium text-destructive">
          {error?.title ?? "Couldn't load this chart"}
        </p>
        {error?.message && (
          <p className="max-w-xs text-sm leading-relaxed text-muted-foreground">
            {error.message}
          </p>
        )}
        {error?.onRetry && (
          <button
            type="button"
            onClick={error.onRetry}
            className="mt-3 inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
          >
            <RetryIcon />
            Retry
          </button>
        )}
      </div>
    );
  }

  // ready / stale — render children. stale layers a banner on top.
  // `key={status}` remounts this wrapper on every status change, so the
  // `sx-state-in` enter replays — a freshly-loaded (loading → ready) or
  // newly-stale chart fades up instead of hard-swapping. Reduced-motion aware
  // via the same keyframe guard the skeleton uses.
  return (
    <div key={status} className={cn("sx-state-in relative", className)}>
      <StateStyles />
      {status === "stale" && (
        <div className="pointer-events-none absolute inset-x-0 top-0 z-10 flex justify-center">
          <span className="smallcaps pointer-events-auto mt-2 inline-flex items-center gap-1.5 rounded-full border border-chart-warning/25 bg-chart-warning/10 px-2.5 py-1 text-[0.625rem] backdrop-blur">
            <span className="size-1.5 rounded-full bg-chart-warning" />
            {stale?.message ??
              (stale?.since
                ? `Stale — last updated ${formatRelative(stale.since)}`
                : "Stale data")}
          </span>
        </div>
      )}
      {children}
    </div>
  );
}

function formatRelative(d: Date): string {
  const diffMs = Date.now() - d.getTime();
  const m = Math.round(diffMs / 60_000);
  if (m < 1) return "just now";
  if (m < 60) return `${m}m ago`;
  const h = Math.round(m / 60);
  if (h < 24) return `${h}h ago`;
  return `${Math.round(h / 24)}d ago`;
}

/* ------------------------------------------------------------------ */
/* Scoped animation — shimmer sweep + placeholder enter, reduced-motion */
/* aware. Inlined so the primitive ships without any CSS dependency.    */
/* ------------------------------------------------------------------ */

function StateStyles() {
  return (
    <style>{`
      @keyframes sx-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
      @keyframes sx-state-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
      .sx-shimmer { animation: sx-shimmer 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
      .sx-state-in { animation: sx-state-in 360ms cubic-bezier(0.25, 1, 0.5, 1) both; }
      @media (prefers-reduced-motion: reduce) {
        .sx-shimmer { animation: none; }
        .sx-state-in { animation: none; }
      }
    `}</style>
  );
}

/* ------------------------------------------------------------------ */
/* Icons — inline stroke glyphs (lucide geometry), no icon dependency.  */
/* ------------------------------------------------------------------ */

function StateGlyph({ children }: { children: React.ReactNode }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.75}
      strokeLinecap="round"
      strokeLinejoin="round"
      className="size-5"
      aria-hidden
    >
      {children}
    </svg>
  );
}

function StateBadge({
  tone,
  children,
}: {
  tone: "muted" | "destructive";
  children: React.ReactNode;
}) {
  return (
    <div
      className={cn(
        "flex size-11 items-center justify-center rounded-full",
        tone === "destructive"
          ? "bg-destructive/10 text-destructive"
          : "bg-muted text-muted-foreground",
      )}
    >
      {children}
    </div>
  );
}

function InboxIcon() {
  return (
    <StateGlyph>
      <path d="M22 12h-6l-2 3h-4l-2-3H2" />
      <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
    </StateGlyph>
  );
}

function AlertIcon() {
  return (
    <StateGlyph>
      <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" />
      <path d="M12 9v4" />
      <path d="M12 17h.01" />
    </StateGlyph>
  );
}

function RetryIcon() {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className="size-3.5"
      aria-hidden
    >
      <path d="M3 12a9 9 0 1 0 3-6.7L3 8" />
      <path d="M3 3v5h5" />
    </svg>
  );
}

/* ------------------------------------------------------------------ */
/* Shape-matched skeletons — pure SVG, with a sweeping shimmer.         */
/* ------------------------------------------------------------------ */

function ChartSkeleton({ shape }: { shape: ChartShape }) {
  return (
    <div className="relative h-full w-full overflow-hidden rounded-md">
      <div className="absolute inset-0">
        {shape === "area" && <AreaSkeleton />}
        {shape === "line" && <LineSkeleton />}
        {shape === "bar" && <BarSkeleton />}
        {shape === "donut" && <DonutSkeleton />}
      </div>
      {/* Sweeping highlight — the premium "shimmer" over the static shapes. */}
      <div className="absolute inset-0 overflow-hidden">
        <div
          className="sx-shimmer absolute -inset-x-1/4 inset-y-0 w-1/2"
          style={{
            background:
              "linear-gradient(100deg, transparent 0%, color-mix(in oklch, var(--foreground) 9%, transparent) 50%, transparent 100%)",
          }}
        />
      </div>
      <div className="absolute inset-x-0 bottom-2 flex justify-end px-3">
        <span className="smallcaps inline-flex items-center gap-1.5 text-[0.625rem]">
          <span className="size-1.5 animate-pulse rounded-full bg-muted-foreground" />
          Loading
        </span>
      </div>
    </div>
  );
}

function AreaSkeleton() {
  return (
    <svg
      viewBox="0 0 400 200"
      preserveAspectRatio="none"
      className="h-full w-full"
      aria-hidden
    >
      <defs>
        <linearGradient id="cs-area" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--foreground)" stopOpacity="0.16" />
          <stop offset="100%" stopColor="var(--foreground)" stopOpacity="0.03" />
        </linearGradient>
      </defs>
      <path
        d="M0,150 C40,130 80,110 120,105 C160,100 200,120 240,95 C280,70 320,80 360,60 L400,55 L400,200 L0,200 Z"
        fill="url(#cs-area)"
      />
      <path
        d="M0,150 C40,130 80,110 120,105 C160,100 200,120 240,95 C280,70 320,80 360,60 L400,55"
        fill="none"
        stroke="var(--foreground)"
        strokeOpacity="0.28"
        strokeWidth="2"
      />
    </svg>
  );
}

function LineSkeleton() {
  return (
    <svg
      viewBox="0 0 400 200"
      preserveAspectRatio="none"
      className="h-full w-full"
      aria-hidden
    >
      <path
        d="M0,140 C40,120 80,160 120,125 C160,90 200,135 240,100 C280,65 320,90 360,70 L400,75"
        fill="none"
        stroke="var(--foreground)"
        strokeOpacity="0.28"
        strokeWidth="2"
      />
    </svg>
  );
}

function BarSkeleton() {
  const widths = [0.55, 0.7, 0.45, 0.85, 0.62, 0.78, 0.4, 0.9, 0.55, 0.68];
  return (
    <svg
      viewBox="0 0 400 200"
      preserveAspectRatio="none"
      className="h-full w-full"
      aria-hidden
    >
      {widths.map((h, i) => {
        const w = 32;
        const gap = 8;
        const x = i * (w + gap) + 8;
        const barH = h * 160;
        return (
          <rect
            key={i}
            x={x}
            y={180 - barH}
            width={w}
            height={barH}
            rx={2}
            fill="var(--foreground)"
            fillOpacity={0.14}
          />
        );
      })}
    </svg>
  );
}

function DonutSkeleton() {
  return (
    <svg viewBox="0 0 200 200" className="h-full w-full" aria-hidden>
      <circle
        cx={100}
        cy={100}
        r={70}
        fill="none"
        stroke="var(--foreground)"
        strokeOpacity={0.12}
        strokeWidth={24}
      />
      <circle
        cx={100}
        cy={100}
        r={70}
        fill="none"
        stroke="var(--foreground)"
        strokeOpacity={0.3}
        strokeWidth={24}
        strokeDasharray="180 280"
        strokeLinecap="round"
        transform="rotate(-90 100 100)"
      />
    </svg>
  );
}