'use client';

/**
 * Operational — Signing turnaround box plot (Report 04 Chart 5).
 *
 * Pure CSS / SVG-free box plot. Each row is one document type; the
 * horizontal bar shows min-Q1-median-Q3-max distribution. Simpler +
 * lighter than echarts' boxplot and renders identically in PDF.
 */

import { cn } from '@/lib/utils';

interface SigningBoxPlot {
  documentType: string;
  min: number;
  q1: number;
  median: number;
  q3: number;
  max: number;
  sampleSize: number;
}

interface Props {
  rows: SigningBoxPlot[];
}

const TYPE_COLOR: Record<string, string> = {
  eoi: 'bg-brand-300',
  reservation_agreement: 'bg-brand-500',
  contract: 'bg-brand-700',
};

export function OperationalSigningBoxPlot({ rows }: Props) {
  if (rows.length === 0) {
    return (
      <div className="py-10 text-center text-sm text-muted-foreground">
        No completed documents yet. The distribution fills in once documents complete their full
        signing cycle.
      </div>
    );
  }

  // Universal scale across all rows so types are visually comparable
  const max = Math.max(1, ...rows.map((r) => r.max));

  return (
    <div className="space-y-3">
      {rows.map((row) => {
        const color = TYPE_COLOR[row.documentType] ?? 'bg-brand-500';
        return (
          <div
            key={row.documentType}
            className="grid items-center gap-3"
            style={{ gridTemplateColumns: '160px 1fr 120px' }}
          >
            <div className="text-sm font-medium text-foreground">
              {formatType(row.documentType)}
            </div>

            {/* Box plot rendered with CSS:
                - whisker line: min → max (faint)
                - box: Q1 → Q3 (brand color)
                - median tick inside box (white) */}
            <div className="relative h-8 rounded-sm bg-muted/20">
              {/* Whisker (min to max) */}
              <div
                className="absolute top-1/2 -translate-y-1/2 h-px bg-foreground/40"
                style={{
                  left: `${(row.min / max) * 100}%`,
                  width: `${((row.max - row.min) / max) * 100}%`,
                }}
              />
              {/* Min cap */}
              <div
                className="absolute top-1/2 -translate-y-1/2 w-px h-3 bg-foreground/60"
                style={{ left: `${(row.min / max) * 100}%` }}
              />
              {/* Max cap */}
              <div
                className="absolute top-1/2 -translate-y-1/2 w-px h-3 bg-foreground/60"
                style={{ left: `${(row.max / max) * 100}%` }}
              />
              {/* Box (Q1 to Q3) */}
              <div
                className={cn('absolute top-1 bottom-1 rounded-sm', color)}
                style={{
                  left: `${(row.q1 / max) * 100}%`,
                  width: `${((row.q3 - row.q1) / max) * 100}%`,
                }}
                title={`Q1: ${row.q1.toFixed(1)}d, Q3: ${row.q3.toFixed(1)}d`}
              />
              {/* Median tick */}
              <div
                className="absolute top-1 bottom-1 w-0.5 bg-white"
                style={{ left: `${(row.median / max) * 100}%` }}
                title={`Median: ${row.median.toFixed(1)}d`}
              />
            </div>

            <div className="text-[11px] text-muted-foreground tabular-nums text-right">
              <span className="font-medium text-foreground">{row.median.toFixed(1)}d</span> median
              <br />
              <span className="text-muted-foreground/80">n={row.sampleSize}</span>
            </div>
          </div>
        );
      })}

      {/* X-axis tick reference */}
      <div className="grid pt-2" style={{ gridTemplateColumns: '160px 1fr 120px' }}>
        <div />
        <div className="relative h-4">
          <span className="absolute left-0 text-[10px] text-muted-foreground">0d</span>
          <span className="absolute right-0 text-[10px] text-muted-foreground">
            {max.toFixed(0)}d
          </span>
        </div>
        <div />
      </div>
    </div>
  );
}

function formatType(t: string): string {
  return t
    .replace(/_/g, ' ')
    .replace(/\b\w/g, (c) => c.toUpperCase())
    .replace(/Eoi/i, 'EOI');
}
