'use client';

import { useTranslations } from 'next-intl';
import { ConnectedSelectionBadge } from '@/components/ui/treatment/ConnectedSelectionBadge';
import {
  formatToothList,
  prosthesisGroupLabelFromCatalog,
  prosthesisTypeColorFromCatalog,
} from '@/components/treatment/prosthesisTypeDisplay';
import type { ProsthesisCatalogEntry } from '@/types/treatment-catalog';

export type LabCaseProsthesisGroup = {
  prosthesisTypeCode: string;
  teeth: string[];
  connected?: boolean;
  selectionGroupId?: string;
};

interface LabCaseProsthesisGroupsListProps {
  groups: LabCaseProsthesisGroup[];
  prosthesisCatalog: readonly ProsthesisCatalogEntry[];
  fallbackTeeth?: string[];
}

function prosthesisLabel(code: string, catalog: readonly ProsthesisCatalogEntry[]): string {
  return prosthesisGroupLabelFromCatalog(code, catalog);
}

export function LabCaseProsthesisGroupsList({
  groups,
  prosthesisCatalog,
  fallbackTeeth = [],
}: LabCaseProsthesisGroupsListProps) {
  const tTreatment = useTranslations('treatment');
  const archLabels = {
    UA: tTreatment('selectedArchUpper'),
    LA: tTreatment('selectedArchLower'),
  };
  if (groups.length > 0) {
    return (
      <ul className="space-y-0.5">
        {groups.map((group) => (
          <li
            key={`${group.selectionGroupId ?? ''}-${group.prosthesisTypeCode}-${group.teeth.join(',')}`}
            className="text-[11px] leading-snug"
            style={{
              color: prosthesisTypeColorFromCatalog(group.prosthesisTypeCode, prosthesisCatalog),
            }}
          >
            <span className="font-medium">
              {prosthesisLabel(group.prosthesisTypeCode, prosthesisCatalog)}
            </span>
            {group.teeth.length > 0 ? (
              <span className="text-text-muted">
                {' · '}
                {formatToothList(group.teeth, archLabels)}
              </span>
            ) : null}
            {group.connected ? (
              <ConnectedSelectionBadge className="ms-1 align-middle text-[9px] px-1 py-px" />
            ) : null}
          </li>
        ))}
      </ul>
    );
  }

  if (fallbackTeeth.length > 0) {
    return <p className="text-[11px] text-text-muted">{formatToothList(fallbackTeeth, archLabels)}</p>;
  }

  return null;
}

export type LabCaseToothJobRow = {
  tooth: string;
  codes: string[];
  connected?: boolean;
};

interface LabCaseToothJobsListProps {
  rows: LabCaseToothJobRow[];
  prosthesisCatalog: readonly ProsthesisCatalogEntry[];
}

export function LabCaseToothJobsList({
  rows,
  prosthesisCatalog,
}: LabCaseToothJobsListProps) {
  const tTreatment = useTranslations('treatment');
  const archLabels = {
    UA: tTreatment('selectedArchUpper'),
    LA: tTreatment('selectedArchLower'),
  };
  if (rows.length === 0) return null;

  return (
    <ul className="space-y-1">
      {rows.map((row) => (
        <li
          key={row.tooth}
          className="flex flex-wrap items-baseline gap-x-1.5 gap-y-0.5 text-[11px] leading-snug"
        >
          <span className="font-semibold text-text-primary">
            {formatToothList([row.tooth], archLabels)}
          </span>
          {row.codes.map((code) => (
            <span key={code} className="inline-flex items-baseline gap-x-1.5">
              <span className="text-text-muted" aria-hidden>
                ·
              </span>
              <span
                className="font-medium"
                style={{ color: prosthesisTypeColorFromCatalog(code, prosthesisCatalog) }}
              >
                {prosthesisLabel(code, prosthesisCatalog)}
              </span>
            </span>
          ))}
          {row.connected ? (
            <ConnectedSelectionBadge className="align-middle text-[9px] px-1 py-px" />
          ) : null}
        </li>
      ))}
    </ul>
  );
}
