o2o-negosium-original/negodata/front/src/features/quotations/components/QuotationDetailSheet/PriceRail.tsx

import type { ReactNode } from 'react';
import { Typography } from '@/components/ui/typography';
import { cn } from '@/lib/utils';
import type { PriceRailView } from '../../types';

const won = (n?: number | null) => (n != null ? `₩${n.toLocaleString()}` : '-');

/**
 * 헤더 가격 레일 — 협상을 판정하는 네 가격을 왼쪽에서 오른쪽 흐름 순으로 고정 노출한다.
 * 접힘·대화 탭에서도 남으므로 협상을 보며 기준가를 확인할 수 있다.
 *
 * 1번 칸만 유형에 따라 갈린다:
 *   1:1 = 앵커링가(협력사가 하나라 견적의 값)
 *   1:N = 투찰 현황(앵커는 (상품×공급사)마다 달라 대표값이 성립하지 않는다 → 협상현황 표의 협력사별 컬럼으로)
 * 4번 칸은 상태로 갈린다: 낙찰가 / 최저 투찰가(개찰) / 현재 제시가·최저가(진행 중).
 */
export function PriceRail({ rail, onShowTarget }: { rail: PriceRailView; onShowTarget?: () => void }) {
  const savingsText =
    rail.savings != null
      ? `목표가 대비 ${rail.savings >= 0 ? '−' : '+'}${won(Math.abs(rail.savings))}` +
        (rail.savingsRate != null ? ` (${rail.savings >= 0 ? '−' : '+'}${Math.abs(rail.savingsRate * 100).toFixed(1)}%)` : '')
      : null;

  return (
    <div className="grid grid-cols-2 border-b border-border bg-card sm:grid-cols-4">
      {rail.oneToOne ? (
        <Cell
          label="앵커링가"
          dot="bg-zinc-400"
          value={won(rail.anchorPrice)}
          sub={
            rail.anchorPrice != null && rail.targetPrice
              ? `목표가 −${pctGap(rail.targetPrice, rail.anchorPrice)}`
              : undefined
          }
        />
      ) : (
        <Cell
          label="투찰 현황"
          dot="bg-zinc-400"
          value={`${rail.bidCount} / ${rail.supplierCount}`}
          sub="협력사별 앵커링가는 아래 표에서"
        />
      )}

      <Cell label="목표가" dot="bg-primary" value={won(rail.targetPrice)} onSub={onShowTarget} />

      <Cell
        label="타결 상한가"
        dot="bg-amber-500"
        value={won(rail.ceilingPrice)}
        valueClassName="text-amber-600 dark:text-amber-400"
        sub={`목표가 +${(rail.ceilingRate / 10).toFixed(1)}% · 초과 시 결렬`}
      />

      <Cell
        label={rail.resultLabel}
        badge={rail.resultBadge}
        dot={rail.outcome === 'awarded' ? 'bg-emerald-500' : 'bg-amber-500'}
        value={rail.resultPrice != null ? won(rail.resultPrice) : '미응찰'}
        valueClassName={
          rail.resultPrice == null
            ? 'text-muted-foreground'
            : rail.outcome === 'awarded'
              ? 'text-emerald-600 dark:text-emerald-400'
              : 'text-amber-600 dark:text-amber-400'
        }
        className={rail.outcome === 'awarded' ? 'bg-emerald-50/60 dark:bg-emerald-950/20' : undefined}
        sub={savingsText ?? undefined}
      />
    </div>
  );
}

/** 목표가 대비 하락폭(%) — 앵커가 목표가보다 낮은 정상 케이스만 의미가 있다. */
function pctGap(target: number, anchor: number): string {
  if (!target) return '0.0%';
  return `${(((target - anchor) / target) * 100).toFixed(1)}%`;
}

function Cell({
  label,
  badge,
  dot,
  value,
  sub,
  onSub,
  className,
  valueClassName,
}: {
  label: string;
  badge?: string | null;
  dot: string;
  value: ReactNode;
  sub?: string;
  /** 있으면 보조줄이 버튼(목표가 산정 내역) */
  onSub?: () => void;
  className?: string;
  valueClassName?: string;
}) {
  return (
    <div
      className={cn(
        'min-w-0 border-r border-border px-4 py-2.5 last:border-r-0',
        // 2열(모바일)에서는 윗줄에만 밑줄을 긋고 2번째 칸의 오른쪽 선을 지운다.
        // 컨테이너가 이미 아래 테두리를 가지므로 아랫줄에 또 그으면 선이 겹쳐 두꺼워진다.
        '[&:nth-child(-n+2)]:border-b sm:[&:nth-child(-n+2)]:border-b-0',
        '[&:nth-child(2)]:border-r-0 sm:[&:nth-child(2)]:border-r',
        className,
      )}
    >
      <div className="mb-0.5 flex items-center gap-1.5">
        <span className={cn('size-1.5 shrink-0 rounded-full', dot)} />
        <Typography as="span" variant="caption" className="text-[10.5px] leading-tight">
          {label}
        </Typography>
        {badge && (
          <span className="rounded-full bg-amber-100 px-1.5 py-px text-[9.5px] font-bold text-amber-700 dark:bg-amber-950/50 dark:text-amber-400">
            {badge}
          </span>
        )}
      </div>
      <Typography
        as="p"
        variant="small"
        className={cn('truncate font-mono text-[15px] font-bold tabular-nums tracking-tight text-foreground', valueClassName)}
      >
        {value}
      </Typography>
      {/* 보조줄은 값이 없어도 자리를 지킨다 — 칸마다 높이가 달라지면 레일 바닥이 들쭉날쭉해진다. */}
      <div className="min-h-[16px] leading-4">
        {onSub ? (
          <button
            type="button"
            onClick={onSub}
            title="목표가 산정 내역 보기"
            className="cursor-pointer text-[10.5px] text-primary hover:underline"
          >
            산정 내역 보기 ›
          </button>
        ) : sub ? (
          <Typography as="p" variant="caption" className="truncate text-[10.5px] tabular-nums">
            {sub}
          </Typography>
        ) : null}
      </div>
    </div>
  );
}