import { EmptyState, LoadingBlock } from '../../components/Feedback';
import type { AssetImportReviewItem } from '../../lib/api';

const ENTITY: Record<AssetImportReviewItem['entityKind'], string> = {
  DEPARTMENT: 'Departamento', ORGANIZATION: 'Organización', AREA: 'Área', AREA_DEPARTMENT_RELATION: 'Área / Departamento',
  FIELD: 'Yacimiento', OPERATOR_RELATION: 'Área / Operadora', LEGAL_RIGHT: 'Derecho / concesión',
  LEGAL_RIGHT_ORGANIZATION: 'Derecho / Organización', INSTALLATION: 'Instalación', LOCAL_STRUCTURE: 'Estructura local', TECHNICAL_ASSET: 'Elemento técnico',
};

const REASON: Record<string, string> = {
  PLAN_TERRITORY_AMBIGUOUS: 'Área/Yacimiento ambiguo',
  PLAN_TERRITORY_CONTEXT_REQUIRED: 'Falta definir Área/Yacimiento',
  PLAN_CONTEXT_DECISION_REQUIRED: 'Depende de una decisión territorial',
  PLAN_PARENT_NOT_RESOLVED: 'Padre físico pendiente',
  PLAN_CONTAINER_REVIEW_REQUIRED: 'Instalación pendiente',
  PLAN_MULTIPLE_NAMESPACE_MATCHES: 'Más de una coincidencia por identificador',
  DUPLICATE_INVENTORY_ID_IN_BATCH: 'Identificador repetido en el archivo',
  GROUPED_QUANTITY: 'La fila agrupa varias unidades',
  SOURCE_ROW_WARNING: 'Advertencia en la fuente',
  SOURCE_ROW_CONFLICT: 'Conflicto en la fuente',
};

function rowsLabel(rows: number[]) {
  if (!rows.length) return 'Sin fila específica';
  if (rows.length <= 4) return `Fila${rows.length === 1 ? '' : 's'} ${rows.join(', ')}`;
  return `${rows.length.toLocaleString('es-AR')} filas`;
}

export function AssetImportReviewsPanel(props: {
  data: AssetImportReviewItem[];
  loading: boolean;
  kind: 'ALL' | 'DIRECT' | 'DEPENDENCY';
  meta: { page: number; pageSize: number; total: number; totalPages: number };
  onKindChange: (kind: 'ALL' | 'DIRECT' | 'DEPENDENCY') => void;
  onPageChange: (page: number) => void;
  onOpenBatch: (batchId: string) => void;
}) {
  const { data, loading, kind, meta, onKindChange, onPageChange, onOpenBatch } = props;
  return <section className="panel import-review-inbox">
    <div className="panel-heading">
      <div><span className="eyebrow">IMPORTACIONES</span><h2>Revisiones pendientes</h2><p>Decisiones que pueden resolverse más adelante sin frenar los registros independientes.</p></div>
      <span className="status-badge observed">{meta.total.toLocaleString('es-AR')} pendientes</span>
    </div>
    <div className="import-review-inbox-filters">
      <button className={`button ${kind === 'ALL' ? 'primary' : 'secondary'}`} onClick={() => onKindChange('ALL')}>Todas</button>
      <button className={`button ${kind === 'DIRECT' ? 'primary' : 'secondary'}`} onClick={() => onKindChange('DIRECT')}>Decisiones humanas</button>
      <button className={`button ${kind === 'DEPENDENCY' ? 'primary' : 'secondary'}`} onClick={() => onKindChange('DEPENDENCY')}>Dependencias</button>
    </div>
    {loading ? <LoadingBlock label="Cargando revisiones…" /> : data.length === 0 ? <EmptyState title="No hay revisiones pendientes" text="Los lotes activos no tienen decisiones pendientes en este filtro." /> : <div className="import-review-inbox-list">
      {data.map((item) => <article key={item.id} className={`import-review-inbox-item ${item.dependency ? 'dependency' : 'decision'}`}>
        <div className="import-review-inbox-copy">
          <div className="import-review-inbox-meta"><span>{item.dependency ? 'Dependencia automática' : 'Decisión pendiente'}</span><span>{ENTITY[item.entityKind]}</span><span>{rowsLabel(item.sourceRowNumbers)}</span></div>
          <strong>{item.displayName}</strong>
          <p>{item.reviewCodes.map((code) => REASON[code] ?? 'Revisión de datos').filter((value, index, values) => values.indexOf(value) === index).slice(0, 3).join(' · ')}</p>
          <small>{item.batchName}{item.sourceLabel ? ` · ${item.sourceLabel}` : ''} · Plan rev. {item.planRevision}</small>
        </div>
        <button className="button secondary" onClick={() => onOpenBatch(item.batchId)}>Abrir lote</button>
      </article>)}
    </div>}
    {meta.totalPages > 1 && <div className="pagination"><button className="button secondary" disabled={meta.page <= 1 || loading} onClick={() => onPageChange(meta.page - 1)}>Anterior</button><span>Página {meta.page} de {meta.totalPages}</span><button className="button secondary" disabled={meta.page >= meta.totalPages || loading} onClick={() => onPageChange(meta.page + 1)}>Siguiente</button></div>}
  </section>;
}