import { FileText, FlaskConical, MapPin, Package, Plus } from 'lucide-react';
import { CREATE_TARGETS } from '@/lib/projectCreateTargets';

const ICONS = { sampleOrder: Package, quotation: FileText, lwr: FlaskConical, visitReport: MapPin };

const BTN = 'inline-flex h-9 items-center gap-1.5 rounded-lg border border-input bg-card px-3.5 text-xs font-bold text-foreground no-underline transition-colors hover:border-primary hover:text-primary';

/**
 * "Create <doc> from this project" — rendered by BOTH the project Detail page and the
 * Approval SM Detail page, so the two cannot silently drift apart.
 *
 * Context here is the WHOLE project (there is no per-line checkbox on these screens), so
 * the URL carries only ?fromProject= — which the controllers read as "every live CC line".
 * The board, which does have a selection, goes through projectCreateTargets() instead and
 * adds &lines=.
 *
 * Always the "self" route: these pages are reached from a project already inside the
 * actor's scope, and each create page keeps its own server gate regardless.
 *
 * A plain <a target="_blank">, not an Inertia <Link>: the user asked for a new tab, and
 * <Link> always navigates in place.
 */
export default function CreateLinkedDocButtons({ projectId, canCreateDocs = {} }) {
    const visible = CREATE_TARGETS.filter((t) => canCreateDocs[t.key]);
    if (visible.length === 0) return null;

    return (
        <div className="mb-4 flex flex-wrap gap-2 border-b border-border/60 pb-4">
            {visible.map((t) => {
                const Icon = ICONS[t.key];
                return (
                    <a key={t.key} href={route(t.self, { fromProject: projectId })} target="_blank" rel="noreferrer" className={BTN}>
                        <Icon className="size-3.5" /><Plus className="-ml-0.5 size-3" /> Create {t.label}
                    </a>
                );
            })}
        </div>
    );
}