dyolink/frontend/src/components/ui/treatment/ToothGlyph.tsx

'use client';

import { memo, type ReactNode } from 'react';
import type { FdiToothId } from '@/types/treatment';
import type { ToothShapeKind } from '@/components/treatment/fdiToothMeta';
import { getToothPathModel, type ToothPathModel } from '@/components/ui/treatment/toothPathModel';

interface ToothGlyphProps {
  fdi: FdiToothId;
  kind: ToothShapeKind;
  gradientId: string;
  selected: boolean;
  upper?: boolean;
  mirrored?: boolean;
  upsideDown?: boolean;
  className?: string;
}

function filledSilhouette(
  model: ToothPathModel,
  crownFill: string,
  rootFill: string,
  stroke: string,
  strokeW: number,
): ReactNode {
  return (
    <>
      <path d={model.crown} fill={crownFill} stroke={stroke} strokeWidth={strokeW} strokeLinejoin="round" />
      {model.roots.map((d, i) => (
        <path key={i} d={d} fill={rootFill} stroke={stroke} strokeWidth={strokeW} strokeLinejoin="round" />
      ))}
    </>
  );
}

function detailOnly(model: ToothPathModel, stroke: string, strokeW: number): ReactNode {
  if (!model.detailStroke) return null;
  const { d, widthScale } = model.detailStroke;
  return <path d={d} fill="none" stroke={stroke} strokeWidth={strokeW * widthScale} strokeLinecap="round" />;
}

function renderClinicalFill(model: ToothPathModel, selected: boolean, gradientId: string): ReactNode {
  const stroke = selected ? 'var(--color-primary)' : '#1e293b';
  const strokeW = selected ? 2.4 : 1.35;
  const fill = `url(#${gradientId})`;
  return (
    <>
      {filledSilhouette(model, fill, fill, stroke, strokeW)}
      {detailOnly(model, stroke, strokeW)}
    </>
  );
}
/** FDI chart tooth: clinical gradient + roots only. */
export const ToothGlyph = memo(function ToothGlyph({
  fdi,
  kind,
  gradientId,
  selected,
  upper,
  mirrored,
  upsideDown,
  className = 'w-8 h-[4.85rem]',
}: ToothGlyphProps) {
  const model: ToothPathModel | null = getToothPathModel(fdi, kind, upper);
  const filter = selected ? 'drop-shadow(0 0 6px rgba(9, 169, 188, 0.65))' : undefined;

  if (!model) {
    return (
      <svg viewBox="0 0 36 78" className={`${className} shrink-0`} aria-hidden>
        <text x="4" y="40" fontSize="8" fill="currentColor" opacity="0.35">
          ?
        </text>
      </svg>
    );
  }

  const body = renderClinicalFill(model, selected, gradientId);

  return (
    <svg
      viewBox="0 0 36 78"
      className={`${className} shrink-0`}
      style={{ filter }}
      aria-hidden
    >
      <defs>
        <radialGradient id={gradientId} cx="45%" cy="35%" r="65%">
          <stop offset="0%" stopColor={selected ? '#cffafe' : '#ffffff'} />
          <stop offset="55%" stopColor={selected ? '#5eead4' : '#e0f2fe'} />
          <stop offset="100%" stopColor={selected ? '#0e7490' : '#93c5fd'} />
        </radialGradient>
      </defs>
      <g
        transform={[
          mirrored ? 'translate(36 0) scale(-1 1)' : '',
          upsideDown ? 'translate(0 78) scale(1 -1)' : '',
        ]
          .filter(Boolean)
          .join(' ') || undefined}
      >
        {body}
      </g>
    </svg>
  );
});