import Link from "next/link";
import type { Route } from "next";
import { ArrowUpRight } from "lucide-react";

import { recordRecentToolOpen } from "@/lib/client/dashboard-storage";
import { cn } from "@/lib/utils";
import type { ToolDefinition } from "@/types/tools";

interface ToolTileProps {
  tool: ToolDefinition;
}

export function ToolTile({ tool }: ToolTileProps) {
  const Icon = tool.icon;
  const isComingSoon = tool.status === "coming-soon";
  const tileClassName = cn(
    "shine-border interactive-card glass-panel group relative flex h-full flex-col rounded-2xl border p-5",
    tool.accent.borderClass,
    tool.accent.glowClass,
    !isComingSoon && "hover:-translate-y-0.5"
  );

  const tileContent = (
    <>
      <div className="flex items-start justify-between gap-3">
        <span className="inline-flex size-10 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-slate-900/70 text-white">
          <Icon className="size-5" />
        </span>
      </div>
      <div className="mt-5 flex flex-1 flex-col">
        <h3 className="font-[var(--font-space-grotesk)] text-lg font-medium text-white">{tool.title}</h3>
        <p className="mt-2 text-sm leading-relaxed text-slate-300">{tool.description}</p>
      </div>
    </>
  );

  if (isComingSoon) {
    return (
      <article className={tileClassName}>
        {tileContent}
        <p className="mt-5 text-xs uppercase tracking-[0.15em] text-slate-500">In active development</p>
      </article>
    );
  }

  return (
    <Link
      href={tool.route as Route}
      className={cn(
        tileClassName,
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/60"
      )}
      onClick={() => {
        recordRecentToolOpen({
          slug: tool.slug,
          title: tool.title
        });
      }}
    >
      {tileContent}
      <div className="mt-5 inline-flex items-center gap-1 text-sm text-sky-200 transition group-hover:text-white">
        Open Tool
        <ArrowUpRight className="size-4" />
      </div>
    </Link>
  );
}
