import { TailwindSize } from "../types"
import "hono/jsx"
import { FC } from "hono/jsx"
import * as icons from "lucide-static"

export type IconName = keyof typeof icons

type IconProps = {
  name: IconName
  size?: TailwindSize
  class?: string
}

type IconLinkProps = IconProps & {
  href?: string
  target?: string
}

export const Icon: FC<IconProps> = (props) => {
  const { name, size = 6, class: className } = props

  const iconSvg = icons[name]

  if (!iconSvg) {
    throw new Error(`Icon "${name}" not found in Lucide icons`)
  }

  // Convert size to Tailwind classes if provided
  const sizeClass = size ? getSizeClass(size) : ""
  const allClasses = [sizeClass, className].filter(Boolean).join(" ")

  // Modify the SVG string to include our custom attributes
  const modifiedSvg = iconSvg
    .replace(/width="[^"]*"/, "")
    .replace(/height="[^"]*"/, "")
    .replace(/class="[^"]*"/, "")
    .replace(/<svg([^>]*)>/, `<svg$1 style="display: block; flex-shrink: 0;" class="${allClasses}">`)

  return <div dangerouslySetInnerHTML={{ __html: modifiedSvg }} />
}

export const IconLink: FC<IconLinkProps> = (props) => {
  const { href = "#", target, class: className, ...iconProps } = props

  return (
    <a
      href={href}
      target={target}
      class={`inline-flex items-center justify-center hover:opacity-70 transition-opacity ${className || ""}`}
    >
      <Icon {...iconProps} />
    </a>
  )
}

export const Test = () => {
  return (
    <div class="p-6 space-y-8">
      {/* === ICON TESTS === */}

      {/* Size variations */}
      <div>
        <h2 class="text-xl font-bold mb-4">Icon Size Variations</h2>
        <div class="flex items-center gap-4">
          {([3, 4, 5, 6, 8, 10, 12, 16] as const).map((size) => (
            <div key={size} class="flex flex-col items-center space-y-2">
              <Icon name="Heart" size={size} />
              <p class="text-sm">{size}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Styling with CSS classes */}
      <div>
        <h2 class="text-xl font-bold mb-4">Styling with CSS Classes</h2>
        <div class="grid grid-cols-5 gap-6">
          <div class="flex flex-col items-center space-y-2">
            <Icon name="Star" size={12} />
            <p class="text-sm">Default</p>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <Icon name="Star" size={12} class="text-blue-500" />
            <p class="text-sm">Blue Color</p>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <Icon name="Star" size={12} class="stroke-1" />
            <p class="text-sm">Thin Stroke</p>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <Icon name="Star" size={12} class="text-yellow-400 stroke-0 fill-current" />
            <p class="text-sm">Filled</p>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <Icon name="Star" size={12} class="text-purple-500 hover:text-purple-700 transition-colors" />
            <p class="text-sm">Hover Effect</p>
          </div>
        </div>
      </div>

      {/* Advanced styling */}
      <div>
        <h2 class="text-xl font-bold mb-4">Advanced Styling</h2>
        <div class="grid grid-cols-4 gap-6">
          <div class="flex flex-col items-center space-y-2">
            <Icon name="Heart" size={12} class="text-red-500 stroke-0 fill-current" />
            <p class="text-sm">Filled Heart</p>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <Icon name="Shield" size={12} class="text-green-600 stroke-2" />
            <p class="text-sm">Thick Stroke</p>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <Icon name="Sun" size={12} class="text-yellow-500 animate-spin" />
            <p class="text-sm">Animated</p>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <Icon name="Zap" size={12} class="text-blue-400 drop-shadow-lg" />
            <p class="text-sm">Drop Shadow</p>
          </div>
        </div>
      </div>

      {/* === ICON LINK TESTS === */}

      {/* Basic icon links */}
      <div>
        <h2 class="text-xl font-bold mb-4">Icon Links</h2>
        <div class="flex gap-6">
          <div class="flex flex-col items-center space-y-2">
            <IconLink name="Home" size={8} href="/" />
            <p class="text-sm">Home Link</p>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <IconLink name="ExternalLink" size={8} href="https://example.com" target="_blank" />
            <p class="text-sm">External Link</p>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <IconLink name="Mail" size={8} href="mailto:hello@example.com" />
            <p class="text-sm">Email Link</p>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <IconLink name="Phone" size={8} href="tel:+1234567890" />
            <p class="text-sm">Phone Link</p>
          </div>
        </div>
      </div>

      {/* Styled icon links */}
      <div>
        <h2 class="text-xl font-bold mb-4">Styled Icon Links</h2>
        <div class="grid grid-cols-4 gap-6">
          <div class="flex flex-col items-center space-y-2">
            <IconLink
              name="Download"
              size={8}
              href="#"
              class="bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition-colors"
            />
            <p class="text-sm">Button Style</p>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <IconLink
              name="Settings"
              size={8}
              href="#"
              class="border-2 border-gray-300 p-2 rounded-full hover:border-gray-500 hover:bg-gray-50 transition-all"
            />
            <p class="text-sm">Circle Border</p>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <IconLink
              name="Heart"
              size={8}
              href="#"
              class="text-red-500 hover:scale-125 transition-transform stroke-[3]"
            />
            <p class="text-sm">Scale + Thick</p>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <IconLink
              name="Star"
              size={8}
              href="#"
              class="text-yellow-400 fill-current stroke-1 hover:rotate-12 transition-transform"
            />
            <p class="text-sm">Filled + Rotate</p>
          </div>
        </div>
      </div>
    </div>
  )
}

const getSizeClass = (size: TailwindSize): string => {
  return `size-${size}`
}

const tailwindSafeWidthStrings = [ "w-0", "w-0.5", "w-1", "w-1.5", "w-2", "w-2.5", "w-3", "w-3.5", "w-4", "w-5", "w-6", "w-7", "w-8", "w-9", "w-10", "w-11", "w-12", "w-14", "w-16", "w-20", "w-24", "w-28", "w-32", "w-36", "w-40", "w-44", "w-48", "w-52", "w-56", "w-60", "w-64", "w-72", "w-80", "w-96" ] // prettier-ignore
const tailwindSafeHeightStrings = [ "h-0", "h-0.5", "h-1", "h-1.5", "h-2", "h-2.5", "h-3", "h-3.5", "h-4", "h-5", "h-6", "h-7", "h-8", "h-9", "h-10", "h-11", "h-12", "h-14", "h-16", "h-20", "h-24", "h-28", "h-32", "h-36", "h-40", "h-44", "h-48", "h-52", "h-56", "h-60", "h-64", "h-72", "h-80", "h-96", ] // prettier-ignore
const tailwindSafeSizeStrings = [ "size-0", "size-0.5", "size-1", "size-1.5", "size-2", "size-2.5", "size-3", "size-3.5", "size-4", "size-5", "size-6", "size-7", "size-8", "size-9", "size-10", "size-11", "size-12", "size-14", "size-16", "size-20", "size-24", "size-28", "size-32", "size-36", "size-40", "size-44", "size-48", "size-52", "size-56", "size-60", "size-64", "size-72", "size-80", "size-96", ] // prettier-ignore
