import type { ComponentType, ReactNode } from "react";
import {
  Activity,
  ArrowLeftRight,
  ArrowRight,
  BarChart3,
  BedDouble,
  Bot,
  Boxes,
  Building2,
  Calculator,
  CalendarCheck,
  Check,
  ClipboardList,
  ClipboardCheck,
  CreditCard,
  Cpu,
  Database,
  DatabaseZap,
  FileSpreadsheet,
  FileCode,
  Gauge,
  GitBranch,
  Globe,
  Cloud,
  HardDrive,
  Hotel,
  KeyRound,
  Link2,
  Lock,
  LucideProps,
  Brain,
  Layers,
  MapPin,
  Monitor,
  Network,
  Newspaper,
  Package,
  PackageSearch,
  RadioTower,
  Receipt,
  SearchCheck,
  Server,
  Settings2,
  ShieldCheck,
  ShoppingCart,
  ScanBarcode,
  RefreshCcw,
  Store,
  Truck,
  Users,
  Warehouse,
  Workflow,
} from "lucide-react";

import { cn } from "@/lib/utils";

export type IconComponent = ComponentType<LucideProps>;

const serviceIcons: Record<string, IconComponent> = {
  ecommerce: ShoppingCart,
  "shopping-cart": ShoppingCart,
  "custom-ecommerce-platforme": ShoppingCart,
  b2b: ShoppingCart,
  "b2b-portali": ShoppingCart,
  wms: PackageSearch,
  "wms-sistemi": PackageSearch,
  erp_integrations: DatabaseZap,
  "erp-biznisoft-integracije": DatabaseZap,
  courier_integrations: Workflow,
  "kurirske-integracije": Workflow,
  automation: Bot,
  bot: Bot,
  "automatizacija-poslovanja": Bot,
  consulting: Cpu,
  konsultacije: Cpu,
  hotel: Hotel,
  "hotelska-resenja": Hotel,
  beds24: Hotel,
  building: Building2,
  vps: Server,
  "vps-serveri": Server,
  server: Server,
  pda: Warehouse,
  "pda-uredjaji": Warehouse,
  store: Store,
  warehouse: Warehouse,
  boxes: Boxes,
  scan: ScanBarcode,
  barcode: ScanBarcode,
  "internal-transfer": ArrowLeftRight,
  stock: Package,
  package: Package,
  orders: ClipboardList,
  clipboard: ClipboardList,
  "clipboard-check": ClipboardCheck,
  "calendar-check": CalendarCheck,
  documents: FileSpreadsheet,
  code: FileCode,
  "file-code": FileCode,
  database: Database,
  cloud: Cloud,
  "hard-drive": HardDrive,
  lock: Lock,
  monitor: Monitor,
  key: KeyRound,
  "key-round": KeyRound,
  refresh: RefreshCcw,
  "refresh-ccw": RefreshCcw,
  "private-network": Network,
  globe: Globe,
  link: Link2,
  "git-branch": GitBranch,
  branches: GitBranch,
  layers: Layers,
  map: MapPin,
  "map-pin": MapPin,
  brain: Brain,
  newspaper: Newspaper,
  feed: RadioTower,
  pixel: Activity,
  activity: Activity,
  network: RadioTower,
  radio: RadioTower,
  marketplace: Store,
  calculator: Calculator,
  receipt: Receipt,
  payment: CreditCard,
  truck: Truck,
  beds: BedDouble,
  housekeeping: BedDouble,
  users: Users,
  analytics: BarChart3,
  dashboard: BarChart3,
  seo: SearchCheck,
  search: SearchCheck,
  cpu: Cpu,
  workflow: Workflow,
  settings: Settings2,
  security: ShieldCheck,
  shield: ShieldCheck,
  performance: Gauge,
  gauge: Gauge,
};

export function getServiceIcon(key?: string | null): IconComponent {
  if (!key) {
    return Workflow;
  }

  return serviceIcons[key] ?? Workflow;
}

type IconMarkProps = {
  icon: IconComponent;
  className?: string;
  tone?: "light" | "dark";
};

export function IconMark({ icon: Icon, className, tone = "light" }: IconMarkProps) {
  return (
    <span
      className={cn(
        "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border transition duration-300",
        tone === "dark"
          ? "border-white/10 bg-white/[0.05] text-primary shadow-[inset_0_1px_0_rgb(255_255_255_/_0.08)]"
          : "border-slate-200/80 bg-white text-primary shadow-[0_10px_30px_rgb(15_23_42_/_0.06)]",
        className,
      )}
    >
      <Icon aria-hidden="true" className="h-[18px] w-[18px]" strokeWidth={1.8} />
    </span>
  );
}

export function CheckLine({ children }: { children: ReactNode }) {
  return (
    <li className="flex gap-3 text-sm leading-6 text-slate-600">
      <span className="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-primary/15 bg-primary-50 text-primary">
        <Check aria-hidden="true" className="h-3.5 w-3.5" strokeWidth={2} />
      </span>
      <span>{children}</span>
    </li>
  );
}

export function ArrowLinkIcon() {
  return <ArrowRight aria-hidden="true" className="h-4 w-4 transition group-hover:translate-x-0.5" strokeWidth={1.8} />;
}