import React from 'react';
import { RocketIcon, TrendingUpIcon, XIcon } from 'lucide-react';

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

/**
 * The copilot when it is closed: the floating button bottom-right, and above
 * it the one thing worth interrupting for - the quest or setup step it wants
 * the merchant to look at next.
 *
 * @param props - Component props.
 * @param props.logo - The plugin icon WordPress localized, when there is one.
 * @param props.questCount - How many open quests the badge counts.
 * @param props.notification - The line above the button, when there is one.
 * @param props.setupIncomplete - Setup is still running, so the mark is a
 *   rocket rather than the growth arrow.
 * @param props.onOpen - Open the panel.
 * @param props.onAct - Act on the notification: ask about it, or just open.
 * @param props.onDismiss - Put the notification away.
 * @return The launcher.
 */
export function Launcher({
  logo,
  questCount,
  notification,
  setupIncomplete,
  onOpen,
  onAct,
  onDismiss,
}: {
  logo: string;
  questCount: number;
  notification: string | null;
  setupIncomplete: boolean;
  onOpen: () => void;
  onAct: () => void;
  onDismiss: () => void;
}): React.ReactElement {
  return (
    <div className="recomaze-copilot-launcher fixed bottom-5 right-5 z-50 flex flex-col items-end gap-3">
      {notification && (
        <div className="flex max-w-[300px] items-start gap-3 rounded-2xl border border-border bg-card py-3 pl-4 pr-2 shadow-xl duration-300 animate-in fade-in slide-in-from-right-2">
          <button
            type="button"
            onClick={onAct}
            className="flex items-start gap-3 text-left"
          >
            {setupIncomplete ? (
              <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-brand/10">
                <RocketIcon className="h-4 w-4 text-brand" />
              </span>
            ) : (
              <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-emerald-500/15">
                <TrendingUpIcon className="h-4 w-4 text-emerald-600" />
              </span>
            )}
            <p className="text-sm font-medium leading-snug text-foreground">
              {notification}
            </p>
          </button>
          <Button
            onClick={onDismiss}
            aria-label="Dismiss notification"
            variant="ghost"
            size="icon-xs"
            className="shrink-0 text-muted-foreground/70"
          >
            <XIcon className="h-3.5 w-3.5" />
          </Button>
        </div>
      )}
      <button
        type="button"
        onClick={onOpen}
        className="relative flex h-14 w-14 items-center justify-center rounded-2xl bg-linear-to-br from-pink-500 to-brand shadow-[0_8px_30px_rgba(183,0,124,0.45)] ring-1 ring-white/40 transition-transform duration-300 hover:scale-105 animate-in fade-in zoom-in"
        aria-label="Open Recomaze Co-pilot"
      >
        {logo ? (
          <img
            src={logo}
            alt="Recomaze Co-pilot"
            className="h-8 w-8 object-contain"
          />
        ) : (
          <span className="text-lg font-bold text-white">R</span>
        )}
        {questCount > 0 && (
          <span className="absolute -right-1.5 -top-1.5 flex h-6 min-w-6 items-center justify-center rounded-full bg-card px-1.5 text-xs font-bold text-brand shadow-sm">
            {questCount}
          </span>
        )}
      </button>
    </div>
  );
}