import { lazy, Suspense, useEffect, useMemo, useState } from 'react';
import type { FormEvent } from 'react';
import { Link, useSearchParams } from 'react-router';
import { useAuth } from '../auth/AuthContext';
import { hasAdministratorRole } from '../auth/adminAccess';
import { Alert, LoadingBlock, errorMessage } from '../components/Feedback';
import { Icon } from '../components/Icon';
import { AssetDossierPanel } from '../features/assets/AssetDossierPanel';
import { AssetFindingCatalogPanel } from '../features/assets/AssetFindingCatalogPanel';
import { AssetHistoryPanel } from '../features/assets/AssetHistoryPanel';
import { AssetMediaPanel } from '../features/assets/AssetMediaPanel';
import { AssetTechnicalDataPanel } from '../features/assets/AssetTechnicalDataPanel';
import {
  ASSET_OPERATIONAL_STATUSES,
  ASSET_STATUSES,
  assetOperationalStatusLabel,
  assetStatusClass,
  assetStatusLabel,
} from '../features/assets/assetPresentation';
import {
  getAssetLineage,
  listAssetTreeChildren,
  updateAsset,
  updateAssetInformationStatus,
  updateAssetOperationalStatus,
} from '../lib/api';
import type {
  AssetDetail,
  AssetInformationStatus,
  AssetLineageItem,
  AssetListItem,
  AssetOperationalStatus,
} from '../lib/api';
import { getInventoryTechnicalValues } from '../lib/inventoryStructureApi';
import type { InventoryTechnicalValues } from '../lib/inventoryStructureApi';
import './SimpleInventoryDetailPage.css';

const AssetGeometryEditor = lazy(() =>
  import('../features/map/AssetGeometryEditor').then((module) => ({ default: module.AssetGeometryEditor })),
);

export type SimpleInventoryKind =
  | 'DEPARTAMENTO'
  | 'AREA'
  | 'YACIMIENTO'
  | 'INSTALACION'
  | 'SUBINSTALACION';

type SimpleTab = 'summary' | 'activity' | 'findings' | 'location' | 'photos' | 'history';

function normalized(value: string | null | undefined): string {
  return (value ?? '')
    .normalize('NFD')
    .replace(/[\u0300-\u036f]/g, '')
    .trim()
    .toLowerCase()
    .replace(/[_\s]+/g, '-');
}

export function simpleInventoryKind(asset: AssetDetail): SimpleInventoryKind | null {
  const code = normalized(asset.type.code);
  const name = normalized(asset.type.name);
  const values = new Set([code, name]);
  if (values.has('departamento')) return 'DEPARTAMENTO';
  if (values.has('area')) return 'AREA';
  if (values.has('yacimiento')) return 'YACIMIENTO';
  if (values.has('subinstalacion')) return 'SUBINSTALACION';
  if (
    values.has('instalacion')
    || values.has('instalacion-de-superficie')
    || values.has('instalacion-superficie')
  ) return 'INSTALACION';
  return null;
}

export function isSimpleInventoryAsset(asset: AssetDetail): boolean {
  return simpleInventoryKind(asset) !== null;
}

const labels: Record<SimpleInventoryKind, string> = {
  DEPARTAMENTO: 'Departamento',
  AREA: 'Área',
  YACIMIENTO: 'Yacimiento',
  INSTALACION: 'Instalación',
  SUBINSTALACION: 'Subinstalación',
};

const childLabels: Partial<Record<SimpleInventoryKind, string>> = {
  DEPARTAMENTO: 'Área',
  AREA: 'Yacimiento',
  YACIMIENTO: 'Instalación',
  INSTALACION: 'Subinstalación',
};

function lineageLabel(item: AssetLineageItem): string {
  return item.commonName ? `${item.name} · ${item.commonName}` : item.name;
}

export function SimpleInventoryDetailPage({ initialAsset }: { initialAsset: AssetDetail }) {
  const [params, setParams] = useSearchParams();
  const { user, hasPermission } = useAuth();
  const kind = simpleInventoryKind(initialAsset);
  const [asset, setAsset] = useState(initialAsset);
  const [lineage, setLineage] = useState<AssetLineageItem[]>([]);
  const [children, setChildren] = useState<AssetListItem[]>([]);
  const [childrenHasMore, setChildrenHasMore] = useState(false);
  const [technical, setTechnical] = useState<InventoryTechnicalValues | null>(null);
  const [loadingRelated, setLoadingRelated] = useState(true);
  const [editing, setEditing] = useState(false);
  const [saving, setSaving] = useState(false);
  const [name, setName] = useState(initialAsset.name);
  const [commonName, setCommonName] = useState(initialAsset.commonName ?? '');
  const [description, setDescription] = useState(initialAsset.description ?? '');
  const [status, setStatus] = useState<AssetInformationStatus>(initialAsset.informationStatus);
  const [operationalStatus, setOperationalStatus] = useState<AssetOperationalStatus>(initialAsset.operationalStatus);
  const [historyRefreshKey, setHistoryRefreshKey] = useState(0);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  const canEdit = hasPermission('assets.update');
  const canCreate = hasPermission('assets.create');
  const canChangeStatus = hasPermission('assets.change_status');
  const canChangeOperationalStatus = hasPermission('assets.change_operational_status');
  const canReadHistory = hasPermission('assets.read_history');
  const canReadMedia = hasPermission('assets.read_media');
  const canManageMedia = hasPermission('assets.manage_media');
  const canEditGeometry = hasPermission('assets.update_geometry');
  const canReadFindingCatalog = hasPermission('finding_catalog.read');
  const canManageFindingCatalog = hasPermission('finding_catalog.manage');
  const canReadDossier = hasPermission('inspections.read')
    && hasPermission('inspection_acts.read')
    && hasPermission('inspection_findings.read')
    && hasPermission('inspection_evidence.read')
    && hasPermission('inspection_communications.read');
  const canAdvanced = hasAdministratorRole(user);

  const inspectable = kind === 'YACIMIENTO' || kind === 'INSTALACION' || kind === 'SUBINSTALACION';
  const technicalLevel = kind === 'INSTALACION' || kind === 'SUBINSTALACION';
  const hasChildren = kind !== 'SUBINSTALACION';
  const requestedTab = params.get('tab') as SimpleTab | null;
  const availableTabs = useMemo(() => new Set<SimpleTab>([
    'summary',
    ...(inspectable && canReadDossier ? ['activity' as const] : []),
    ...(technicalLevel && canReadFindingCatalog ? ['findings' as const] : []),
    'location',
    ...(canReadMedia ? ['photos' as const] : []),
    ...(canReadHistory ? ['history' as const] : []),
  ]), [inspectable, technicalLevel, canReadDossier, canReadFindingCatalog, canReadMedia, canReadHistory]);
  const tab: SimpleTab = requestedTab && availableTabs.has(requestedTab) ? requestedTab : 'summary';

  const loadRelated = async () => {
    setLoadingRelated(true);
    try {
      const [loadedLineage, childPage, loadedTechnical] = await Promise.all([
        getAssetLineage(asset.id),
        hasChildren
          ? listAssetTreeChildren({ parentId: asset.id, limit: 100 })
          : Promise.resolve({ data: [] as AssetListItem[], meta: { count: 0, hasMore: false } }),
        technicalLevel
          ? getInventoryTechnicalValues(asset.id).catch(() => null)
          : Promise.resolve(null),
      ]);
      setLineage(loadedLineage);
      setChildren(childPage.data);
      setChildrenHasMore(childPage.meta.hasMore);
      setTechnical(loadedTechnical);
    } catch (requestError) {
      setError(errorMessage(requestError));
    } finally {
      setLoadingRelated(false);
    }
  };

  useEffect(() => { void loadRelated(); }, [asset.id]);

  if (!kind) return <Alert>Este registro no pertenece al modelo simple de Inventarios.</Alert>;

  const save = async (event: FormEvent) => {
    event.preventDefault();
    if (!name.trim()) return;
    setSaving(true);
    setError('');
    setSuccess('');
    try {
      let saved = asset;
      if (canEdit) {
        saved = await updateAsset(asset.id, {
          name: name.trim(),
          commonName: commonName.trim() || null,
          description: description.trim() || null,
        });
      }
      if (canChangeStatus && saved.informationStatus !== status) {
        saved = await updateAssetInformationStatus(asset.id, status);
      }
      if (canChangeOperationalStatus && saved.operationalStatus !== operationalStatus) {
        saved = await updateAssetOperationalStatus(asset.id, operationalStatus);
      }
      setAsset(saved);
      setName(saved.name);
      setCommonName(saved.commonName ?? '');
      setDescription(saved.description ?? '');
      setStatus(saved.informationStatus);
      setOperationalStatus(saved.operationalStatus);
      setEditing(false);
      setHistoryRefreshKey((current) => current + 1);
      setSuccess('Registro actualizado.');
    } catch (requestError) {
      setError(errorMessage(requestError));
    } finally {
      setSaving(false);
    }
  };

  const cancelEdit = () => {
    setEditing(false);
    setName(asset.name);
    setCommonName(asset.commonName ?? '');
    setDescription(asset.description ?? '');
    setStatus(asset.informationStatus);
    setOperationalStatus(asset.operationalStatus);
  };

  const setTab = (next: SimpleTab) => {
    const nextParams = new URLSearchParams(params);
    next === 'summary' ? nextParams.delete('tab') : nextParams.set('tab', next);
    nextParams.delete('advanced');
    setParams(nextParams);
  };

  const childLabel = childLabels[kind];
  const parentLabel = kind === 'AREA'
    ? 'Departamento'
    : kind === 'YACIMIENTO'
      ? 'Área'
      : kind === 'INSTALACION'
        ? 'Yacimiento'
        : kind === 'SUBINSTALACION'
          ? 'Instalación'
          : null;

  return <section className="narrow-section simple-inventory-page">
    <nav className="breadcrumb simple-inventory-breadcrumb" aria-label="Ruta de Inventario">
      <Link to="/inventarios">Inventarios</Link>
      {lineage.filter((item) => item.id !== asset.id).map((item) => <span className="simple-inventory-breadcrumb-part" key={item.id}><span>›</span><Link to={`/inventarios/${item.id}`}>{lineageLabel(item)}</Link></span>)}
      <span>›</span><strong>{asset.name}</strong>
    </nav>

    <header className="simple-inventory-hero">
      <div>
        <span className="eyebrow">{labels[kind].toUpperCase()}</span>
        <h1>{asset.name}</h1>
        <div className="simple-inventory-hero-meta"><strong>{asset.code}</strong>{asset.commonName && <span>{asset.commonName}</span>}</div>
      </div>
      <div className="simple-inventory-hero-actions">
        <span className={`status-badge ${assetStatusClass(asset.informationStatus)}`}>{assetStatusLabel(asset.informationStatus)}</span>
        {tab === 'summary' && (canEdit || canChangeStatus || canChangeOperationalStatus) && <button type="button" className="button secondary" onClick={() => editing ? cancelEdit() : setEditing(true)}><Icon name="edit" />{editing ? 'Cancelar' : 'Editar'}</button>}
        {tab === 'summary' && canCreate && childLabel && <Link className="button primary" to={`/inventarios/nuevo?parentId=${asset.id}`}><Icon name="plus" />Agregar {childLabel.toLowerCase()}</Link>}
      </div>
    </header>

    <div className="simple-inventory-purpose">
      <Icon name={inspectable ? 'clipboard' : 'layers'} />
      <span>{inspectable
        ? 'Ficha operativa: identidad, ubicación y actividad de inspección. La información administrativa avanzada queda fuera de la vista cotidiana.'
        : 'Este nivel organiza la estructura del Inventario. La vista cotidiana muestra sólo los datos necesarios para ubicar y navegar.'}</span>
    </div>

    <nav className="simple-inventory-tabs" aria-label="Secciones del Inventario">
      <button type="button" className={tab === 'summary' ? 'active' : ''} onClick={() => setTab('summary')}>Resumen</button>
      {inspectable && canReadDossier && <button type="button" className={tab === 'activity' ? 'active' : ''} onClick={() => setTab('activity')}>Actividad</button>}
      {technicalLevel && canReadFindingCatalog && <button type="button" className={tab === 'findings' ? 'active' : ''} onClick={() => setTab('findings')}>Hallazgos</button>}
      <button type="button" className={tab === 'location' ? 'active' : ''} onClick={() => setTab('location')}>Ubicación</button>
      {canReadMedia && <button type="button" className={tab === 'photos' ? 'active' : ''} onClick={() => setTab('photos')}>Fotos</button>}
      {canReadHistory && <button type="button" className={tab === 'history' ? 'active' : ''} onClick={() => setTab('history')}>Cambios</button>}
    </nav>

    {error && <Alert>{error}</Alert>}
    {success && <Alert type="success">{success}</Alert>}

    {tab === 'summary' && <div className="simple-inventory-stack">
      <article className="panel simple-inventory-card">
        <div className="simple-inventory-card-heading"><div><span className="eyebrow">DATOS PRINCIPALES</span><h2>Identificación</h2></div></div>
        {editing ? <form className="simple-inventory-form" onSubmit={save}>
          <div className="form-grid two">
            <label className="field"><span>Nombre <em>obligatorio</em></span><input value={name} onChange={(event) => setName(event.target.value)} required maxLength={200} /></label>
            <label className="field"><span>Nombre habitual <em>opcional</em></span><input value={commonName} onChange={(event) => setCommonName(event.target.value)} maxLength={200} /></label>
          </div>
          <details className="simple-inventory-details">
            <summary>Más datos</summary>
            <label className="field"><span>Descripción <em>opcional</em></span><textarea rows={3} value={description} onChange={(event) => setDescription(event.target.value)} maxLength={4000} /></label>
          </details>
          {(canChangeStatus || canChangeOperationalStatus) && <details className="simple-inventory-details">
            <summary>Estado y opciones</summary>
            <div className="form-grid two">
              {canChangeStatus && <label className="field"><span>Estado del dato</span><select value={status} onChange={(event) => setStatus(event.target.value as AssetInformationStatus)}>{ASSET_STATUSES.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}</select></label>}
              {canChangeOperationalStatus && <label className="field"><span>Estado operativo</span><select value={operationalStatus} onChange={(event) => setOperationalStatus(event.target.value as AssetOperationalStatus)}>{ASSET_OPERATIONAL_STATUSES.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}</select></label>}
            </div>
          </details>}
          <div className="form-actions"><button type="button" className="button secondary" onClick={cancelEdit}>Cancelar</button><button className="button primary" disabled={saving}><Icon name="check" />{saving ? 'Guardando…' : 'Guardar cambios'}</button></div>
        </form> : <div className="simple-inventory-data-grid">
          <div><small>Nombre</small><strong>{asset.name}</strong></div>
          <div><small>Código DH</small><strong>{asset.code}</strong></div>
          {asset.commonName && <div><small>Nombre habitual</small><strong>{asset.commonName}</strong></div>}
          <div><small>Estado operativo</small><strong>{assetOperationalStatusLabel(asset.operationalStatus)}</strong></div>
        </div>}
      </article>

      <article className="panel simple-inventory-card">
        <div className="simple-inventory-card-heading"><div><span className="eyebrow">UBICACIÓN ACTUAL</span><h2>Dentro del Inventario</h2></div></div>
        <div className="simple-inventory-context-grid">
          {parentLabel && <div className="simple-inventory-context-card"><small>{parentLabel}</small>{asset.parent ? <Link to={`/inventarios/${asset.parent.id}`}><strong>{asset.parent.name}</strong><span>{asset.parent.code}</span></Link> : <strong>Sin asignar</strong>}</div>}
          {kind === 'YACIMIENTO' && <div className="simple-inventory-context-card"><small>Empresa operadora</small>{asset.operatorCompany ? <Link to={`/inventarios/${asset.operatorCompany.id}`}><strong>{asset.operatorCompany.name}</strong><span>{asset.operatorCompany.code}</span></Link> : <strong>Sin asignar</strong>}</div>}
          {(kind === 'INSTALACION' || kind === 'SUBINSTALACION') && <div className="simple-inventory-context-card"><small>Empresa del Yacimiento</small>{asset.operatorCompany ? <Link to={`/inventarios/${asset.operatorCompany.id}`}><strong>{asset.operatorCompany.name}</strong><span>{asset.operatorCompany.code}</span></Link> : <strong>Sin asignar</strong>}</div>}
          {technicalLevel && <div className="simple-inventory-context-card"><small>Tipo técnico</small><strong>{technical?.family.name ?? 'Sin clasificación técnica'}</strong>{technical?.family.code && <span>{technical.family.code}</span>}</div>}
        </div>
      </article>

      {hasChildren && <article className="panel simple-inventory-card">
        <div className="simple-inventory-card-heading"><div><span className="eyebrow">CONTENIDO</span><h2>{childLabel ? `${childLabel}s dentro de ${asset.name}` : `Contenido de ${asset.name}`}</h2></div><span className="count-pill">{children.length}{childrenHasMore ? '+' : ''}</span></div>
        {loadingRelated ? <LoadingBlock label="Cargando contenido…" /> : children.length === 0 ? <div className="inline-empty">Todavía no hay registros dentro de {asset.name}.</div> : <div className="simple-inventory-child-list">{children.map((child) => <Link key={child.id} to={`/inventarios/${child.id}`} className="simple-inventory-child-row"><span className="asset-symbol"><Icon name="layers" /></span><span><strong>{child.name}</strong><small>{child.type.name} · {child.code}</small></span><span className={`status-badge ${assetStatusClass(child.informationStatus)}`}>{assetStatusLabel(child.informationStatus)}</span><Icon name="chevron" size={16} /></Link>)}</div>}
      </article>}

      {technicalLevel && <details className="panel simple-inventory-card simple-inventory-technical-details">
        <summary><span><small>DATOS TÉCNICOS</small><strong>{technical?.family.name ?? 'Información técnica'}</strong></span><span>Ver / editar</span></summary>
        <AssetTechnicalDataPanel assetId={asset.id} canEdit={canEdit} />
      </details>}

      {!editing && asset.description && <details className="panel simple-inventory-card simple-inventory-extra-details">
        <summary>Más datos</summary>
        <p>{asset.description}</p>
      </details>}

      {!editing && <details className="panel simple-inventory-card simple-inventory-extra-details">
        <summary>Estado y opciones</summary>
        <div className="simple-inventory-data-grid">
          <div><small>Estado del dato</small><strong>{assetStatusLabel(asset.informationStatus)}</strong></div>
          <div><small>Estado operativo</small><strong>{assetOperationalStatusLabel(asset.operationalStatus)}</strong></div>
        </div>
        {canAdvanced && <div className="simple-inventory-advanced"><span>Las herramientas históricas y administrativas quedan separadas de esta ficha.</span><Link to={`/inventarios/${asset.id}?advanced=1`}>Administración avanzada</Link></div>}
      </details>}
    </div>}

    {tab === 'activity' && inspectable && canReadDossier && <AssetDossierPanel assetId={asset.id} />}
    {tab === 'findings' && technicalLevel && canReadFindingCatalog && <AssetFindingCatalogPanel assetId={asset.id} canManage={canManageFindingCatalog} />}
    {tab === 'location' && <Suspense fallback={<LoadingBlock label="Cargando mapa…" />}><AssetGeometryEditor assetId={asset.id} assetName={asset.name} canEdit={canEditGeometry} onChanged={() => setHistoryRefreshKey((current) => current + 1)} /></Suspense>}
    {tab === 'photos' && canReadMedia && <AssetMediaPanel assetId={asset.id} assetName={asset.name} canManage={canManageMedia} onChanged={() => setHistoryRefreshKey((current) => current + 1)} />}
    {tab === 'history' && canReadHistory && <AssetHistoryPanel assetId={asset.id} refreshKey={historyRefreshKey} />}
  </section>;
}