import { useEffect, useState } from 'react';
import { Link, useParams } from 'react-router';
import { Alert, LoadingBlock, errorMessage } from '../components/Feedback';
import { actCompanyResponseContentUrl, getActAdministration } from '../lib/api';
import type { ActAdministrationDetail } from '../lib/api';
import { getInspectionActF4 } from '../lib/inspectionActF4Api';
import { formatDate } from '../lib/format';

export function ActAdministrationDetailPage() {
  const { actId = '' } = useParams();
  const [data, setData] = useState<ActAdministrationDetail | null>(null);
  const [reportId, setReportId] = useState<string | null>(null);
  const [error, setError] = useState('');
  useEffect(() => {
    Promise.all([getActAdministration(actId), getInspectionActF4(actId)])
      .then(([detail, act]) => { setData(detail); setReportId(act.report?.id ?? null); })
      .catch((requestError) => setError(errorMessage(requestError)));
  }, [actId]);
  if (!data && !error) return <LoadingBlock label="Cargando histórico…" />;
  return <section>
    {error && <Alert>{error}</Alert>}
    {data && <>
      <div className="page-heading"><div><span className="eyebrow">HISTÓRICO ADMINISTRATIVO</span><h1>{data.act.actCode}</h1><p>Registro previo de plazos y respuestas asociados al Acta.</p></div><Link className="button secondary" to={`/inspecciones/actas/${actId}`}>Ver Acta</Link></div>
      {reportId && <p>Las nuevas respuestas y verificaciones se registran en el <Link to={`/informes/${reportId}`}>Informe relacionado</Link>.</p>}
      <section className="panel"><h2>Antecedentes conservados</h2>
        {!data.deadlines.length && !data.responses.length && <p>No hay antecedentes administrativos anteriores.</p>}
        {[...data.deadlines.map((item) => ({ id: item.id, date: item.createdAt, title: 'Plazo registrado', description: `${formatDate(item.responseDueOn)} · ${item.reason}`, fileId: null as string | null, fileName: null as string | null })), ...data.responses.map((item) => ({ id: item.id, date: item.receivedOn, title: 'Respuesta de la empresa', description: item.details ?? 'Sin descripción', fileId: item.id, fileName: item.originalName }))].sort((a, b) => b.date.localeCompare(a.date)).map((item) => <div key={item.id} className="act-signer-row"><div><strong>{item.title}</strong><small>{formatDate(item.date)}</small><p>{item.description}</p></div>{item.fileName && item.fileId && <a className="button secondary" href={actCompanyResponseContentUrl(item.fileId)} target="_blank" rel="noreferrer">Abrir {item.fileName}</a>}</div>)}
      </section>
    </>}
  </section>;
}