import * as React from "react";

export interface LogoProps {
  size?: "sm" | "md" | "lg" | "xl";
  variant?: "full" | "icon";
  suffix?: string | null;
  className?: string;
}

const sizeConfig = {
  sm: { icon: 24, text: "text-base", suffix: "text-xs", gap: "gap-1.5" },
  md: { icon: 28, text: "text-lg", suffix: "text-sm", gap: "gap-2" },
  lg: { icon: 36, text: "text-2xl", suffix: "text-base", gap: "gap-2.5" },
  xl: { icon: 48, text: "text-3xl", suffix: "text-lg", gap: "gap-3" },
} as const;

export function TangleKnot({
  size = 32,
  className,
}: {
  size?: number;
  className?: string;
}) {
  const uid = React.useId();
  const g1 = `tk-a-${uid}`;
  const g2 = `tk-b-${uid}`;

  return (
    <svg
      width={size}
      height={size}
      viewBox="20 45 156 140"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      aria-label="Tangle"
    >
      <title>Tangle</title>
      <defs>
        <linearGradient id={g1} x1="36.79" y1="58.78" x2="145.99" y2="183.59" gradientUnits="userSpaceOnUse">
          <stop stopColor="#8E59FF" />
          <stop offset="1" stopColor="#6888F9" />
        </linearGradient>
        <linearGradient id={g2} x1="36.78" y1="169.38" x2="145.99" y2="44.57" gradientUnits="userSpaceOnUse">
          <stop stopColor="#8E59FF" />
          <stop offset="1" stopColor="#6888F9" />
        </linearGradient>
      </defs>
      <path d="M170.74 150.082C170.747 142.848 167.464 135.908 161.612 130.784C155.76 125.66 147.818 122.772 139.528 122.754L104.921 122.754C104.704 119.939 104.567 117.062 104.567 114.078C104.567 111.095 104.429 108.231 104.236 105.403L139.528 105.403C147.746 105.288 155.582 102.359 161.347 97.2467C167.112 92.135 170.343 85.2506 170.343 78.0787C170.343 70.9069 167.112 64.0225 161.347 58.9107C155.582 53.799 147.746 50.8696 139.528 50.7545L56.817 50.7545C48.5993 50.8696 40.7628 53.799 34.9981 58.9107C29.2334 64.0225 26.0025 70.9069 26.0025 78.0787C26.0025 85.2506 29.2334 92.135 34.9981 97.2467C40.7628 102.359 48.5993 105.288 56.817 105.403L89.3238 106.163C91.5854 106.163 91.7785 111.095 91.7785 114.078C91.7785 117.062 91.9156 119.925 92.1091 122.754L56.817 122.754C48.5993 122.869 40.7628 125.798 34.9981 130.91C29.2334 136.022 26.0025 142.906 26.0025 150.078C26.0025 157.25 29.2334 164.134 34.9981 169.246C40.7628 174.358 48.5993 177.287 56.817 177.402L139.528 177.402C147.816 177.384 155.757 174.497 161.609 169.374C167.461 164.252 170.745 157.314 170.74 150.082ZM157.952 78.0752C157.954 82.3443 156.016 86.4397 152.562 89.463C149.108 92.4863 144.42 94.1905 139.528 94.2017L102.881 94.2017C101.554 86.2073 99.0244 78.4005 95.3585 70.9829C93.7421 67.7691 91.6728 64.7438 89.1983 61.9769L139.528 61.9769C144.415 61.988 149.097 63.6884 152.55 66.7056C156.003 69.7228 157.946 73.811 157.952 78.0752ZM56.817 94.2017C51.9157 94.2017 47.2151 92.5027 43.7493 89.4784C40.2835 86.4541 38.3364 82.3522 38.3364 78.0752C38.3364 73.7982 40.2835 69.6964 43.7493 66.6721C47.2151 63.6478 51.9157 61.9487 56.817 61.9487L65.1139 61.9487C72.4433 61.9487 79.3856 67.0146 83.7074 75.5071C86.6658 81.491 88.77 87.7697 89.9724 94.2017L56.817 94.2017ZM38.3929 150.082C38.3907 145.812 40.3293 141.717 43.7834 138.694C47.2374 135.67 51.9248 133.966 56.817 133.955L93.4637 133.955C94.7912 141.949 97.3206 149.756 100.987 157.174C102.603 160.388 104.672 163.413 107.147 166.18L56.817 166.18C51.9304 166.169 47.2479 164.468 43.7948 161.451C40.3416 158.434 38.3993 154.346 38.3929 150.082ZM112.686 152.65C109.728 146.666 107.623 140.387 106.421 133.955L139.528 133.955C144.429 133.955 149.13 135.654 152.596 138.678C156.062 141.703 158.009 145.804 158.009 150.082C158.009 154.359 156.062 158.46 152.596 161.485C149.13 164.509 144.429 166.208 139.528 166.208L131.231 166.208C123.934 166.208 116.992 161.142 112.686 152.65Z" fill={`url(#${g1})`} />
      <path opacity="0.8" d="M170.74 78.0752C170.747 85.3089 167.463 92.2492 161.612 97.3728C155.76 102.496 147.817 105.384 139.527 105.403L104.92 105.403C104.702 108.217 104.565 111.095 104.565 114.078C104.565 117.062 104.428 119.925 104.235 122.754L139.527 122.754C147.745 122.869 155.582 125.798 161.347 130.91C167.112 136.022 170.342 142.906 170.342 150.078C170.342 157.25 167.112 164.134 161.347 169.246C155.582 174.358 147.745 177.287 139.527 177.402L56.8149 177.402C48.597 177.287 40.7604 174.358 34.9956 169.246C29.2307 164.134 25.9998 157.25 25.9998 150.078C25.9998 142.906 29.2307 136.022 34.9956 130.91C40.7604 125.798 48.597 122.869 56.8149 122.754L89.3223 121.994C91.5839 121.994 91.777 117.062 91.777 114.078C91.777 111.095 91.9141 108.231 92.1076 105.403L56.8149 105.403C48.597 105.288 40.7604 102.359 34.9956 97.2468C29.2307 92.135 25.9998 85.2506 25.9998 78.0788C25.9998 70.9069 29.2307 64.0225 34.9956 58.9108C40.7604 53.799 48.597 50.8696 56.8149 50.7545L139.527 50.7545C147.816 50.7731 155.757 53.6602 161.609 58.7823C167.46 63.9043 170.744 70.8428 170.74 78.0752ZM157.952 150.082C157.954 145.812 156.015 141.717 152.561 138.694C149.107 135.67 144.42 133.966 139.527 133.955L102.88 133.955C101.552 141.949 99.023 149.756 95.3571 157.174C93.7406 160.388 91.6712 163.413 89.1968 166.18L139.527 166.18C144.414 166.169 149.097 164.468 152.55 161.451C156.003 158.434 157.945 154.346 157.952 150.082ZM56.8149 133.955C51.9134 133.955 47.2127 135.654 43.7469 138.678C40.2811 141.703 38.334 145.805 38.334 150.082C38.334 154.359 40.2811 158.46 43.7469 161.485C47.2127 164.509 51.9134 166.208 56.8149 166.208L65.1119 166.208C72.4414 166.208 79.3838 161.142 83.7057 152.65C86.6642 146.666 88.7684 140.387 89.9708 133.955L56.8149 133.955ZM38.3904 78.0752C38.3883 82.3443 40.3269 86.4398 43.781 89.4631C47.2351 92.4863 51.9226 94.1905 56.8149 94.2017L93.4622 94.2017C94.7898 86.2073 97.3192 78.4005 100.985 70.983C102.602 67.7692 104.671 64.7438 107.145 61.9769L56.8149 61.9769C51.9282 61.9881 47.2456 63.6884 43.7924 66.7056C40.3392 69.7228 38.3968 73.8111 38.3904 78.0752ZM112.685 75.5071C109.726 81.491 107.622 87.7697 106.42 94.2017L139.527 94.2017C144.429 94.2017 149.13 92.5027 152.595 89.4784C156.061 86.4541 158.008 82.3522 158.008 78.0752C158.008 73.7982 156.061 69.6964 152.595 66.6721C149.13 63.6478 144.429 61.9488 139.527 61.9488L131.23 61.9488C123.933 61.9488 116.991 67.0147 112.685 75.5071Z" fill={`url(#${g2})`} />
    </svg>
  );
}

export function Logo({
  size = "md",
  variant = "full",
  suffix = null,
  className,
}: LogoProps) {
  const cfg = sizeConfig[size];

  if (variant === "icon") {
    return <TangleKnot size={cfg.icon} className={className} />;
  }

  const cls = ["flex items-center", cfg.gap, className].filter(Boolean).join(" ");

  return (
    <div className={cls}>
      <TangleKnot size={cfg.icon} className="shrink-0" />
      <div className="flex items-baseline gap-1">
        <span className={`font-bold tracking-tight ${cfg.text}`}>Tangle</span>
        {suffix ? (
          <span className={`font-medium text-gradient-brand ${cfg.suffix}`}>{suffix}</span>
        ) : null}
      </div>
    </div>
  );
}