import { Fragment } from 'react';
import './ExecutorDashboard.css';
import './QueueStatusSummaryBar.css';

/**
 * Status strip aligned with the dashboard: same `countByCategory` buckets per role.
 * @param {{ role: 'executor' | 'verifier'; counts: Record<string, number>; total: number; variant?: 'bar' | 'metricCards' }} props
 */
export default function QueueStatusSummaryBar({ role, counts, total, variant = 'bar' }) {
  const c = counts || {};
  const done = c.done ?? 0;
  const notStarted = c.not_started ?? 0;
  const inProcess = c.in_process ?? 0;
  const returned = c.returned ?? 0;
  const verificationRequired = c.verification_required ?? 0;
  const pct = total > 0 ? Math.round((done / total) * 100) : 0;

  function barShare(count) {
    if (total <= 0) return 0;
    return Math.min(100, Math.round((count / total) * 1000) / 10);
  }

  if (variant === 'metricCards') {
    const verifierCards = [
      {
        key: 'total',
        title: 'Total assessments',
        subtitle: 'Everything currently in your verifier queue',
        displayValue: String(total),
        dot: '#64748b',
        barPct: total > 0 ? 100 : 0
      },
      {
        key: 'completion',
        title: 'Completion rate',
        subtitle: `${done} of ${total} marked complete`,
        displayValue: `${pct}%`,
        dot: '#7f1d1d',
        barPct: pct
      },
      {
        key: 'not_started',
        title: 'Not started',
        subtitle: 'Still with the executor or not yet in your cycle',
        displayValue: String(notStarted),
        dot: '#94a3b8',
        barPct: barShare(notStarted)
      },
      {
        key: 'resubmitted',
        title: 'Resubmitted',
        subtitle: 'Back from the executor for your review',
        displayValue: String(inProcess),
        dot: '#1d4ed8',
        barPct: barShare(inProcess)
      },
      {
        key: 'returned',
        title: 'Returned to executor',
        subtitle: 'You sent these back for changes',
        displayValue: String(returned),
        dot: '#dc2626',
        barPct: barShare(returned)
      }
    ];

    const executorCards = [
      {
        key: 'not_started',
        title: 'Not started',
        subtitle: 'Open jobs waiting for you',
        displayValue: String(notStarted),
        dot: '#64748b',
        barPct: barShare(notStarted)
      },
      {
        key: 'submit_verifier',
        title: 'Submit to verifier',
        subtitle: 'With verifier for review',
        displayValue: String(verificationRequired),
        dot: '#1879bd',
        barPct: barShare(verificationRequired)
      },
      {
        key: 'returned',
        title: 'Returned by verifier',
        subtitle: 'Verifier sent this back for your follow-up',
        displayValue: String(returned),
        dot: '#f36f2a',
        barPct: barShare(returned)
      },
      {
        key: 'done',
        title: 'Assessment done',
        subtitle: 'Ready or completed reviews',
        displayValue: String(done),
        dot: '#189e52',
        barPct: barShare(done)
      }
    ];

    const cards = role === 'verifier' ? verifierCards : executorCards;

    return (
      <div className="ex-dash qs-queue-summary qs-queue-summary--metric-cards">
        <div className="qs-metric-grid" role="group" aria-label="Queue status summary">
          {cards.map((it) => (
            <article key={it.key} className="qs-metric-card">
              <div className="qs-metric-card-top">
                <span
                  className="qs-metric-card-dot"
                  style={{ backgroundColor: it.dot }}
                  aria-hidden
                />
                <span className="qs-metric-card-count">{it.displayValue}</span>
              </div>
              <h3 className="qs-metric-card-title">{it.title}</h3>
              <p className="qs-metric-card-lede">{it.subtitle}</p>
              <div className="qs-metric-card-bar-track" aria-hidden>
                <div
                  className="qs-metric-card-bar-fill"
                  style={{ width: `${it.barPct}%`, background: it.dot }}
                />
              </div>
            </article>
          ))}
        </div>
      </div>
    );
  }

  let items =
    role === 'verifier'
      ? [
          { num: total, lbl: 'Total', tone: '' },
          { num: c.done ?? 0, lbl: 'Completed', tone: 'ex-dash-summary-num--green' },
          { num: c.not_started ?? 0, lbl: 'Not started', tone: 'ex-dash-summary-num--amber' },
          { num: c.in_process ?? 0, lbl: 'Resubmitted', tone: 'ex-dash-summary-num--blue' },
          { num: c.returned ?? 0, lbl: 'Returned to executor', tone: 'ex-dash-summary-num--rose' }
        ]
      : [
          { num: total, lbl: 'Total', tone: '' },
          { num: c.done ?? 0, lbl: 'Completed', tone: 'ex-dash-summary-num--green' },
          { num: c.not_started ?? 0, lbl: 'Not started', tone: 'ex-dash-summary-num--amber' },
          { num: c.verification_required ?? 0, lbl: 'Submit to verifier', tone: 'ex-dash-summary-num--violet' },
          { num: c.returned ?? 0, lbl: 'Returned by verifier', tone: 'ex-dash-summary-num--rose' }
        ];

  return (
    <div className="ex-dash qs-queue-summary">
      <div className="ex-dash-summary-wrap">
        <div className="ex-dash-summary-bar" role="group" aria-label="Queue status summary">
          {items.map((it, i) => (
            <Fragment key={it.lbl}>
              <div className="ex-dash-summary-item">
                <span className={`ex-dash-summary-num ${it.tone}`.trim()}>{it.num}</span>
                <span className="ex-dash-summary-lbl">{it.lbl}</span>
              </div>
              {i < items.length - 1 ? <div className="ex-dash-summary-sep" aria-hidden /> : null}
            </Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}
