import React from 'react';
import { LuLock } from 'react-icons/lu';

import InfoTooltip from '../agent-analytics/InfoTooltip';

import { cn } from './cn';

/** A gradient-filled badge shape ("Hybrid v2": flower / 4 leaves / gem on top). */
type BadgeShape = (props: { className?: string }) => React.ReactElement;

const SparkBadge: BadgeShape = ({ className }) => (
  <svg viewBox="0 0 84 84" className={className}>
    <defs>
      <linearGradient
        id="g_badge_1"
        x1="0"
        y1="0"
        x2="84"
        y2="84"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stopColor="#FF7AA8" />
        <stop offset="1" stopColor="#C8175D" />
      </linearGradient>
    </defs>
    <path
      fill="url(#g_badge_1)"
      d="M42 19 q6.9 16.1 23 23 q-16.1 6.9 -23 23 q-6.9 -16.1 -23 -23 q16.1 -6.9 23 -23z"
    />
  </svg>
);

const TriangleBadge: BadgeShape = ({ className }) => (
  <svg viewBox="0 0 84 84" className={className}>
    <defs>
      <linearGradient
        id="g_badge_2"
        x1="0"
        y1="0"
        x2="84"
        y2="84"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stopColor="#FF3D81" />
        <stop offset="1" stopColor="#C8175D" />
      </linearGradient>
    </defs>
    <path
      fill="none"
      stroke="url(#g_badge_2)"
      strokeWidth="3.4"
      strokeLinecap="round"
      d="M42 68 L42 50"
    />
    <path
      fill="url(#g_badge_2)"
      d="M42 60 q -11.05 -2.55 -13.05 -9.35 q 10.05 -0.85 9.05 4.25 z"
    />
    <path
      fill="url(#g_badge_2)"
      d="M42 35 q2.7 6.3 9 9 q-6.3 2.7 -9 9 q-2.7 -6.3 -9 -9 q6.3 -2.7 9 -9z"
    />
  </svg>
);

const DiamondBadge: BadgeShape = ({ className }) => (
  <svg viewBox="0 0 84 84" className={className}>
    <defs>
      <linearGradient
        id="g_badge_3"
        x1="0"
        y1="0"
        x2="84"
        y2="84"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stopColor="#C8175D" />
        <stop offset="1" stopColor="#7B2FF7" />
      </linearGradient>
    </defs>
    <path
      fill="none"
      stroke="url(#g_badge_3)"
      strokeWidth="3.6"
      strokeLinecap="round"
      d="M42 70 L42 42"
    />
    <path
      fill="url(#g_badge_3)"
      d="M42 62 q -13.0 -3.0 -15.0 -11.0 q 12.0 -1.0 11.0 5.0 z"
    />
    <path
      fill="url(#g_badge_3)"
      d="M42 54 q 13.0 -3.0 15.0 -11.0 q -12.0 -1.0 -11.0 5.0 z"
    />
    <path fill="url(#g_badge_3)" d="M35 30 L49 30 L53 38 L42 48 L31 38 Z" />
    <path
      stroke="#fff"
      strokeWidth="1.3"
      opacity=".4"
      fill="none"
      strokeLinejoin="round"
      d="M35 30 L31 38"
    />
    <path
      stroke="#fff"
      strokeWidth="1.3"
      opacity=".4"
      fill="none"
      strokeLinejoin="round"
      d="M49 30 L53 38"
    />
    <path
      stroke="#fff"
      strokeWidth="1.3"
      opacity=".4"
      fill="none"
      strokeLinejoin="round"
      d="M31 38 L53 38"
    />
    <path
      stroke="#fff"
      strokeWidth="1.3"
      opacity=".4"
      fill="none"
      strokeLinejoin="round"
      d="M35 30 L42 48"
    />
    <path
      stroke="#fff"
      strokeWidth="1.3"
      opacity=".4"
      fill="none"
      strokeLinejoin="round"
      d="M49 30 L42 48"
    />
  </svg>
);

const PentagonBadge: BadgeShape = ({ className }) => (
  <svg viewBox="0 0 84 84" className={className}>
    <defs>
      <linearGradient
        id="g_badge_4"
        x1="0"
        y1="0"
        x2="84"
        y2="84"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stopColor="#7B2FF7" />
        <stop offset="1" stopColor="#3A86FF" />
      </linearGradient>
    </defs>
    <path
      fill="none"
      stroke="url(#g_badge_4)"
      strokeWidth="2.6"
      strokeLinecap="round"
      d="M42 33 L42 22"
    />
    <path
      fill="none"
      stroke="url(#g_badge_4)"
      strokeWidth="2.6"
      strokeLinecap="round"
      d="M30 40 L21 34"
    />
    <path
      fill="none"
      stroke="url(#g_badge_4)"
      strokeWidth="2.6"
      strokeLinecap="round"
      d="M54 40 L63 34"
    />
    <path fill="url(#g_badge_4)" d="M33 36 L51 36 L57 47 L42 64 L27 47 Z" />
    <path
      stroke="#fff"
      strokeWidth="1.3"
      opacity=".4"
      fill="none"
      strokeLinejoin="round"
      d="M33 36 L27 47"
    />
    <path
      stroke="#fff"
      strokeWidth="1.3"
      opacity=".4"
      fill="none"
      strokeLinejoin="round"
      d="M51 36 L57 47"
    />
    <path
      stroke="#fff"
      strokeWidth="1.3"
      opacity=".4"
      fill="none"
      strokeLinejoin="round"
      d="M27 47 L57 47"
    />
    <path
      stroke="#fff"
      strokeWidth="1.3"
      opacity=".4"
      fill="none"
      strokeLinejoin="round"
      d="M33 36 L42 64"
    />
    <path
      stroke="#fff"
      strokeWidth="1.3"
      opacity=".4"
      fill="none"
      strokeLinejoin="round"
      d="M51 36 L42 64"
    />
    <path
      fill="url(#g_badge_4)"
      d="M64 56 q1.2 2.8 4 4 q-2.8 1.2 -4 4 q-1.2 -2.8 -4 -4 q2.8 -1.2 4 -4z"
    />
  </svg>
);

const HexagonBadge: BadgeShape = ({ className }) => (
  <svg viewBox="0 0 84 84" className={className}>
    <defs>
      <linearGradient
        id="g_badge_5"
        x1="0"
        y1="0"
        x2="84"
        y2="84"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stopColor="#C77DFF" />
        <stop offset="0.55" stopColor="#7B2FF7" />
        <stop offset="1" stopColor="#4361EE" />
      </linearGradient>
    </defs>
    <path
      fill="url(#g_badge_5)"
      d="M36.5 9 L47.5 9 L50.5 16 L42 25 L33.5 16 Z"
    />
    <path
      stroke="#fff"
      strokeWidth="1.3"
      opacity=".4"
      fill="none"
      strokeLinejoin="round"
      d="M36.5 9 L33.5 16"
    />
    <path
      stroke="#fff"
      strokeWidth="1.3"
      opacity=".4"
      fill="none"
      strokeLinejoin="round"
      d="M47.5 9 L50.5 16"
    />
    <path
      stroke="#fff"
      strokeWidth="1.3"
      opacity=".4"
      fill="none"
      strokeLinejoin="round"
      d="M33.5 16 L50.5 16"
    />
    <path
      stroke="#fff"
      strokeWidth="1.3"
      opacity=".4"
      fill="none"
      strokeLinejoin="round"
      d="M36.5 9 L42 25"
    />
    <path
      stroke="#fff"
      strokeWidth="1.3"
      opacity=".4"
      fill="none"
      strokeLinejoin="round"
      d="M47.5 9 L42 25"
    />
    <circle cx="42" cy="13" r="1.9" fill="#fff" opacity=".9" />
    <path
      fill="none"
      stroke="url(#g_badge_5)"
      strokeWidth="3.6"
      strokeLinecap="round"
      d="M42 76 L42 47"
    />
    <path
      fill="url(#g_badge_5)"
      d="M42 70 q -13.0 -3.0 -15.0 -11.0 q 12.0 -1.0 11.0 5.0 z"
    />
    <path
      fill="url(#g_badge_5)"
      d="M42 63 q 13.0 -3.0 15.0 -11.0 q -12.0 -1.0 -11.0 5.0 z"
    />
    <path
      fill="url(#g_badge_5)"
      d="M42 57 q -11.05 -2.55 -13.05 -9.35 q 10.05 -0.85 9.05 4.25 z"
    />
    <path
      fill="url(#g_badge_5)"
      d="M42 51 q 11.05 -2.55 13.05 -9.35 q -10.05 -0.85 -9.05 4.25 z"
    />
    <circle cx="42.0" cy="31.0" r="5" fill="url(#g_badge_5)" opacity=".88" />
    <circle cx="49.6" cy="36.5" r="5" fill="url(#g_badge_5)" opacity=".88" />
    <circle cx="46.7" cy="45.5" r="5" fill="url(#g_badge_5)" opacity=".88" />
    <circle cx="37.3" cy="45.5" r="5" fill="url(#g_badge_5)" opacity=".88" />
    <circle cx="34.4" cy="36.5" r="5" fill="url(#g_badge_5)" opacity=".88" />
    <circle cx="42" cy="39" r="3.4" fill="url(#g_badge_5)" />
  </svg>
);

/** Badge tiers, unlocked by the number of quests resolved. */
const BADGE_TIERS: ReadonlyArray<{
  threshold: number;
  name: string;
  tagline: string;
  Shape: BadgeShape;
}> = [
  {
    threshold: 1,
    name: 'First Spark',
    tagline: 'Your AI journey begins',
    Shape: SparkBadge,
  },
  {
    threshold: 5,
    name: 'On Fire',
    tagline: 'Building real momentum',
    Shape: TriangleBadge,
  },
  {
    threshold: 10,
    name: 'Trailblazer',
    tagline: 'Ahead of the pack',
    Shape: DiamondBadge,
  },
  {
    threshold: 25,
    name: 'Visionary',
    tagline: 'Seen everywhere AI looks',
    Shape: PentagonBadge,
  },
  {
    threshold: 50,
    name: 'AI Icon',
    tagline: 'Top of the AI game',
    Shape: HexagonBadge,
  },
];

/**
 * The merchant's badge shelf: shape badges that unlock as quests are resolved.
 * Earned badges are bright; locked ones are dimmed.
 *
 * @param props - Component props.
 * @param props.resolvedCount - Number of quests resolved all-time.
 * @return The badge row.
 */
export function CopilotBadges({
  resolvedCount,
}: {
  resolvedCount: number;
}): React.ReactElement {
  return (
    <section>
      <h3 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-gray-500">
        Badges
        <InfoTooltip text="Badges unlock as you complete quests with Recomaze Co-pilot - the daily tasks that improve your store. Each tier needs more resolved quests: First Spark (1), On Fire (5), Trailblazer (10), Visionary (25), AI Icon (50)." />
      </h3>
      <div className="flex items-end gap-3">
        {BADGE_TIERS.map(tier => {
          const earned: boolean = resolvedCount >= tier.threshold;

          return (
            <div
              key={tier.name}
              title={`${tier.name} - ${tier.tagline} (${tier.threshold} quest${tier.threshold > 1 ? 's' : ''})`}
              className="flex flex-1 flex-col items-center gap-1"
            >
              <div className="relative">
                <tier.Shape
                  className={cn(
                    'h-8 w-8 transition',
                    earned ? '' : 'opacity-40'
                  )}
                />
                {!earned && (
                  <span className="absolute -bottom-1 -right-1 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-white shadow-sm">
                    <LuLock className="h-2.5 w-2.5 text-gray-400" />
                  </span>
                )}
              </div>
              <span
                className={cn(
                  'text-[10px]',
                  earned ? 'text-gray-600' : 'text-gray-400'
                )}
              >
                {earned ? tier.name : tier.threshold}
              </span>
            </div>
          );
        })}
      </div>
    </section>
  );
}