import { twMerge } from 'tailwind-merge'
import { Tooltip } from '@heroui/react'
import { Link } from 'react-router-dom'
import React from 'react'

export interface CardProps {
  title: string
  githubRepo?: string | null
  url: string
  description: string | null
  icon?: string | null
  version?: string | null
  background?: boolean
  downloadCdn?: string | null
  downloadOriginal?: string | null
  image?: string | null
  className?: string
  children?: React.ReactNode
  onVersionClick?: (e: React.MouseEvent) => void
  action?: React.ReactNode
}

const H4 = ({
  className,
  children,
}: {
  className?: string
  children: React.ReactNode
}) => <h4 className={twMerge('text-lg font-bold', className)}>{children}</h4>

const LinkComponent = ({
  children,
  className,
  url,
}: {
  children: React.ReactNode
  className?: string
  url: string
}) => {
  const isExternal = url.startsWith('http')
  if (isExternal) {
    return (
      <a
        href={url}
        target="_blank"
        rel="noopener noreferrer"
        className={className}
      >
        {children}
      </a>
    )
  }
  return (
    <Link to={url} className={className}>
      {children}
    </Link>
  )
}

export function Card({
  title,
  url,
  description,
  icon,
  version,
  background,
  downloadCdn,
  downloadOriginal,
  image,
  className,
  children,
  onVersionClick,
  action,
}: CardProps) {
  return (
    <li className="group relative flex h-full flex-col gap-3.5 rounded-xl bg-zinc-100 bg-opacity-90 p-5 transition duration-200 hover:brightness-[.98] dark:bg-zinc-800 dark:hover:brightness-110">
      <div className="flex items-center gap-1">
        <LinkComponent url={url} className="mr-2 flex h-12 w-12 shrink-0 items-center justify-center rounded-xl">
          <div
            className={twMerge(
              'flex h-12 w-12 shrink-0 items-center justify-center rounded-xl',
              background && 'bg-zinc-200 dark:bg-zinc-700',
            )}
          >
            {icon && <i className={twMerge('text-2xl', icon)} />}
            {image && !icon && (
              <img
                src={image}
                alt={title}
                width={48}
                height={48}
                className={twMerge('h-12 w-12 rounded-xl', className)}
                loading="lazy"
              />
            )}
          </div>
        </LinkComponent>
        <div className="flex flex-col gap-1">
          <LinkComponent url={url}>
            <H4 className="text-zinc-950 cursor-pointer underline-offset-4 hover:underline dark:text-zinc-200">
              {title}
            </H4>
          </LinkComponent>
          {version && (
            <Tooltip
              content="查看更新日志"
              delay={500}
              closeDelay={800}
              placement="right"
            >
              <div
                onClick={onVersionClick}
                className={`flex max-h-fit max-w-fit items-center rounded-lg bg-black/5 px-1.5 text-xs tracking-wider text-zinc-500 transition dark:border-white/10 dark:bg-white/10 dark:text-zinc-400 dark:hover:text-zinc-200 ${
                  onVersionClick
                    ? 'cursor-pointer underline-offset-2 hover:underline'
                    : ''
                }`}
              >
                {version}
              </div>
            </Tooltip>
          )}
        </div>
      </div>

      <p className="text-zinc-500 flex-grow dark:text-[#9e9e9e]">
        {description}
      </p>

      <div className="relative flex flex-wrap gap-2">
        {downloadCdn && (
          <a
            href={downloadCdn}
            target="_blank"
            rel="noopener noreferrer"
            className="bg-[#ca4940] rounded-lg px-3 py-1 text-white transition hover:brightness-90 active:scale-95 dark:hover:brightness-110"
          >
            加速下载
          </a>
        )}
        {downloadOriginal && (
          <a
            href={downloadOriginal}
            target="_blank"
            rel="noopener noreferrer"
            className="rounded-lg bg-zinc-300 px-3 py-1 text-zinc-600 transition hover:brightness-95 active:scale-95 dark:bg-white/10 dark:text-zinc-200 dark:hover:brightness-110"
          >
            原始下载
          </a>
        )}
        {children}
      </div>
      {action}
    </li>
  )
}
