import { Link, useParams } from "react-router-dom";
import { pluginRegistry } from "../core/plugins/plugin-registry";
import { ToolShell } from "../components/tool/ToolShell";
import { useTheme } from "../app/useTheme";

export function ToolDetailPage() {
  const { toolId } = useParams<{ toolId: string }>();
  const { dark } = useTheme();

  const plugin = pluginRegistry.find((item) => item.manifest.id === toolId);

  if (!plugin) {
    return (
      <div className="p-8">
        <h1 className="mb-4 text-xl font-semibold text-[var(--p-text)]">
          Tool not found
        </h1>
        <Link to="/tools" className="text-blue-500 hover:underline">
          Return to directory
        </Link>
      </div>
    );
  }

  return (
    <div className="mx-auto flex w-full max-w-[1280px] flex-col gap-4 animate-plimi-fade">
      <Link
        to="/tools"
        className="self-start font-sans text-[13px] text-[var(--p-muted)] transition-colors hover:text-[var(--p-text)]"
      >
        &larr; Back to tools
      </Link>

      <header className="flex max-w-[760px] flex-col gap-2">
        <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-[var(--p-muted)]">
          {plugin.manifest.category} tool / browser-local
        </span>
        <h1 className="m-0 font-sans text-3xl font-bold tracking-tight text-[var(--p-text)] md:text-[42px]">
          {plugin.manifest.name}
        </h1>
        <p className="m-0 text-base leading-relaxed text-[var(--p-muted)]">
          {plugin.manifest.description} It runs locally in your browser, with no
          account and no tool-data upload.
        </p>
      </header>

      <div
        className="flex min-h-[70vh] flex-col overflow-hidden rounded-[24px] border-[1.5px] border-[var(--p-border)] bg-[var(--p-surface)]"
        style={{ boxShadow: "0 40px 80px -30px var(--p-shadow-soft)" }}
      >
        <ToolShell plugin={plugin} dark={dark} />
      </div>
    </div>
  );
}
