"use client";

import { FormEvent, useMemo, useState } from "react";

const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL || "/api/v1";
type LocationRow={id:number;uuid:string;nombre_fantasia:string;direccion:string;comuna:string;region:string;latitud?:number|null;longitud?:number|null;precision_codigo:string;fuente:string;verificado:boolean;direccion_normalizada?:string|null;actualizado_en?:string|null};

export default function TerritoryManagement({data,csrf,notify}:{data:Record<string,unknown>|null;csrf:()=>Promise<string>;notify:(message:string)=>void}){
  const [rows,setRows]=useState<LocationRow[]>((data?.items||[]) as LocationRow[]);
  const [editing,setEditing]=useState<LocationRow|null>(null);
  // Al guardar coordenadas la entidad no desaparece del listado por defecto.
  const [onlyMissing,setOnlyMissing]=useState(false);
  const [search,setSearch]=useState("");
  const [busy,setBusy]=useState(false);
  const metrics=(data?.metrics||{}) as Record<string,number>;
  const visible=useMemo(()=>rows.filter((row)=>(!onlyMissing||row.latitud==null||row.longitud==null)&&(!search||`${row.nombre_fantasia} ${row.comuna} ${row.region}`.toLowerCase().includes(search.toLowerCase()))),[rows,onlyMissing,search]);
  async function save(event:FormEvent<HTMLFormElement>){event.preventDefault();if(!editing)return;setBusy(true);try{const form=new FormData(event.currentTarget);const precision=String(form.get("precision_codigo"));const body={latitud:form.get("latitud")?Number(form.get("latitud")):null,longitud:form.get("longitud")?Number(form.get("longitud")):null,precision_codigo:precision,fuente:form.get("fuente"),direccion_normalizada:form.get("direccion_normalizada")||null,verificado:form.get("verificado")==="on"};const token=await csrf();const response=await fetch(`${apiBase}/panel/admin/territory/entities/${editing.id}/location`,{method:"PUT",credentials:"include",headers:{"Content-Type":"application/json","X-CSRF-Token":token},body:JSON.stringify(body)});const result=await response.json();if(!response.ok)throw new Error(Array.isArray(result.detail)?result.detail.map((item:{msg:string})=>item.msg).join(" · "):result.detail||"No fue posible guardar la ubicación.");setRows((current)=>current.map((row)=>row.id===editing.id?{...row,...result}:row));setEditing(null);notify("Ubicación de la entidad actualizada correctamente.");}catch(reason){notify(reason instanceof Error?reason.message:"No fue posible guardar la ubicación.");}finally{setBusy(false)}}
  async function rebuild(){setBusy(true);try{const token=await csrf();const response=await fetch(`${apiBase}/panel/admin/territory/rebuild-index`,{method:"POST",credentials:"include",headers:{"X-CSRF-Token":token}});const result=await response.json();if(!response.ok)throw new Error(result.detail||"No fue posible reconstruir el índice.");notify(`Índice reconstruido correctamente: ${result.registros} combinaciones activas.`);}catch(reason){notify(reason instanceof Error?reason.message:"No fue posible reconstruir el índice.");}finally{setBusy(false)}}
  return <div className="territory-admin"><section className="panel-card territory-admin-heading"><div><span className="section-kicker">H6 · TERRITORIO</span><h2>Ubicación e índice público</h2><p>Completa coordenadas verificables. La cobertura de cada servicio se mantiene en Oferta de servicios.</p></div><button className="button button-secondary" onClick={()=>void rebuild()} disabled={busy}>Reconstruir índice</button></section>
    <div className="metrics-grid">{Object.entries(metrics).map(([key,value])=><article className="metric-card" key={key}><small>{key.replaceAll("_"," ")}</small><strong>{Number(value||0).toLocaleString("es-CL")}</strong></article>)}</div>
    <section className="panel-card territory-list"><header><div><h2>Entidades activas</h2><p>{visible.length} registros visibles</p></div><div><input placeholder="Buscar entidad o comuna" value={search} onChange={(event)=>setSearch(event.target.value)}/><label><input type="checkbox" checked={onlyMissing} onChange={(event)=>setOnlyMissing(event.target.checked)}/> Sólo sin coordenadas</label></div></header><div className="panel-table-wrap"><table><thead><tr><th>Entidad</th><th>Territorio</th><th>Coordenadas</th><th>Precisión</th><th>Verificada</th><th></th></tr></thead><tbody>{visible.map((row)=><tr key={row.id}><td><strong>{row.nombre_fantasia}</strong><small>{row.direccion}</small></td><td>{row.comuna}<small>{row.region}</small></td><td>{row.latitud!=null&&row.longitud!=null?<><code>{row.latitud}</code><code>{row.longitud}</code></>:"Pendiente"}</td><td>{row.precision_codigo.replaceAll("_"," ").toLowerCase()}<small>{row.fuente}</small></td><td>{row.verificado?"Sí":"No"}</td><td><button className="button button-secondary button-small" onClick={()=>setEditing(row)}>Editar</button></td></tr>)}</tbody></table></div></section>
    {editing&&<div className="modal-backdrop" role="presentation"><form className="panel-card profile-form territory-modal" onSubmit={save}><header><div><span className="section-kicker">UBICACIÓN</span><h2>{editing.nombre_fantasia}</h2><p>{editing.direccion}, {editing.comuna}</p></div><button type="button" className="modal-close" onClick={()=>setEditing(null)} aria-label="Cerrar">×</button></header><div className="form-pair"><label>Latitud<input name="latitud" type="number" step="0.0000001" defaultValue={editing.latitud??""}/></label><label>Longitud<input name="longitud" type="number" step="0.0000001" defaultValue={editing.longitud??""}/></label></div><label>Precisión<select name="precision_codigo" defaultValue={editing.precision_codigo}><option value="SIN_COORDENADAS">Sin coordenadas</option><option value="APROXIMADA">Aproximada</option><option value="COMUNA">Centro de comuna</option><option value="DIRECCION">Dirección</option><option value="EXACTA">Exacta</option></select></label><label>Fuente<input name="fuente" defaultValue={editing.fuente||"ADMIN"} required/></label><label>Dirección normalizada<input name="direccion_normalizada" defaultValue={editing.direccion_normalizada||`${editing.direccion}, ${editing.comuna}, ${editing.region}`}/></label><label className="check-row"><input name="verificado" type="checkbox" defaultChecked={editing.verificado}/> Coordenadas revisadas por un administrador</label><div className="modal-actions"><button type="button" className="button button-secondary" onClick={()=>setEditing(null)}>Cancelar</button><button className="button button-primary" disabled={busy}>{busy?"Guardando…":"Guardar ubicación"}</button></div></form></div>}
  </div>;
}