import { useEffect, useState } from 'react';
import { SearchableSelect } from '../../components/SearchableSelect';
import { Alert, LoadingBlock, errorMessage } from '../../components/Feedback';
import { Icon } from '../../components/Icon';
import { getInventoryTechnicalValues, replaceInventoryTechnicalValues } from '../../lib/inventoryStructureApi';
import type { InventoryFamilyAttribute, InventoryTechnicalValues } from '../../lib/inventoryStructureApi';

function localDateTime(value:unknown){
  if(typeof value!=='string'||!value)return '';
  const date=new Date(value); if(Number.isNaN(date.getTime()))return value.slice(0,16);
  const local=new Date(date.getTime()-date.getTimezoneOffset()*60000); return local.toISOString().slice(0,16);
}
function displayValue(definition:InventoryFamilyAttribute,value:unknown){
  if(value===undefined||value===null||value==='')return 'Sin completar';
  if(definition.dataType==='BOOLEAN')return value?'Sí':'No';
  if(definition.dataType==='DATETIME'&&typeof value==='string')return new Date(value).toLocaleString('es-AR');
  return `${String(value)}${definition.unit?` ${definition.unit}`:''}`;
}

export function AssetTechnicalDataPanel({assetId,canEdit}:{assetId:string;canEdit:boolean}){
  const [data,setData]=useState<InventoryTechnicalValues|null>(null);
  const [values,setValues]=useState<Record<string,unknown>>({});
  const [loading,setLoading]=useState(true); const [saving,setSaving]=useState(false);
  const [unsupported,setUnsupported]=useState(false); const [error,setError]=useState(''); const [success,setSuccess]=useState('');
  useEffect(()=>{
    let active=true; setLoading(true); setUnsupported(false); setError('');
    getInventoryTechnicalValues(assetId).then((loaded)=>{if(!active)return;setData(loaded);setValues(Object.fromEntries(loaded.definitions.map((definition)=>{
      const raw=loaded.values[definition.id]; return [definition.id,definition.dataType==='DATETIME'?localDateTime(raw):raw??''];
    })))}).catch((requestError)=>{if(!active)return;const message=errorMessage(requestError);if(message.includes('no tiene clasificación técnica'))setUnsupported(true);else setError(message);}).finally(()=>active&&setLoading(false));
    return()=>{active=false};
  },[assetId]);
  if(loading)return <div className="form-section"><LoadingBlock label="Cargando datos técnicos…" /></div>;
  if(unsupported)return null;
  if(error&&!data)return <div className="form-section"><Alert>{error}</Alert></div>;
  if(!data)return null;
  const activeDefinitions=data.definitions.filter((item)=>item.isActive);
  const save=async()=>{
    setSaving(true);setError('');setSuccess('');
    try{
      const normalized:Record<string,unknown>={};
      for(const definition of activeDefinitions){const raw=values[definition.id];if(raw===''||raw===null||raw===undefined)continue;
        if(definition.dataType==='NUMBER')normalized[definition.id]=Number(raw);
        else if(definition.dataType==='BOOLEAN')normalized[definition.id]=Boolean(raw);
        else if(definition.dataType==='DATETIME')normalized[definition.id]=new Date(String(raw)).toISOString();
        else normalized[definition.id]=raw;
      }
      const saved=await replaceInventoryTechnicalValues(assetId,normalized);setData(saved);setSuccess('Datos técnicos guardados.');
    }catch(requestError){setError(errorMessage(requestError));}finally{setSaving(false)}
  };
  return <div className="form-section">
    <div><h2>Información técnica · {data.family.name}</h2><p className="section-copy">Estos campos pertenecen a la clasificación concreta del elemento, no al nivel genérico.</p></div>
    {error&&<Alert>{error}</Alert>}{success&&<Alert type="success">{success}</Alert>}
    {activeDefinitions.length===0?<div className="inline-empty">Esta clasificación todavía no tiene campos técnicos configurados.</div>:canEdit?<div className="dynamic-attributes">{activeDefinitions.map((definition)=>{
      const value=values[definition.id];const label=<span>{definition.name}{definition.unit?` (${definition.unit})`:''}{definition.isRequired?<em>obligatorio</em>:<em>opcional</em>}</span>;
      if(definition.dataType==='BOOLEAN')return <label className="check-row attribute-check" key={definition.id}><input type="checkbox" checked={Boolean(value)} onChange={(event)=>setValues((current)=>({...current,[definition.id]:event.target.checked}))}/><span><strong>{definition.name}</strong><small>{definition.code}</small></span></label>;
      if(definition.dataType==='SELECT')return <label className="field" key={definition.id}>{label}<SearchableSelect value={String(value??'')} onChange={(event)=>setValues((current)=>({...current,[definition.id]:event.target.value}))} required={definition.isRequired}><option value="">Seleccionar…</option>{definition.options?.map((option)=><option key={option} value={option}>{option}</option>)}</SearchableSelect></label>;
      const inputType=definition.dataType==='NUMBER'?'number':definition.dataType==='DATE'?'date':definition.dataType==='DATETIME'?'datetime-local':'text';
      return <label className="field" key={definition.id}>{label}<input type={inputType} value={String(value??'')} step={definition.dataType==='NUMBER'?'any':undefined} required={definition.isRequired} onChange={(event)=>setValues((current)=>({...current,[definition.id]:event.target.value}))}/></label>;
    })}</div>:<div className="attribute-list">{activeDefinitions.map((definition)=><div className="attribute-card" key={definition.id}><span className="asset-symbol"><Icon name="layers" size={15}/></span><span><strong>{definition.name}</strong><small>{definition.code}</small></span><span>{displayValue(definition,data.values[definition.id])}</span></div>)}</div>}
    {canEdit&&activeDefinitions.length>0&&<div className="form-actions"><button type="button" className="button primary" disabled={saving} onClick={()=>void save()}><Icon name="check" />{saving?'Guardando…':'Guardar datos técnicos'}</button></div>}
  </div>;
}