/* eslint-disable */
// ============================================================
// ASTEM — Dent detail panel
// Replaces the Planification list + tooth-options column.
// Surfaces all selectable attributes for the focused tooth,
// each as a visual card with mini-icon.
// ============================================================

const { useMemo: useMemoD } = React;

// ---------- mini-icons ----------
function MiniIcon({ kind, active }) {
  const stroke = active ? "var(--accent-2)" : "var(--ink-2)";
  const fill = active ? "#C8F5E2" : "#F3EFFC";
  const accentFill = active ? "var(--accent)" : "var(--ink-faint)";
  const sz = { width: 48, height: 48, viewBox: "0 0 48 48" };
  switch (kind) {
    case "naturelle":
      return (
        <svg {...sz}>
          <path d="M24 6 Q15 6 13 14 Q11 24 14 32 Q16 42 24 42 Q32 42 34 32 Q37 24 35 14 Q33 6 24 6 Z"
            fill={fill} stroke={stroke} strokeWidth="1.6"/>
          <path d="M19 18 Q21 14 24 14 Q27 14 29 18" fill="none" stroke={stroke} strokeWidth="1" opacity="0.5"/>
        </svg>
      );
    case "absente":
      return (
        <svg {...sz}>
          <path d="M24 6 Q15 6 13 14 Q11 24 14 32 Q16 42 24 42 Q32 42 34 32 Q37 24 35 14 Q33 6 24 6 Z"
            fill="none" stroke={stroke} strokeWidth="1.6" strokeDasharray="3 3"/>
        </svg>
      );
    case "extraction":
      return (
        <svg {...sz}>
          <path d="M24 12 Q17 12 15 18 Q13 26 16 32 Q18 40 24 40 Q30 40 32 32 Q35 26 33 18 Q31 12 24 12 Z"
            fill={fill} stroke={stroke} strokeWidth="1.6"/>
          <path d="M24 9 L24 1 M20 5 L24 1 L28 5" fill="none" stroke="var(--alert)" strokeWidth="2" strokeLinecap="round"/>
        </svg>
      );
    case "couronne":
      // crown shape
      return (
        <svg {...sz}>
          <path d="M8 22 L14 12 L20 20 L24 10 L28 20 L34 12 L40 22 L40 32 L8 32 Z"
            fill={fill} stroke={stroke} strokeWidth="1.6" strokeLinejoin="round"/>
          <rect x="8" y="32" width="32" height="4" fill={accentFill} opacity="0.4"/>
          <circle cx="14" cy="14" r="1.5" fill={accentFill}/>
          <circle cx="24" cy="12" r="1.5" fill={accentFill}/>
          <circle cx="34" cy="14" r="1.5" fill={accentFill}/>
        </svg>
      );
    case "bridge":
      return (
        <svg {...sz}>
          <path d="M6 20 Q6 14 12 14 L36 14 Q42 14 42 20 L42 30 Q42 36 36 36 L12 36 Q6 36 6 30 Z"
            fill={fill} stroke={stroke} strokeWidth="1.4"/>
          <line x1="16" y1="14" x2="16" y2="36" stroke={stroke} strokeWidth="1.2"/>
          <line x1="24" y1="14" x2="24" y2="36" stroke={stroke} strokeWidth="1.2"/>
          <line x1="32" y1="14" x2="32" y2="36" stroke={stroke} strokeWidth="1.2"/>
        </svg>
      );
    case "implant":
      return (
        <svg {...sz}>
          <path d="M18 6 L30 6 L29 12 L19 12 Z" fill={fill} stroke={stroke} strokeWidth="1.4"/>
          <path d="M20 12 L28 12 L26 18 L22 18 Z" fill={fill} stroke={stroke} strokeWidth="1.2"/>
          <path d="M22 18 L26 18 L24 44 Z" fill={accentFill} opacity="0.6" stroke={stroke} strokeWidth="1.3"/>
          <path d="M21 22 L27 22 M21 26 L27 26 M21 30 L27 30 M22 34 L26 34 M22 38 L26 38" stroke={stroke} strokeWidth="0.8"/>
        </svg>
      );
    case "guide-dent":
      return (
        <svg {...sz}>
          <rect x="8" y="14" width="32" height="10" rx="2" fill={fill} stroke={stroke} strokeWidth="1.4"/>
          <circle cx="16" cy="19" r="1.6" fill={accentFill}/>
          <circle cx="24" cy="19" r="1.6" fill={accentFill}/>
          <circle cx="32" cy="19" r="1.6" fill={accentFill}/>
          <path d="M14 24 Q14 34 18 38 L20 38 Q20 28 18 24" fill="#F5F2FC" stroke={stroke} strokeWidth="1.2"/>
          <path d="M28 24 Q28 34 32 38 L34 38 Q34 28 32 24" fill="#F5F2FC" stroke={stroke} strokeWidth="1.2"/>
        </svg>
      );
    case "guide-muc":
      return (
        <svg {...sz}>
          <rect x="8" y="14" width="32" height="10" rx="2" fill={fill} stroke={stroke} strokeWidth="1.4"/>
          <circle cx="16" cy="19" r="1.6" fill={accentFill}/>
          <circle cx="32" cy="19" r="1.6" fill={accentFill}/>
          <path d="M6 28 Q24 22 42 28 Q42 36 24 38 Q6 36 6 28 Z" fill="#F2B0A0" stroke="#B4604F" strokeWidth="1.2"/>
        </svg>
      );
    case "guide-os":
      return (
        <svg {...sz}>
          <rect x="8" y="10" width="32" height="9" rx="2" fill={fill} stroke={stroke} strokeWidth="1.4"/>
          <circle cx="16" cy="14.5" r="1.4" fill={accentFill}/>
          <circle cx="32" cy="14.5" r="1.4" fill={accentFill}/>
          <path d="M8 22 Q24 19 40 22 L40 36 Q24 40 8 36 Z" fill="#F5E9D6" stroke="#A28457" strokeWidth="1.2"/>
          <circle cx="16" cy="28" r="1.4" fill="#A28457" opacity="0.5"/>
          <circle cx="24" cy="30" r="1.4" fill="#A28457" opacity="0.5"/>
          <circle cx="32" cy="28" r="1.4" fill="#A28457" opacity="0.5"/>
        </svg>
      );
    case "metal":
      return (
        <svg {...sz}>
          <defs>
            <linearGradient id={`mg-${active?'a':'b'}`} x1="0" x2="1" y1="0" y2="1">
              <stop offset="0%" stopColor="#E8EAF0"/>
              <stop offset="50%" stopColor="#9CA3B5"/>
              <stop offset="100%" stopColor="#5D6478"/>
            </linearGradient>
          </defs>
          <path d="M24 8 Q16 8 14 16 Q12 26 15 34 Q17 42 24 42 Q31 42 33 34 Q36 26 34 16 Q32 8 24 8 Z"
            fill={`url(#mg-${active?'a':'b'})`} stroke="#3D4254" strokeWidth="1.4"/>
          <path d="M18 14 Q20 12 24 12 Q28 12 30 14" stroke="white" strokeWidth="2" fill="none" opacity="0.6"/>
        </svg>
      );
    case "resine":
      return (
        <svg {...sz}>
          <defs>
            <radialGradient id={`rg-${active?'a':'b'}`} cx="35%" cy="30%" r="65%">
              <stop offset="0%" stopColor="#FFFFFF"/>
              <stop offset="60%" stopColor="#F5F2FC"/>
              <stop offset="100%" stopColor="#D9CFEF"/>
            </radialGradient>
          </defs>
          <path d="M24 8 Q16 8 14 16 Q12 26 15 34 Q17 42 24 42 Q31 42 33 34 Q36 26 34 16 Q32 8 24 8 Z"
            fill={`url(#rg-${active?'a':'b'})`} stroke={stroke} strokeWidth="1.4"/>
          <path d="M18 14 Q20 12 24 12 Q28 12 30 14" stroke="white" strokeWidth="2" fill="none" opacity="0.7"/>
        </svg>
      );
    default:
      return null;
  }
}

// ---------- option chip ----------
function OptionChip({ icon, label, sublabel, active, onClick, alert }) {
  return (
    <button className={`option-chip ${active ? "active" : ""} ${alert ? "alert" : ""}`} onClick={onClick} type="button">
      <span className="option-chip-ic">
        <MiniIcon kind={icon} active={active} />
      </span>
      <span className="option-chip-lbl">{label}</span>
      {active && (
        <span className="option-chip-check">
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3.5"><path d="M5 12l5 5 9-9"/></svg>
        </span>
      )}
    </button>
  );
}

// ---------- the panel ----------
function DentDetailPanel({ selected, planning, onSet, onSetMany, onOpenArbre }) {
  const cur = selected ? planning[selected] || {} : {};
  const toothNum = selected;
  const proth = cur.prothese || {};
  const hasAnyProsthetics = proth.couronne || proth.bridge || proth.implant;

  // Visual badge of current state
  const stateLabel = useMemoD(() => {
    if (!toothNum) return { txt: "Aucune dent", color: "#8C84B5", bg: "#F0EDFA" };
    const parts = [];
    if (proth.implant) parts.push("Implant planifié");
    else if (proth.couronne) parts.push("Couronne");
    else if (proth.bridge) parts.push("Bridge");
    if (cur.programme === "extraction") parts.push("Extraction");
    else if (cur.programme === "absente") parts.push("Dent absente");
    if (parts.length === 0) parts.push("Dent naturelle");
    const color = proth.implant ? "var(--accent-2)" : proth.couronne ? "var(--ink)" : proth.bridge ? "var(--ink)" : cur.programme === "extraction" ? "var(--alert)" : cur.programme === "absente" ? "#8C84B5" : "var(--ink-3)";
    const bg = proth.implant ? "var(--accent-soft)" : proth.couronne ? "var(--surface-tint)" : proth.bridge ? "var(--surface-tint)" : cur.programme === "extraction" ? "var(--alert-soft)" : "#F0EDFA";
    return { txt: parts.join(" · "), color, bg };
  }, [toothNum, cur, proth]);

  const set = (patch) => onSet(toothNum, patch);

  // Generic clearing of a neighbor tooth from a group (implant or bridge)
  const clearNeighbor = (kind) => ({
    prothese: {},
    programme: null,
    implant_type: null,
    implant_group_root: null,
    bridge_role: null,
    bridge_group_root: null,
    guide: null,
  });

  // Exclusive selection: only one of couronne / bridge / implant at a time
  const setProth = (k) => {
    const currentGroup = (proth.implant && (cur.implant_group || [])) ||
                         (proth.bridge && (cur.bridge_group || [])) || [];
    if (proth[k]) {
      // toggle off — dissolve any plural group
      if (currentGroup.length && onSetMany) {
        const clears = {};
        currentGroup.forEach(n => { clears[n] = clearNeighbor(); });
        onSetMany(clears);
      }
      set({
        prothese: {},
        programme: cur.programme === "prothese-virt" ? "prothese-virt" : cur.programme,
        implant_type: null, implant_group: [],
        bridge_group: [], bridge_role: null,
      });
    } else {
      // dissolve previous group on swap
      if (currentGroup.length && onSetMany) {
        const clears = {};
        currentGroup.forEach(n => { clears[n] = clearNeighbor(); });
        onSetMany(clears);
      }
      const keepProg = cur.programme === "absente" || cur.programme === "extraction";
      const patch = { prothese: { [k]: true }, programme: keepProg ? cur.programme : "prothese-virt" };
      patch.implant_type = (k === "implant") ? (cur.implant_type || "unaire") : null;
      patch.implant_group = (k === "implant") ? (cur.implant_group || []) : [];
      patch.bridge_group = (k === "bridge") ? (cur.bridge_group || []) : [];
      patch.bridge_role = (k === "bridge") ? "anchor" : null;
      set(patch);
    }
  };
  const setProgramme = (val) => {
    // Programme (statut clinique) est indépendant de la prothèse — ne pas effacer.
    if (val === cur.programme) set({ programme: null });
    else set({ programme: val });
  };

  // Two teeth are adjacent on the arch when:
  //   - same quadrant + immediate FDI neighbor, OR
  //   - they cross the midline (11↔21, 31↔41)
  const areAdjacent = (a, b) => {
    if (a === b) return false;
    const qA = Math.floor(a / 10), pA = a % 10;
    const qB = Math.floor(b / 10), pB = b % 10;
    if (qA === qB && Math.abs(pA - pB) === 1) return true;
    if (pA === 1 && pB === 1) {
      if ((qA === 1 && qB === 2) || (qA === 2 && qB === 1)) return true;
      if ((qA === 3 && qB === 4) || (qA === 4 && qB === 3)) return true;
    }
    return false;
  };
  const chainConnected = (root, group) => {
    const all = new Set([root, ...group]);
    const visited = new Set([root]);
    const queue = [root];
    while (queue.length) {
      const cur = queue.shift();
      for (const n of all) {
        if (!visited.has(n) && areAdjacent(cur, n)) {
          visited.add(n);
          queue.push(n);
        }
      }
    }
    return visited.size === all.size;
  };

  // Candidate teeth for adjacency picker (potential neighbors of the root tooth,
  // in the same arch — quadrants 1-2 if root is upper, 3-4 if lower)
  const adjacentTeeth = useMemoD(() => {
    if (!toothNum) return [];
    const q = Math.floor(toothNum / 10);
    const isUpper = q <= 2;
    const arch = isUpper ? [1, 2] : [3, 4];
    const list = [];
    arch.forEach(qq => {
      for (let p = 1; p <= 8; p++) list.push(qq * 10 + p);
    });
    return list.filter(n => n !== toothNum).sort((a, b) => a - b);
  }, [toothNum]);

  const implantGroup = cur.implant_group || [];
  const bridgeGroup = cur.bridge_group || [];

  // Generic neighbor-toggling factory — same UX for implant and bridge.
  // Only ADJACENT-to-chain teeth can be added. A tooth can only be removed
  // if the remaining chain stays connected to the root.
  const makeGroupToggle = (kind /* "implant" | "bridge" */) => (n) => {
    const group = kind === "implant" ? implantGroup : bridgeGroup;
    const groupField = kind === "implant" ? "implant_group" : "bridge_group";
    const inGroup = group.includes(n);

    if (inGroup) {
      const nextGroup = group.filter(x => x !== n);
      // refuse if it disconnects the chain
      if (!chainConnected(toothNum, nextGroup)) return;
      set({ [groupField]: nextGroup });
      if (onSetMany) {
        onSetMany({
          [n]: {
            prothese: {}, programme: null,
            implant_type: null, implant_group_root: null,
            bridge_role: null, bridge_group_root: null,
            guide: null,
          }
        });
      }
    } else {
      if (group.length + 1 >= 6) return;
      // require adjacency to existing chain
      const chain = new Set([toothNum, ...group]);
      let adjacent = false;
      for (const t of chain) {
        if (areAdjacent(n, t)) { adjacent = true; break; }
      }
      if (!adjacent) return;
      const nextGroup = [...group, n].sort((a, b) => a - b);
      set({ [groupField]: nextGroup });
      if (onSetMany) {
        const neighborPatch = (kind === "implant")
          ? {
              prothese: { implant: true },
              programme: "prothese-virt",
              implant_type: "plural",
              implant_group_root: toothNum,
            }
          : {
              prothese: { bridge: true },
              programme: "prothese-virt",
              bridge_group_root: toothNum,
              bridge_role: "pontic",
            };
        onSetMany({ [n]: neighborPatch });
      }
    }
  };

  // Whether tooth `n` is currently selectable (for picker chip enable/disable)
  const isSelectableInGroup = (n, group) => {
    if (group.includes(n)) {
      // can only remove if chain stays connected without it
      return chainConnected(toothNum, group.filter(x => x !== n));
    }
    if (group.length + 1 >= 6) return false;
    const chain = new Set([toothNum, ...group]);
    for (const t of chain) {
      if (areAdjacent(n, t)) return true;
    }
    return false;
  };
  const toggleImplantNeighbor = makeGroupToggle("implant");
  const toggleBridgeNeighbor = makeGroupToggle("bridge");

  if (!toothNum) {
    return (
      <div className="dent-detail empty">
        <div style={{ textAlign: "center", padding: "60px 20px", color: "var(--ink-3)" }}>
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ marginBottom: 14 }}>
            <path d="M12 2 Q8 2 7 6 Q6 12 7 18 Q8 22 12 22 Q16 22 17 18 Q18 12 17 6 Q16 2 12 2 Z"/>
          </svg>
          <div style={{ fontWeight: 600, color: "var(--ink)" }}>Sélectionnez une dent</div>
          <div style={{ fontSize: 13, marginTop: 4 }}>Cliquez sur le schéma pour définir son programme.</div>
        </div>
      </div>
    );
  }

  return (
    <div className="dent-detail">
      <div className="dent-detail-head">
        <div className="dent-num-big">{toothNum}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, color: "var(--ink-3)", fontWeight: 600, letterSpacing: ".06em", textTransform: "uppercase" }}>Dent sélectionnée</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, color: "var(--ink)", lineHeight: 1.1 }}>Dent {toothNum}</div>
          <div className="state-badge" style={{ background: stateLabel.bg, color: stateLabel.color }}>
            <span className="dot" style={{ background: stateLabel.color }} />
            {stateLabel.txt}
          </div>
        </div>
      </div>

      <div className="dent-detail-body">
        {/* Programme de travail — compact pill bar */}
        <div className="detail-section">
          <div className="detail-section-h">
            <span className="detail-section-n">01</span>
            <span>Programme</span>
          </div>
          <div className="pill-bar">
            <button type="button" className={`pill-bar-btn ${!cur.programme || cur.programme === "naturelle" || cur.programme === "prothese-virt" ? "active" : ""}`}
              onClick={() => setProgramme("naturelle")}>
              <span className="pill-ic"><MiniIcon kind="naturelle" /></span>
              <span>Naturelle</span>
            </button>
            <button type="button" className={`pill-bar-btn ${cur.programme === "absente" ? "active" : ""}`}
              onClick={() => setProgramme("absente")}>
              <span className="pill-ic"><MiniIcon kind="absente" /></span>
              <span>Absente</span>
            </button>
            <button type="button" className={`pill-bar-btn ${cur.programme === "extraction" ? "active alert" : ""}`}
              onClick={() => setProgramme("extraction")}>
              <span className="pill-ic"><MiniIcon kind="extraction" /></span>
              <span>Extraction</span>
            </button>
          </div>
        </div>

        {/* Prothèse virtuelle — toujours visible */}
        <div className="detail-section">
            <div className="detail-section-h">
              <span className="detail-section-n">02</span>
              <span>Prothèse virtuelle</span>
            </div>
            <div className="option-grid three">
              <OptionChip icon="couronne" label="Couronne"
                active={!!proth.couronne}
                onClick={() => setProth("couronne")} />
              <OptionChip icon="bridge" label="Bridge"
                active={!!proth.bridge}
                onClick={() => setProth("bridge")} />
              <OptionChip icon="implant" label="Implant"
                active={!!proth.implant}
                onClick={() => setProth("implant")} />
            </div>
          </div>

        {/* Bridge — pick adjacent teeth (same UX as plural implant) */}
        {proth.bridge && (
          <div className="detail-section">
            <div className="detail-section-h">
              <span className="detail-section-n">03</span>
              <span>Bridge — dents incluses</span>
            </div>
            <div className="plural-picker">
              <div className="plural-picker-h">
                <span>Dents adjacentes</span>
                <span className="plural-count">{bridgeGroup.length + 1} / 6</span>
              </div>
              <div className="plural-chips">
                {adjacentTeeth.map(n => {
                  const active = bridgeGroup.includes(n);
                  const disabled = !isSelectableInGroup(n, bridgeGroup);
                  return (
                    <button
                      key={n}
                      className={`plural-chip ${active ? "active" : ""} ${disabled ? "disabled" : ""}`}
                      onClick={() => !disabled && toggleBridgeNeighbor(n)}
                      disabled={disabled}
                    >
                      {n}
                    </button>
                  );
                })}
              </div>
              {bridgeGroup.length === 0 && (
                <div className="plural-hint" style={{ color: "var(--ink-3)" }}>
                  Sélectionnez les piliers et inter-dents du bridge
                </div>
              )}
            </div>
          </div>
        )}

        {/* Implant type — unaire / plural */}
        {proth.implant && (
          <div className="detail-section">
            <div className="detail-section-h">
              <span className="detail-section-n">03</span>
              <span>Type d'implant</span>
            </div>
            <div className="implant-type-row">
              <button
                className={`type-btn ${(cur.implant_type || "unaire") === "unaire" ? "active" : ""}`}
                onClick={() => {
                  if (implantGroup.length && onSetMany) {
                    const clears = {};
                    implantGroup.forEach(n => {
                      clears[n] = { prothese: {}, programme: null, implant_type: null, implant_group_root: null, guide: null };
                    });
                    onSetMany(clears);
                  }
                  set({ implant_type: "unaire", implant_group: [] });
                }}
              >
                <div className="type-btn-ic"><MiniIcon kind="implant" active={(cur.implant_type || "unaire") === "unaire"} /></div>
                <div className="type-btn-body">
                  <div className="type-btn-lbl">Unaire</div>
                  <div className="type-btn-sub">Une seule dent</div>
                </div>
              </button>
              <button
                className={`type-btn ${cur.implant_type === "plural" ? "active" : ""}`}
                onClick={() => set({ implant_type: "plural" })}
              >
                <div className="type-btn-ic">
                  <svg width="40" height="40" viewBox="0 0 48 48">
                    <g transform="translate(-3 0)"><MiniImplantIc /></g>
                    <g transform="translate(3 0)"><MiniImplantIc /></g>
                  </svg>
                </div>
                <div className="type-btn-body">
                  <div className="type-btn-lbl">Plural</div>
                  <div className="type-btn-sub">Plusieurs dents</div>
                </div>
              </button>
            </div>

            {cur.implant_type === "plural" && (
              <div className="plural-picker">
                <div className="plural-picker-h">
                  <span>Dents adjacentes</span>
                  <span className="plural-count">{implantGroup.length + 1} / 6</span>
                </div>
                <div className="plural-chips">
                  {adjacentTeeth.map(n => {
                    const active = implantGroup.includes(n);
                    const disabled = !isSelectableInGroup(n, implantGroup);
                    return (
                      <button
                        key={n}
                        className={`plural-chip ${active ? "active" : ""} ${disabled ? "disabled" : ""}`}
                        onClick={() => !disabled && toggleImplantNeighbor(n)}
                        disabled={disabled}
                      >
                        {n}
                      </button>
                    );
                  })}
                </div>
                {implantGroup.length === 0 && (
                  <div className="plural-hint">Sélectionnez au moins une dent adjacente</div>
                )}
              </div>
            )}
          </div>
        )}

        {/* Guide chirurgical — toujours visible, indépendant du programme/prothèse */}
        <div className="detail-section">
          <div className="detail-section-h">
            <span className="detail-section-n">04</span>
            <span>Guide chirurgical</span>
          </div>
          <div className="pill-bar">
            <button type="button" className={`pill-bar-btn ${cur.guide === "dentaire" ? "active" : ""}`}
              onClick={() => set({ guide: cur.guide === "dentaire" ? null : "dentaire" })}>
              <span className="pill-ic"><MiniIcon kind="guide-dent" /></span>
              <span>Dentaire</span>
            </button>
            <button type="button" className={`pill-bar-btn ${cur.guide === "muqueux" ? "active" : ""}`}
              onClick={() => set({ guide: cur.guide === "muqueux" ? null : "muqueux" })}>
              <span className="pill-ic"><MiniIcon kind="guide-muc" /></span>
              <span>Muqueux</span>
            </button>
            <button type="button" className={`pill-bar-btn ${cur.guide === "osseux" ? "active" : ""}`}
              onClick={() => set({ guide: cur.guide === "osseux" ? null : "osseux" })}>
              <span className="pill-ic"><MiniIcon kind="guide-os" /></span>
              <span>Osseux</span>
            </button>
          </div>
        </div>


      </div>
    </div>
  );
}

// Small reusable implant icon used in the "plural" button's pair
function MiniImplantIc() {
  return (
    <g>
      <path d="M18 6 L30 6 L29 12 L19 12 Z" fill="#F3EFFC" stroke="#3D2EB8" strokeWidth="1.2"/>
      <path d="M22 12 L26 12 L24 38 Z" fill="#C9C2E3" stroke="#3D2EB8" strokeWidth="1.1"/>
      <path d="M21 18 L27 18 M21 22 L27 22 M22 26 L26 26 M22 30 L26 30" stroke="#3D2EB8" strokeWidth="0.7"/>
    </g>
  );
}

window.AstemDentDetailPanel = DentDetailPanel;
window.AstemMiniIcon = MiniIcon;