import { useState } from "react";
import { cn } from "~/utils/cn";
import type { StatusState } from "~/lib/types";

const AVATAR_COLORS = [
  "bg-orange-700",
  "bg-sky-700",
  "bg-emerald-700",
  "bg-rose-700",
  "bg-violet-700",
  "bg-amber-700",
  "bg-teal-700",
  "bg-fuchsia-700",
];
const SECONDS = 1000;
const MINUTE = 60 * SECONDS;
const HOUR = 60 * MINUTE;
const DAY = 24 * HOUR;
const MONTH = 30 * DAY;
const YEAR = 365 * DAY;
const KB = 1024;

function hash(value: string): number {
  let out = 0;
  for (const char of value) out = (out * 31 + char.charCodeAt(0)) | 0;
  return Math.abs(out);
}

const AVATAR_PIXELS = { sm: 40, md: 64, lg: 160 } as const;

/**
 * Shows an account's uploaded picture (looked up by name unless `src` is given) and falls back to
 * colored initials when there is none or it fails to load.
 */
export function Avatar({ name, size = "md", src }: { name: string; size?: "sm" | "md" | "lg"; src?: string | null }) {
  const [failedUrl, setFailedUrl] = useState<string | null>(null);
  const sizeClass = size === "sm" ? "size-5 text-[10px]" : size === "lg" ? "size-20 text-3xl" : "size-8 text-sm";
  const url = src === undefined ? `/avatars/u/${encodeURIComponent(name)}?s=${AVATAR_PIXELS[size]}` : src;
  if (url && url !== failedUrl) {
    return (
      <img
        src={url}
        alt=""
        loading="lazy"
        onError={() => setFailedUrl(url)}
        ref={(node) => {
          if (node?.complete && node.naturalWidth === 0) setFailedUrl(url);
        }}
        className={cn("shrink-0 rounded-md bg-gray-900 object-cover", sizeClass)}
      />
    );
  }
  return (
    <span
      aria-hidden
      className={cn(
        "inline-flex shrink-0 items-center justify-center rounded-md font-mono font-medium text-white uppercase",
        AVATAR_COLORS[hash(name) % AVATAR_COLORS.length],
        sizeClass,
      )}
    >
      {name.slice(0, 1)}
    </span>
  );
}

export function formatRelative(timestamp: number, now = Date.now()): string {
  const delta = now - timestamp;
  const units: Array<[number, string]> = [
    [YEAR, "year"],
    [MONTH, "month"],
    [DAY, "day"],
    [HOUR, "hour"],
    [MINUTE, "minute"],
  ];
  for (const [size, label] of units) {
    if (delta >= size) {
      const count = Math.floor(delta / size);
      return `${count} ${label}${count === 1 ? "" : "s"} ago`;
    }
  }
  return "just now";
}

export function RelativeTime({ timestamp }: { timestamp: number }) {
  return (
    <time
      dateTime={new Date(timestamp).toISOString()}
      title={new Date(timestamp).toLocaleString()}
      suppressHydrationWarning
    >
      {formatRelative(timestamp)}
    </time>
  );
}

export function formatDuration(start: number | null, end: number | null): string {
  if (!start) return "";
  const total = Math.max(0, Math.round(((end ?? Date.now()) - start) / SECONDS));
  const minutes = Math.floor(total / 60);
  return minutes > 0 ? `${minutes}m ${total % 60}s` : `${total}s`;
}

export function formatBytes(bytes: number): string {
  if (bytes < KB) return `${bytes} B`;
  if (bytes < KB * KB) return `${(bytes / KB).toFixed(1)} KB`;
  if (bytes < KB * KB * KB) return `${(bytes / KB / KB).toFixed(1)} MB`;
  return `${(bytes / KB / KB / KB).toFixed(1)} GB`;
}

const BADGE_TONES = {
  neutral: "border-gray-700 text-gray-400",
  accent: "border-accent-600/60 bg-accent-950 text-accent-300",
  green: "border-emerald-800 bg-emerald-950/50 text-emerald-300",
  red: "border-red-900 bg-red-950/50 text-red-300",
  purple: "border-violet-800 bg-violet-950/50 text-violet-300",
  amber: "border-amber-800 bg-amber-950/40 text-amber-300",
} as const;

export function Badge({
  tone = "neutral",
  children,
  className,
}: {
  tone?: keyof typeof BADGE_TONES;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium",
        BADGE_TONES[tone],
        className,
      )}
    >
      {children}
    </span>
  );
}

export function LabelChip({ name, color }: { name: string; color: string }) {
  return (
    <span
      className="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium"
      style={{ borderColor: `#${color}99`, backgroundColor: `#${color}26`, color: `#${color}` }}
    >
      {name}
    </span>
  );
}

const STATUS_STYLES: Record<string, { className: string; label: string }> = {
  success: { className: "bg-emerald-500", label: "Passing" },
  failure: { className: "bg-red-500", label: "Failing" },
  error: { className: "bg-red-500", label: "Errored" },
  pending: { className: "bg-amber-400 animate-pulse-dot", label: "Pending" },
  in_progress: { className: "bg-amber-400 animate-pulse-dot", label: "Running" },
  queued: { className: "bg-gray-500 animate-pulse-dot", label: "Queued" },
  cancelled: { className: "bg-gray-500", label: "Cancelled" },
  skipped: { className: "bg-gray-600", label: "Skipped" },
};

export function StatusDot({ state, className }: { state: StatusState | string | null; className?: string }) {
  if (!state) return null;
  const style = STATUS_STYLES[state] ?? STATUS_STYLES.queued;
  return (
    <span title={style.label} className={cn("inline-block size-2.5 shrink-0 rounded-full", style.className, className)}>
      <span className="sr-only">{style.label}</span>
    </span>
  );
}

export function runState(status: string, conclusion: string | null): string {
  return status === "completed" ? (conclusion ?? "skipped") : status;
}

export function Panel({
  title,
  actions,
  children,
  className,
}: {
  title?: React.ReactNode;
  actions?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <section className={cn("overflow-hidden rounded-lg border border-gray-800 bg-gray-950/60", className)}>
      {(title || actions) && (
        <header className="flex items-center justify-between gap-3 border-b border-gray-800 bg-gray-900/60 px-4 py-2.5">
          <div className="min-w-0 text-sm font-medium text-gray-200">{title}</div>
          {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
        </header>
      )}
      {children}
    </section>
  );
}

export function EmptyState({ title, children }: { title: string; children?: React.ReactNode }) {
  return (
    <div className="flex flex-col items-center justify-center gap-2 px-6 py-14 text-center">
      <div className="label-caps text-gray-600">∅</div>
      <h3 className="text-base font-medium text-gray-200">{title}</h3>
      {children && <div className="max-w-md text-sm text-gray-500">{children}</div>}
    </div>
  );
}

export function Markdown({ html, className }: { html: string; className?: string }) {
  return (
    <div
      className={cn("markdown", className)}
      // oxlint-disable-next-line react/no-danger -- HTML is rendered server-side by markdown-it with raw HTML disabled
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}

export function PageContainer({ children, className }: { children: React.ReactNode; className?: string }) {
  return <div className={cn("mx-auto w-full max-w-6xl px-4 py-6 md:px-6", className)}>{children}</div>;
}