import { useEffect, useState } from 'react';
import { Alert, LoadingBlock, errorMessage } from '../../components/Feedback';
import { Icon } from '../../components/Icon';
import {
  getAsset,
  getAssetVersion,
  listAssetVersionTimeline,
} from '../../lib/api';
import type {
  AssetVersionDetail,
  AssetVersionSummary,
} from '../../lib/api';
import { formatDate } from '../../lib/format';
import { AssetVersionDrawer } from './AssetVersionDrawer';
import { InventoryFunctionPanel } from './InventoryFunctionPanel';
import {
  assetVersionChangeLabel,
  assetVersionFieldLabel,
} from './assetVersionPresentation';

function normalized(value: string): string {
  return value
    .normalize('NFD')
    .replace(/[\u0300-\u036f]/g, '')
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, ' ')
    .trim();
}

function supportsFunctionChange(code: string, name: string): boolean {
  const value = `${normalized(code)} ${normalized(name)}`;
  return value.split(' ').some((part) => part === 'estacion' || part === 'subestacion');
}

export function AssetHistoryPanel({
  assetId,
  refreshKey = 0,
}: {
  assetId: string;
  refreshKey?: number;
}) {
  const [versions, setVersions] = useState<AssetVersionSummary[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [detail, setDetail] = useState<AssetVersionDetail | null>(null);
  const [detailLoading, setDetailLoading] = useState(false);
  const [functionEligible, setFunctionEligible] = useState(false);

  useEffect(() => {
    setLoading(true);
    setError('');
    Promise.all([
      listAssetVersionTimeline(assetId, { pageSize: 10 }),
      getAsset(assetId),
    ])
      .then(([response, asset]) => {
        setVersions(response.data);
        setTotal(response.meta.total);
        setFunctionEligible(supportsFunctionChange(asset.type.code, asset.type.name));
      })
      .catch((requestError) => setError(errorMessage(requestError)))
      .finally(() => setLoading(false));
  }, [assetId, refreshKey]);

  const open = async (version: AssetVersionSummary) => {
    setDetail(null);
    setDetailLoading(true);
    setError('');
    try {
      setDetail(await getAssetVersion(version.assetId, version.versionNumber));
    } catch (requestError) {
      setError(errorMessage(requestError));
    } finally {
      setDetailLoading(false);
    }
  };

  return <div className="asset-tab-stack">
    {functionEligible && <InventoryFunctionPanel assetId={assetId} />}
    <article className="panel asset-history-panel">
      <div className="panel-heading"><div><span className="eyebrow">TRAZABILIDAD TEMPORAL</span><h2>Historial del registro</h2></div><span className="count-pill">{total} versión{total === 1 ? '' : 'es'}</span></div>
      <p className="section-copy">Cada cambio conserva una copia completa e inmutable del registro, sus atributos, su ubicación y, cuando corresponde, su función operativa.</p>
      {error && <Alert>{error}</Alert>}
      {loading ? <LoadingBlock label="Cargando historial…" /> : <div className="asset-timeline">{versions.map((version) => <button type="button" className="timeline-entry" key={version.id} onClick={() => open(version)}><span className={`timeline-dot ${version.isCurrent ? 'current' : ''}`} /><span><strong>v{version.versionNumber} · {assetVersionChangeLabel(version.changeType)}</strong><small>{formatDate(version.occurredAt)} · {version.actorUsername ?? 'Sistema'}</small><span className="tag-list">{version.changedFields.slice(0, 4).map((field) => <em className="tag" key={field}>{assetVersionFieldLabel(field)}</em>)}</span></span><Icon name="chevron" size={16} /></button>)}</div>}
      {!loading && total > versions.length && <p className="history-limit-note">Se muestran las 10 versiones más recientes. El historial completo está disponible en la sección Historial.</p>}
      {(detailLoading || detail) && <AssetVersionDrawer detail={detail} loading={detailLoading} onClose={() => setDetail(null)} />}
    </article>
  </div>;
}