import React from 'react';
import {
  ArrowRightIcon,
  CircleAlertIcon,
  CircleCheckIcon,
  LoaderCircleIcon,
} from 'lucide-react';

import { Button } from '../../ui/button';
import { cn } from '../cn';

/** How a status card reads: still going, done, done with nothing, or failed. */
export type StatusTone = 'working' | 'done' | 'quiet' | 'failed';

/** The button on a status card. */
export interface StatusAction {
  label: string;
  onClick: () => void;
  /** Whether it is the filled button; the tone decides when this is unset. */
  primary?: boolean;
}

/** The card's frame, by tone. */
const CARD_CLASS: Record<StatusTone, string> = {
  working: 'border-brand/20 bg-brand/5',
  done: 'border-brand/20 bg-brand/5 duration-300 animate-in fade-in',
  quiet: 'border-border bg-muted duration-300 animate-in fade-in',
  failed: 'border-amber-500/40 bg-amber-500/5 duration-300 animate-in fade-in',
};

/** Whether a tone's action is filled when the card does not say. */
const DEFAULT_PRIMARY: Record<StatusTone, boolean> = {
  working: false,
  done: true,
  quiet: false,
  failed: true,
};

/**
 * The mark at the left of a status card.
 *
 * @param props - Component props.
 * @param props.tone - How the card reads.
 * @return The icon.
 */
function StatusIcon({ tone }: { tone: StatusTone }): React.ReactElement {
  if (tone === 'working') {
    return (
      <LoaderCircleIcon className="h-5 w-5 shrink-0 animate-spin text-brand" />
    );
  }
  if (tone === 'failed') {
    return <CircleAlertIcon className="h-5 w-5 shrink-0 text-amber-600" />;
  }
  return (
    <CircleCheckIcon
      className={cn(
        'h-5 w-5 shrink-0',
        tone === 'done' ? 'text-brand' : 'text-muted-foreground/70'
      )}
    />
  );
}

/**
 * The card under a turn that started something long-running: a spinner and a
 * bar while it runs, a tick when it lands, a way to what it produced. Every
 * long job in the conversation wears this same object, so "working" looks the
 * same whether it is an article, a scan or a Company ID read.
 *
 * @param props - Component props.
 * @param props.tone - How the card reads.
 * @param props.title - The headline.
 * @param props.detail - The line under it.
 * @param props.action - The button, when there is somewhere to go.
 * @return The card.
 */
export function StatusCard({
  tone,
  title,
  detail,
  action,
}: {
  tone: StatusTone;
  title: string;
  detail: string;
  action?: StatusAction;
}): React.ReactElement {
  return (
    <div
      className={cn(
        'mt-3 overflow-hidden rounded-2xl border p-3.5',
        CARD_CLASS[tone]
      )}
    >
      {/* A container query, not a breakpoint: the card is narrow when the
          panel is docked, whatever the window is doing. */}
      <div className="@container flex flex-col items-start gap-3 @xs:flex-row @xs:items-center">
        <StatusIcon tone={tone} />
        <div className="min-w-0 flex-1">
          <p className="text-sm font-semibold text-foreground">{title}</p>
          <p className="text-xs text-muted-foreground">{detail}</p>
        </div>
        {action && (
          <Button
            onClick={action.onClick}
            variant={
              (action.primary ?? DEFAULT_PRIMARY[tone]) ? 'default' : 'outline'
            }
            size="xs"
            className="shrink-0 rounded-full"
          >
            {action.label}
            <ArrowRightIcon className="h-3 w-3" />
          </Button>
        )}
      </div>
      {tone === 'working' && (
        <div className="mt-3 h-1 overflow-hidden rounded-full bg-brand/10">
          <div className="h-full w-1/2 animate-pulse rounded-full bg-linear-to-r from-pink-500 to-brand" />
        </div>
      )}
    </div>
  );
}