import type { ReactNode } from "react"
import type { ExpertVisualKey } from "../../features/shell/ExpertTree"

export function LobsterClawIcon() {
  return (
    <svg viewBox="0 0 64 64" aria-hidden="true" focusable="false">
      <defs>
        <linearGradient id="lobster-claw-orb" x1="14%" y1="12%" x2="86%" y2="88%">
          <stop offset="0%" stopColor="#eefaff" />
          <stop offset="52%" stopColor="#a7dcff" />
          <stop offset="100%" stopColor="#4c9dff" />
        </linearGradient>
        <linearGradient id="lobster-claw-gradient" x1="12%" y1="12%" x2="88%" y2="90%">
          <stop offset="0%" stopColor="#f9fdff" />
          <stop offset="30%" stopColor="#87d2ff" />
          <stop offset="100%" stopColor="#1f7cf0" />
        </linearGradient>
        <linearGradient id="lobster-claw-line" x1="18%" y1="18%" x2="78%" y2="82%">
          <stop offset="0%" stopColor="#ffffff" />
          <stop offset="100%" stopColor="#0e63c3" />
        </linearGradient>
      </defs>
      <circle cx="32" cy="32" r="26.5" fill="url(#lobster-claw-orb)" />
      <circle cx="32" cy="32" r="26.5" fill="none" stroke="rgba(255,255,255,0.9)" strokeWidth="1.5" />
      <path
        d="M15.8 22.5C20 16.8 26.7 13.3 34 13.3c4.7 0 9.1 1.4 12.9 4.1"
        fill="none"
        stroke="rgba(255,255,255,0.62)"
        strokeLinecap="round"
        strokeWidth="1.8"
      />
      <path
        d="M14 42.4c0-7.7 6.2-13.8 13.9-13.8h3.4c2.2 0 4.3.8 5.9 2.3l12.5 11.7c1 .9 1 2.4.1 3.4l-3.1 3.5a2.4 2.4 0 0 1-3.4.2L30.9 39.2H28c-2 0-3.6 1.6-3.6 3.5v4.5c0 1.3-1 2.3-2.3 2.3h-5.8c-1.3 0-2.3-1-2.3-2.3v-4.8Z"
        fill="url(#lobster-claw-gradient)"
      />
      <path
        d="M37.7 16.2c6.6 0 12.2 5.2 13 11.8l.1 1.3-6-.1c-5.7 0-10.7-3.3-12.8-8.5L30.8 18l2.9-.8c1.2-.4 2.5-.7 4-.9Zm-3.3 14.5c3.7 0 7.1 1.5 9.6 4.1l1 1.1-5.1 2.7a13.8 13.8 0 0 1-17.6-4.5l-1.9-2.5 2.6-.9c3.6-1.3 7.4-2 11.4-2Z"
        fill="#f8fdff"
        opacity="0.98"
      />
      <path
        d="M31.3 22.8c2.2 5.4 7.5 8.9 13.3 8.9h6.4M22.2 32.7c3 3.8 7.6 6.2 12.4 6.2 2.2 0 4.4-.4 6.5-1.3"
        fill="none"
        stroke="url(#lobster-claw-line)"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2.2"
      />
    </svg>
  );
}

export function RedBookIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <defs>
        <linearGradient id="red-book-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#ff6b6b" />
          <stop offset="100%" stopColor="#ef4444" />
        </linearGradient>
      </defs>
      <path d="M5.5 4.5A2.5 2.5 0 0 1 8 2h9.5A1.5 1.5 0 0 1 19 3.5v14a1.5 1.5 0 0 1-1.5 1.5H8a2.5 2.5 0 0 0-2.5 2V4.5Z" fill="url(#red-book-gradient)" />
      <path d="M5.5 4.5A2.5 2.5 0 0 1 8 2v17a2.5 2.5 0 0 0-2.5 2V4.5Z" fill="#dc2626" />
      <path d="M9.8 6.75h5.9M9.8 9.75h4.8M9.8 12.75h5.2" stroke="#fff6f6" strokeLinecap="round" strokeWidth="1.4" />
    </svg>
  );
}

export function DouyinNoteIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <defs>
        <linearGradient id="douyin-note-gradient" x1="10%" y1="10%" x2="90%" y2="90%">
          <stop offset="0%" stopColor="#3ddcff" />
          <stop offset="52%" stopColor="#6d7dff" />
          <stop offset="100%" stopColor="#ff4d8d" />
        </linearGradient>
      </defs>
      <path
        d="M14.3 3.5v9.55a4.05 4.05 0 1 1-2.05-3.54V6.25c2.42.08 4.16-.56 5.48-2.04.2-.23.57-.08.57.23v2.04c0 .84-.38 1.63-1.03 2.15-.83.66-1.77 1.12-2.97 1.35"
        fill="none"
        stroke="url(#douyin-note-gradient)"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
      />
      <circle cx="8.3" cy="15.9" r="2.35" fill="rgba(61,220,255,0.18)" />
      <path d="M14.3 4.3c.9 1.32 2.2 2.17 3.92 2.52" fill="none" stroke="#f5f7ff" strokeLinecap="round" strokeWidth="1.4" opacity="0.9" />
    </svg>
  );
}

function BrowserExpertIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M4 8.25A2.25 2.25 0 0 1 6.25 6h11.5A2.25 2.25 0 0 1 20 8.25v7.5A2.25 2.25 0 0 1 17.75 18H6.25A2.25 2.25 0 0 1 4 15.75v-7.5Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
      <path d="M4.75 9.25h14.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.6" />
      <circle cx="7.4" cy="7.7" r="0.75" fill="currentColor" />
      <circle cx="10.1" cy="7.7" r="0.75" fill="currentColor" opacity="0.78" />
    </svg>
  );
}

function PlannerExpertIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M5 6.25A2.25 2.25 0 0 1 7.25 4h9.5A2.25 2.25 0 0 1 19 6.25v11.5A2.25 2.25 0 0 1 16.75 20h-9.5A2.25 2.25 0 0 1 5 17.75V6.25Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
      <path d="M8 8.25h8M8 12h5.5M8 15.75h3.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.7" />
      <circle cx="16.9" cy="15.8" r="1.6" fill="currentColor" opacity="0.88" />
    </svg>
  );
}

function ZhihuExpertIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M5.25 6.25A2.25 2.25 0 0 1 7.5 4h9A2.25 2.25 0 0 1 18.75 6.25v8.1a2.25 2.25 0 0 1-2.25 2.25h-3.4l-2.95 2.45c-.48.4-1.2.06-1.2-.57V16.6H7.5a2.25 2.25 0 0 1-2.25-2.25v-8.1Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
      <path d="M8.2 9.1h7.6M8.2 12.2h5.4" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.7" />
    </svg>
  );
}

function WechatExpertIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M10 5C6.69 5 4 7.27 4 10.08c0 1.52.8 2.88 2.07 3.8L5.4 16.5l2.7-1.35c.6.14 1.23.21 1.9.21 3.32 0 6-2.27 6-5.08S13.32 5 10 5Z" fill="currentColor" opacity="0.92" />
      <path d="M15.3 9.3c2.6 0 4.7 1.8 4.7 4.02 0 1.2-.62 2.27-1.62 3l.54 2.08-2.13-1.06c-.47.11-.97.17-1.5.17-2.6 0-4.7-1.8-4.7-4.02S12.7 9.3 15.3 9.3Z" fill="currentColor" opacity="0.68" />
      <circle cx="8.35" cy="9.95" r="0.9" fill="#ffffff" />
      <circle cx="11.55" cy="9.95" r="0.9" fill="#ffffff" />
      <circle cx="14.05" cy="13.25" r="0.8" fill="#ffffff" />
      <circle cx="16.65" cy="13.25" r="0.8" fill="#ffffff" />
    </svg>
  );
}

function XPlatformExpertIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M6 5.25h3.4l2.86 4.2 3.53-4.2H18l-4.72 5.61L18.5 18h-3.4l-3.11-4.55L8.1 18H6l5.02-5.97L6 5.25Z" fill="currentColor" />
    </svg>
  );
}

function TikTokExpertIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M13.75 4.25v8.5a3.75 3.75 0 1 1-2-3.3V7.1c1.42.05 2.63-.33 3.78-1.18.25-.19.62-.01.62.3v1.35c0 1.15.63 2.2 1.64 2.73.35.19.72.33 1.11.43" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
      <circle cx="8.1" cy="15.7" r="2" fill="currentColor" opacity="0.24" />
    </svg>
  );
}

function PosterExpertIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M6 4.75A1.75 1.75 0 0 1 7.75 3h8.5A1.75 1.75 0 0 1 18 4.75v14.5A1.75 1.75 0 0 1 16.25 21h-8.5A1.75 1.75 0 0 1 6 19.25V4.75Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
      <path d="M8.6 8.2h6.8M8.6 11.4h6.8M8.6 14.6h4.4" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.7" />
      <circle cx="14.9" cy="14.7" r="1.1" fill="currentColor" opacity="0.88" />
    </svg>
  );
}

function GeoExpertIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <circle cx="12" cy="12" r="7.25" fill="none" stroke="currentColor" strokeWidth="1.8" />
      <path d="M12 4.75c2.05 1.95 3.25 4.55 3.25 7.25S14.05 17.3 12 19.25C9.95 17.3 8.75 14.7 8.75 12S9.95 6.7 12 4.75Z" fill="none" stroke="currentColor" strokeWidth="1.7" />
      <path d="M5 12h14" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.6" />
    </svg>
  );
}

function LeadsExpertIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <circle cx="12" cy="12" r="6.9" fill="none" stroke="currentColor" strokeWidth="1.8" />
      <circle cx="12" cy="12" r="3.6" fill="none" stroke="currentColor" strokeWidth="1.7" opacity="0.86" />
      <circle cx="12" cy="12" r="1.4" fill="currentColor" />
      <path d="M12 3.8v2.1M20.2 12h-2.1M12 20.2v-2.1M3.8 12h2.1" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5" />
    </svg>
  );
}

function SalesChampionExpertIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M8 5.25h8v2.1a4 4 0 0 1-3 3.88v2.02h2.1a1.4 1.4 0 0 1 1.4 1.4V16H7.5v-1.35a1.4 1.4 0 0 1 1.4-1.4H11v-2.02a4 4 0 0 1-3-3.88v-2.1Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
      <path d="M8 6.2H5.9A1.65 1.65 0 0 0 4.25 7.85c0 1.74 1.41 3.15 3.15 3.15H8m8-4.8h2.1a1.65 1.65 0 0 1 1.65 1.65c0 1.74-1.41 3.15-3.15 3.15H16" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6" />
      <path d="M9.8 19h4.4M8.9 16h6.2v3H8.9z" fill="currentColor" opacity="0.18" />
      <path d="m12 7.55.68 1.38 1.52.22-1.1 1.07.26 1.51L12 11.03l-1.36.7.26-1.51-1.1-1.07 1.52-.22L12 7.55Z" fill="currentColor" />
    </svg>
  );
}

export function renderExpertIcon(expertKey: ExpertVisualKey): ReactNode {
  switch (expertKey) {
    case "xiaohongshu":
      return <RedBookIcon />;
    case "douyin":
      return <DouyinNoteIcon />;
    case "planner":
      return <PlannerExpertIcon />;
    case "zhihu":
      return <ZhihuExpertIcon />;
    case "wechat":
      return <WechatExpertIcon />;
    case "x":
      return <XPlatformExpertIcon />;
    case "tiktok":
      return <TikTokExpertIcon />;
    case "poster":
      return <PosterExpertIcon />;
    case "geo":
      return <GeoExpertIcon />;
    case "leads":
      return <LeadsExpertIcon />;
    case "sales":
      return <SalesChampionExpertIcon />;
    case "browser":
      return <BrowserExpertIcon />;
    default:
      return <BrowserExpertIcon />;
  }
}

export function getIntentSuggestionIcon(platform?: string): ReactNode {
  const normalized = platform?.trim().toLowerCase();
  if (normalized === "xiaohongshu" || normalized === "xhs" || normalized === "rednote") {
    return <RedBookIcon />;
  }
  if (normalized === "douyin") {
    return <DouyinNoteIcon />;
  }
  return <BrowserExpertIcon />;
}

export function NavIcon({ kind }: { kind: "chat" | "experts" | "plugins" | "settings" | "knowledge" }) {
  switch (kind) {
    case "chat":
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M5.25 7.1A2.85 2.85 0 0 1 8.1 4.25h6.2a2.85 2.85 0 0 1 2.85 2.85v3.8a2.85 2.85 0 0 1-2.85 2.85h-2.15l-3.46 2.82c-.5.41-1.25.05-1.25-.6v-2.27A2.85 2.85 0 0 1 5.25 10.9V7.1Z" fill="#CCFBF1" stroke="#0F766E" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.45" />
          <path d="M11.55 9.15h5.2A2.25 2.25 0 0 1 19 11.4v2.75a2.25 2.25 0 0 1-2.25 2.25h-.9v1.32c0 .45-.52.7-.87.42L12.8 16.4h-1.25a2.25 2.25 0 0 1-2.25-2.25V11.4a2.25 2.25 0 0 1 2.25-2.25Z" fill="#DBEAFE" stroke="#2563EB" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.35" />
        </svg>
      );
    case "experts":
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="m12 3.75 1.9 3.85 4.25.62-3.08 3 .73 4.23L12 13.52 8.2 15.45l.73-4.23-3.08-3 4.25-.62L12 3.75Z" fill="#EEF2FF" stroke="#6366F1" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.55" />
          <path d="m12 7.1.78 1.58 1.75.25-1.27 1.24.3 1.74L12 11.09l-1.56.82.3-1.74-1.27-1.24 1.75-.25L12 7.1Z" fill="#F59E0B" />
        </svg>
      );
    case "plugins":
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M9.1 4.5h3.15v3.15h2.45V5.42a1.67 1.67 0 1 1 3.35 0V8a2 2 0 0 1-2 2H12.2v2.2H9.1V9.95H6.95A1.95 1.95 0 0 1 5 8V5.42a1.67 1.67 0 1 1 3.35 0V7.65h.75V4.5Z" fill="#E0E7FF" stroke="#6366F1" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.35" />
          <path d="M11.8 12.2h3.1v2.25h.75v-2.22a1.67 1.67 0 1 1 3.35 0v2.57a1.95 1.95 0 0 1-1.95 1.95H14.9v2.75h-3.15v-3.15H9.3v2.23a1.67 1.67 0 1 1-3.35 0V16a2 2 0 0 1 2-2h3.85v-1.8Z" fill="#F3E8FF" stroke="#7C3AED" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.35" />
        </svg>
      );
    case "knowledge":
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M6 4.5A2.5 2.5 0 0 1 8.5 2h7.1L20 6.4v11.1a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 6 17.5v-13Z" fill="#DBEAFE" stroke="#2563EB" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.45" />
          <path d="M15.45 2.2v3.1c0 .82.66 1.48 1.48 1.48h2.92" fill="#BFDBFE" stroke="#60A5FA" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.35" />
          <path d="M9.1 10.2h5.8M9.1 13.15h4.25" fill="none" stroke="#1D4ED8" strokeLinecap="round" strokeWidth="1.35" />
          <path d="m16.7 12.55.38.8.82.12-.6.58.15.82-.75-.4-.75.4.15-.82-.6-.58.82-.12.38-.8Z" fill="#F59E0B" />
        </svg>
      );
    case "settings":
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M12 8.35A3.65 3.65 0 1 1 12 15.65 3.65 3.65 0 0 1 12 8.35Zm7.2 3.38-.9-.32a1.55 1.55 0 0 1-.94-2.02l.34-.88-1.78-1.78-.88.35a1.55 1.55 0 0 1-2.02-.95L12.68 5h-1.36l-.34 1.13a1.55 1.55 0 0 1-2.02.95l-.88-.35L6.3 8.51l.34.88a1.55 1.55 0 0 1-.94 2.02l-.9.32v1.54l.9.32a1.55 1.55 0 0 1 .94 2.02l-.34.88 1.78 1.78.88-.35a1.55 1.55 0 0 1 2.02.95l.34 1.13h1.36l.34-1.13a1.55 1.55 0 0 1 2.02-.95l.88.35 1.78-1.78-.34-.88a1.55 1.55 0 0 1 .94-2.02l.9-.32v-1.54Z" fill="#CFFAFE" stroke="#0891B2" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.35" />
          <circle cx="12" cy="12" r="1.85" fill="#2563EB" />
        </svg>
      );
  }
}

export function AttachmentIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
      <path d="M8.5 12.7 14 7.2a3.5 3.5 0 1 1 5 5L11 20.1a5.5 5.5 0 0 1-7.8-7.8l8.2-8.2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function CopyIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
      <rect x="9" y="9" width="10" height="10" rx="2" stroke="currentColor" strokeWidth="1.7" />
      <path d="M6 15V7a2 2 0 0 1 2-2h8" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function CheckIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
      <path d="M5.5 12.5 10 17l8.5-9" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function ArrowUpIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
      <path d="M12 18V6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
      <path d="m7 11 5-5 5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function RefreshIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
      <path d="M20 6v5h-5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M19 11a7 7 0 1 0 1.6 4.5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function ThumbIcon({ direction }: { direction: "up" | "down" }) {
  return direction === "up" ? (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
      <path d="M7 11v9H4v-9h3Zm3 9h6.4c1.2 0 2.2-.8 2.5-1.9l1.3-4.6c.4-1.5-.7-3-2.3-3H14V5.8c0-1-.8-1.8-1.8-1.8a1 1 0 0 0-.9.5L8.1 11.1a2 2 0 0 0-.3 1V20h2.2Z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ) : (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
      <path d="M7 4v9H4V4h3Zm3 0h6.4c1.2 0 2.2.8 2.5 1.9l1.3 4.6c.4 1.5-.7 3-2.3 3H14v4.7c0 1-.8 1.8-1.8 1.8a1 1 0 0 1-.9-.5l-3.2-6.6a2 2 0 0 1-.3-1V4h2.2Z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
