import { useEffect, useMemo, useState } from 'react';
import { Link } from 'react-router';
import { Alert, LoadingBlock, errorMessage } from '../components/Feedback';
import { Icon } from '../components/Icon';
import { getFindingCatalogAdmin, listAssetTypes } from '../lib/api';
import type { AssetType, FindingAdminCatalog } from '../lib/api';
import { listInventoryFamiliesAdmin } from '../lib/inventoryStructureApi';
import type { InventoryFamily } from '../lib/inventoryStructureApi';

type CanonicalKind = 'EMPRESA' | 'DEPARTAMENTO' | 'AREA' | 'YACIMIENTO' | 'INSTALACION' | 'SUBINSTALACION';

type StructuralField = {
  label: string;
  detail: string;
  required?: boolean;
  relation?: boolean;
};

const LEVELS: Array<{ kind: CanonicalKind; label: string; description: string; fields: StructuralField[] }> = [
  {
    kind: 'EMPRESA',
    label: 'Empresa',
    description: 'Maestro independiente. La Empresa se relaciona directamente con uno o más Yacimientos.',
    fields: [{ label: 'Nombre', detail: 'Nombre de la Empresa / Operadora.', required: true }],
  },
  {
    kind: 'DEPARTAMENTO',
    label: 'Departamento',
    description: 'Raíz territorial. No depende de ningún otro nivel.',
    fields: [{ label: 'Nombre', detail: 'Nombre del Departamento.', required: true }],
  },
  {
    kind: 'AREA',
    label: 'Área',
    description: 'El Área sólo tiene Nombre y pertenece obligatoriamente a un Departamento.',
    fields: [
      { label: 'Departamento', detail: 'Relación obligatoria Departamento → Área.', required: true, relation: true },
      { label: 'Nombre', detail: 'Nombre del Área.', required: true },
    ],
  },
  {
    kind: 'YACIMIENTO',
    label: 'Yacimiento',
    description: 'El Yacimiento concentra el contexto operativo: Área, Tipo de concesión y Empresa relacionada.',
    fields: [
      { label: 'Área', detail: 'Relación obligatoria Área → Yacimiento.', required: true, relation: true },
      { label: 'Tipo de concesión', detail: 'Explotación o Exploración, según la fuente.', required: true, relation: true },
      { label: 'Empresa relacionada', detail: 'Empresa / Operadora asociada directamente al Yacimiento.', required: true, relation: true },
      { label: 'Nombre', detail: 'Nombre del Yacimiento. Puede repetirse en otra Área.', required: true },
    ],
  },
  {
    kind: 'INSTALACION',
    label: 'Instalación',
    description: 'Cada Instalación pertenece a un Yacimiento y posee una clasificación técnica.',
    fields: [
      { label: 'Yacimiento', detail: 'Relación obligatoria Yacimiento → Instalación.', required: true, relation: true },
      { label: 'Tipo de instalación', detail: 'Clasificación técnica tomada del modelo de Instalaciones.', required: true, relation: true },
    ],
  },
  {
    kind: 'SUBINSTALACION',
    label: 'Subinstalación',
    description: 'Cada Subinstalación pertenece a una Instalación y usa una clasificación compatible con ella.',
    fields: [
      { label: 'Instalación', detail: 'Relación obligatoria Instalación → Subinstalación.', required: true, relation: true },
      { label: 'Tipo de subinstalación', detail: 'Clasificación técnica compatible con el Tipo de instalación padre.', required: true, relation: true },
    ],
  },
];

const EMPTY_CATALOG: FindingAdminCatalog = { categories: [], items: [] };

function canonicalType(types: AssetType[], kind: CanonicalKind): AssetType | null {
  if (kind === 'EMPRESA') return types.find((type) => type.operationalRole === 'COMPANY' && type.isActive) ?? null;
  if (kind === 'AREA') return types.find((type) => type.operationalRole === 'AREA' && type.isActive) ?? null;
  return types.find((type) => type.code.toLowerCase() === kind.toLowerCase() && type.isActive) ?? null;
}

export function AuthoritativeInventoryConfigPage() {
  const [types, setTypes] = useState<AssetType[]>([]);
  const [families, setFamilies] = useState<InventoryFamily[]>([]);
  const [catalog, setCatalog] = useState<FindingAdminCatalog>(EMPTY_CATALOG);
  const [selectedKind, setSelectedKind] = useState<CanonicalKind>('AREA');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    Promise.all([listAssetTypes(), listInventoryFamiliesAdmin(), getFindingCatalogAdmin()])
      .then(([loadedTypes, loadedFamilies, loadedCatalog]) => {
        setTypes(loadedTypes);
        setFamilies(loadedFamilies);
        setCatalog(loadedCatalog);
      })
      .catch((requestError) => setError(errorMessage(requestError)))
      .finally(() => setLoading(false));
  }, []);

  const level = LEVELS.find((item) => item.kind === selectedKind) ?? LEVELS[0]!;
  const selectedType = canonicalType(types, selectedKind);
  const commonAttributes = useMemo(() => {
    const attributes = selectedType?.attributes.filter((attribute) => attribute.isActive) ?? [];
    return selectedKind === 'INSTALACION'
      ? attributes.filter((attribute) => attribute.code !== 'tipo_instalacion')
      : attributes;
  }, [selectedKind, selectedType]);
  const installationFamilies = families.filter((family) => family.level === 'INSTALLATION' && family.isActive !== false);
  const subinstallationFamilies = families.filter((family) => family.level === 'SUBINSTALLATION' && family.isActive !== false);
  const activeFindings = catalog.items.filter((item) => item.isActive).length;

  if (loading) return <LoadingBlock label="Cargando configuración de Inventarios…" />;

  return <section className="inventory-config-page">
    <div className="page-heading">
      <div>
        <span className="eyebrow">ADMINISTRACIÓN · MODELO AUTORITATIVO</span>
        <h1>Configuración de Inventarios</h1>
        <p>Relaciones fijas cargadas desde los SQL definitivos. Los vínculos estructurales no son campos de texto editables.</p>
      </div>
      <Link className="button primary" to="/inventarios/nuevo"><Icon name="plus" />Agregar registro</Link>
    </div>
    {error && <Alert>{error}</Alert>}

    <article className="panel" style={{ marginBottom: 18 }}>
      <div className="panel-heading">
        <div>
          <span className="eyebrow">ESTRUCTURA FÍSICA</span>
          <h2>Jerarquía obligatoria</h2>
          <p className="section-copy">Empresa es un maestro independiente y se asocia al Yacimiento. El árbol físico queda separado y sin ambigüedades.</p>
        </div>
      </div>
      <div className="asset-browser-levels" aria-label="Jerarquía de Inventarios">
        <div><span>1</span><strong>Departamento</strong><small>raíz</small></div><i>›</i>
        <div><span>2</span><strong>Área</strong><small>Departamento</small></div><i>›</i>
        <div><span>3</span><strong>Yacimiento</strong><small>Área + Empresa + concesión</small></div><i>›</i>
        <div><span>4</span><strong>Instalación</strong><small>Yacimiento</small></div><i>›</i>
        <div><span>5</span><strong>Subinstalación</strong><small>Instalación</small></div>
      </div>
      <div className="temporal-notice" style={{ marginTop: 14 }}>
        <Icon name="users" />
        <p><strong>Empresa:</strong> ya no pertenece al Área. La relación canónica es <strong>Yacimiento → Empresa relacionada</strong>.</p>
      </div>
    </article>

    <article className="panel" style={{ marginBottom: 18 }}>
      <div className="panel-heading">
        <div>
          <span className="eyebrow">INFORMACIÓN ESTRUCTURAL</span>
          <h2>{level.label}</h2>
          <p className="section-copy">{level.description}</p>
        </div>
        <span className="tag">Modelo SQL</span>
      </div>
      <div className="quick-view-row" style={{ marginBottom: 18 }}>
        {LEVELS.map((item) => <button type="button" key={item.kind} className={selectedKind === item.kind ? 'active' : ''} onClick={() => setSelectedKind(item.kind)}>{item.label}</button>)}
      </div>

      <div className="attribute-list">
        {level.fields.map((field, index) => <div className="attribute-card" key={field.label}>
          <span className="attribute-order">{index + 1}</span>
          <span>
            <strong>{field.label}</strong>
            <small>{field.detail}</small>
          </span>
          <span className="attribute-flags">
            {field.relation && <span className="tag">Relación</span>}
            {field.required && <span className="tag">Obligatorio</span>}
          </span>
        </div>)}
        {commonAttributes.map((attribute, index) => <div className="attribute-card" key={attribute.id}>
          <span className="attribute-order">{level.fields.length + index + 1}</span>
          <span>
            <strong>{attribute.name}</strong>
            <small>{attribute.code} · Campo común del nivel</small>
          </span>
          <span className="attribute-flags">{attribute.isRequired && <span className="tag">Obligatorio</span>}</span>
        </div>)}
      </div>
    </article>

    <div className="dashboard-grid" style={{ alignItems: 'start' }}>
      <article className="panel">
        <div className="panel-heading"><div><span className="eyebrow">MODELO TÉCNICO</span><h2>Tipos de Instalación</h2><p className="section-copy">{installationFamilies.length} clasificaciones exactas del SQL.</p></div></div>
        <div className="attribute-list" style={{ maxHeight: 520, overflow: 'auto' }}>
          {installationFamilies.map((family) => <div className="attribute-card" key={family.id}><span className="asset-symbol"><Icon name="layers" size={16} /></span><span><strong>{family.name}</strong><small>{family.findingCount ?? 0} Hallazgos asociados</small></span><span className="tag">{family.code}</span></div>)}
        </div>
      </article>
      <article className="panel">
        <div className="panel-heading"><div><span className="eyebrow">MODELO TÉCNICO</span><h2>Tipos de Subinstalación</h2><p className="section-copy">{subinstallationFamilies.length} clasificaciones, cada una vinculada a su Tipo de instalación.</p></div></div>
        <div className="attribute-list" style={{ maxHeight: 520, overflow: 'auto' }}>
          {subinstallationFamilies.map((family) => <div className="attribute-card" key={family.id}><span className="asset-symbol"><Icon name="layers" size={16} /></span><span><strong>{family.name}</strong><small>{family.parentFamilies.map((parent) => parent.name).join(' · ') || 'Sin padre'} · {family.findingCount ?? 0} Hallazgos</small></span></div>)}
        </div>
      </article>
    </div>

    <article className="panel" style={{ marginTop: 18 }}>
      <div className="panel-heading">
        <div><span className="eyebrow">HALLAZGOS</span><h2>Catálogo contextual</h2><p className="section-copy">{activeFindings} Hallazgos cargados con sus relaciones exactas a Instalaciones y Subinstalaciones.</p></div>
        <Link className="button secondary" to="/admin/finding-catalog">Abrir catálogo <Icon name="chevron" /></Link>
      </div>
    </article>
  </section>;
}