import { useSeoMeta } from '@unhead/react';
import { Link, Navigate } from 'react-router-dom';
import { ArrowLeft, Ruler } from 'lucide-react';
import { useTranslation } from '@/contexts/language';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { isAdminPubkey } from '@/lib/admins';
import { DeckDesigner } from '@/components/DeckDesigner';

/**
 * DIY tool page — the parametric 2D deck designer / 1:1 template.
 *
 * FROZEN / NOT READY FOR REGULAR USERS (2026-10-05): not listed in the DIY hub
 * and gated to platform admins, so the owner can keep testing it while the public
 * can't reach it. Un-gate by removing the `Navigate` guard AND re-adding the
 * `deckDesigner` card in `src/lib/diyGuides.ts`.
 */
export default function DeckDesignerPage() {
  const { t } = useTranslation();
  const { user } = useCurrentUser();

  useSeoMeta({
    title: 'Deck Designer — SkateSpots DIY',
    description: 'Design a skateboard or longboard outline, then export a printable 1:1 template, SVG or DXF — concave, kicks, wheelbase and truck holes included.',
  });

  if (!isAdminPubkey(user?.pubkey)) return <Navigate to="/diy" replace />;

  return (
    <div className="container mx-auto max-w-6xl px-4 py-8">
      <Link to="/diy" className="mb-4 inline-flex items-center text-sm text-muted-foreground transition-colors hover:text-foreground">
        <ArrowLeft className="mr-2 h-4 w-4" />
        {t('diyUi.backToDiy')}
      </Link>

      <header className="mb-6">
        <h1 className="flex items-center gap-2 text-2xl md:text-3xl font-black uppercase tracking-tight text-white">
          <Ruler className="h-6 w-6 text-[#ccff00]" />
          {t('diyUi.designer.title')}
        </h1>
        <p className="mt-2 max-w-2xl text-sm text-gray-400">{t('diyUi.designer.intro')}</p>
        <p className="mt-3 inline-flex items-center rounded-md border border-amber-500/30 bg-amber-500/[0.08] px-2.5 py-1 text-[11px] font-semibold text-amber-200/90">
          Internal preview · not public yet
        </p>
      </header>

      <DeckDesigner />
    </div>
  );
}