import { useEffect, useState } from 'react';
import { dimensionAnalysis } from '@/services/dimensionAnalysis';
import StatusPill from '@/components/workshop/StatusPill';
export default function CompletenessPanel({ component }) {
  const [data, setData] = useState(null);
  useEffect(() => { dimensionAnalysis.completeness(component).then(setData); }, [component.uuid]);
  if (!data) return <p className="text-sm text-slate-400">Calculating completeness…</p>;
  return (
    <div className="space-y-5">
      <div className="flex items-center gap-4">
        <div className="text-4xl font-bold text-violet-300">{data.overall}%</div>
        <StatusPill tone={data.blocking.length === 0 ? 'green' : 'red'}>{data.blocking.length === 0 ? 'Cover Ready' : 'Not Cover Ready'}</StatusPill>
      </div>
      <p className="text-xs text-slate-500">Percentage is indicative only — explicit blocking items below govern final approval.</p>
      <div className="grid gap-3 sm:grid-cols-2">
        {data.checks.map(c => (
          <div key={c.label} className="rounded-xl border border-white/10 bg-white/5 p-3">
            <div className="flex items-center justify-between">
              <span className="text-sm text-slate-300">{c.label}</span>
              <span className={`text-xs font-semibold ${c.done >= c.total ? 'text-emerald-400' : 'text-amber-400'}`}>{c.done}/{c.total}</span>
            </div>
            <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-slate-800">
              <div className={`h-full rounded-full ${c.done >= c.total ? 'bg-emerald-400' : 'bg-amber-400'}`} style={{ width: `${Math.min(c.done / c.total, 1) * 100}%` }} />
            </div>
          </div>
        ))}
      </div>
      {data.blocking.length > 0 && (
        <div className="rounded-xl border border-red-400/30 bg-red-400/10 p-4">
          <h3 className="mb-2 text-sm font-semibold text-red-300">Blocking items</h3>
          <ul className="space-y-1 text-sm text-red-200">{data.blocking.map(b => <li key={b}>• {b}</li>)}</ul>
        </div>
      )}
      {data.conflicts.length > 0 && (
        <div className="rounded-xl border border-amber-400/30 bg-amber-400/10 p-4">
          <h3 className="mb-2 text-sm font-semibold text-amber-300">Dimension conflicts ({data.conflicts.length})</h3>
          <ul className="space-y-1 text-sm text-amber-200">{data.conflicts.map((c, i) => <li key={i}>• {c.type}: {c.detail}</li>)}</ul>
        </div>
      )}
    </div>
  );
}