import Link from "next/link";
import {
  ArrowUpRight,
  Binary,
  Braces,
  Calculator,
  Clock,
  Code,
  FileText,
  Hash,
  ImageIcon,
  KeyRound,
  Lock,
  Percent,
  QrCode,
  Ruler,
  Scale,
  Shuffle,
  Star,
  Type,
} from "lucide-react";
import type { LucideIcon } from "lucide-react";
import type { Tool, ToolCategory } from "@/tools/registry";
import { categoryLabels } from "@/tools/registry";

const iconMap: Record<string, LucideIcon> = {
  QrCode,
  KeyRound,
  Percent,
  Calculator,
  FileText,
  Image: ImageIcon,
  Code,
  Lock,
  Type,
  Binary,
  Clock,
  Scale,
  Braces,
  Hash,
  Ruler,
  Shuffle,
};

// Statische Klassen-Maps (PurgeCSS-safe)
const catTheme: Record<
  ToolCategory,
  { strip: string; iconBg: string; iconFg: string; hoverBorder: string }
> = {
  generator: {
    strip: "bg-cat-generator",
    iconBg: "bg-cat-generator/10",
    iconFg: "text-cat-generator",
    hoverBorder: "group-hover:border-cat-generator/30",
  },
  calculator: {
    strip: "bg-cat-calculator",
    iconBg: "bg-cat-calculator/10",
    iconFg: "text-cat-calculator",
    hoverBorder: "group-hover:border-cat-calculator/30",
  },
  converter: {
    strip: "bg-cat-converter",
    iconBg: "bg-cat-converter/10",
    iconFg: "text-cat-converter",
    hoverBorder: "group-hover:border-cat-converter/30",
  },
  text: {
    strip: "bg-cat-text",
    iconBg: "bg-cat-text/10",
    iconFg: "text-cat-text",
    hoverBorder: "group-hover:border-cat-text/30",
  },
  security: {
    strip: "bg-cat-security",
    iconBg: "bg-cat-security/10",
    iconFg: "text-cat-security",
    hoverBorder: "group-hover:border-cat-security/30",
  },
  image: {
    strip: "bg-cat-image",
    iconBg: "bg-cat-image/10",
    iconFg: "text-cat-image",
    hoverBorder: "group-hover:border-cat-image/30",
  },
  developer: {
    strip: "bg-cat-developer",
    iconBg: "bg-cat-developer/10",
    iconFg: "text-cat-developer",
    hoverBorder: "group-hover:border-cat-developer/30",
  },
};

interface ToolCardProps {
  tool: Tool;
  compact?: boolean;
}

export function ToolCard({ tool, compact = false }: ToolCardProps) {
  const Icon = iconMap[tool.icon] ?? Calculator;
  const theme = catTheme[tool.category];
  const noticeLower = tool.notice?.toLowerCase() ?? "";
  const local =
    noticeLower.includes("lokal") ||
    noticeLower.includes("browser") ||
    tool.component !== "ip-address";

  return (
    <Link
      href={`/tools/${tool.slug}`}
      className="group relative flex h-full min-h-[176px] flex-col overflow-hidden border-2 border-ink-primary bg-surface-raised shadow-[6px_6px_0_rgb(var(--brand-500))] transition-[transform,box-shadow] duration-[120ms] [transition-timing-function:steps(2)] hover:translate-x-[6px] hover:translate-y-[6px] hover:shadow-[0_0_0_rgb(var(--brand-500))]"
    >
      {/* Hairline-Strip Kategorie-Indikator */}
      <span
        aria-hidden
        className={`absolute left-0 top-0 h-full w-[3px] ${theme.strip} opacity-50 transition-opacity duration-200 group-hover:opacity-100`}
      />

      <article className="flex h-full flex-col p-5 pl-6">
        {/* Top: Icon + Kategorie-Caption rechts */}
        <div className="flex items-start justify-between gap-3">
          <div
            className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-md ${theme.iconBg}`}
          >
            <Icon className={`h-5 w-5 ${theme.iconFg}`} strokeWidth={1.75} />
          </div>
          <span className="text-caption font-medium uppercase tracking-[0.08em] text-ink-tertiary">
            {categoryLabels[tool.category]}
          </span>
        </div>

        {/* Title + Featured-Stern */}
        <h3 className="mt-5 flex items-start gap-1.5 text-heading-sm font-semibold leading-tight text-ink-primary transition-colors duration-200 group-hover:text-brand-700">
          <span>{tool.name}</span>
          {tool.featured && (
            <Star
              className="mt-0.5 h-3.5 w-3.5 shrink-0 fill-brand-500 text-brand-500"
              strokeWidth={1.5}
              aria-label="Empfohlen"
            />
          )}
        </h3>

        {/* Description */}
        <p
          className={`mt-2 text-sm leading-relaxed text-ink-secondary ${
            compact ? "line-clamp-2" : "line-clamp-3"
          }`}
        >
          {tool.description}
        </p>

        {/* Bottom-Row: Privacy + CTA-Hint */}
        <div className="mt-auto flex items-center justify-between gap-3 border-t border-ink-primary/[0.05] pt-4">
          <span className="inline-flex min-w-0 items-center gap-1.5 text-xs font-medium text-ink-tertiary">
            <Lock className="h-3 w-3" strokeWidth={2} />
            <span className="truncate">
              {local ? "Lokal im Browser" : "Sofort nutzbar"}
            </span>
          </span>
          <span className="inline-flex shrink-0 items-center gap-1 text-xs font-medium text-ink-secondary transition-colors duration-200 group-hover:text-brand-700">
            Öffnen
            <ArrowUpRight className="h-3.5 w-3.5 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
          </span>
        </div>
      </article>
    </Link>
  );
}