"use client";

import Link from "next/link";
import { FormEvent, useCallback, useEffect, useRef, useState } from "react";
import { useSearchParams } from "next/navigation";
import { userMessage } from "../../lib/messages";

const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL || "/api/v1";
type Service = { slug:string; nombre:string; categoria:string; descripcion_corta?:string };
type Capability = { codigo:string; nombre:string };
type Commune = { id:number; nombre:string; region:string };
type Jurisdiction = { id:number; nombre:string; corte:string; comunas?:string };
type Options = { servicios:Service[]; capacidades:Capability[]; comunas:Commune[]; jurisdicciones:Jurisdiction[]; ranking_version:string };
type Result = {
  entidad_uuid?:string; directorio_id?:number; catalogo_id?:number; nombre_fantasia:string; nombre_notario?:string;
  direccion:string; comuna:string; region:string; comuna_id?:number; capacidades:string[];
  precio?:number; moneda?:string; plazo_estimado_horas?:number; distancia_km?:number;
  latitud?:number; longitud?:number; tipo_cobertura?:string; ranking_puntaje:number;
  documenta_habilitada?:boolean; servicios_disponibles?:number;
  ranking_posicion:number; ranking_motivos:string[];
};
type SearchResponse = { servicio:{id:number;nombre:string}|null;items:Result[];total:number;page:number;pages:number;limit:number;offset:number;ranking_version:string;message?:string };

function money(value:number) { return new Intl.NumberFormat("es-CL",{style:"currency",currency:"CLP",maximumFractionDigits:0}).format(value); }
function capabilityLabel(value:string) { return ({NOTARIA:"Notaría",CONSERVADOR:"Conservador",ARCHIVERO:"Archivero judicial"} as Record<string,string>)[value] || value; }

function ResultMap({ items, location }: { items:Result[]; location:{lat:number;lng:number}|null }) {
  const points = items.filter((item) => Number.isFinite(Number(item.latitud)) && Number.isFinite(Number(item.longitud)));
  const coordinates = [...points.map((item) => ({lat:Number(item.latitud),lng:Number(item.longitud)})), ...(location ? [location] : [])];
  const bounds = (() => {
    if (!coordinates.length) return null;
    const lats=coordinates.map((item)=>item.lat),lngs=coordinates.map((item)=>item.lng);
    let minLat=Math.min(...lats),maxLat=Math.max(...lats),minLng=Math.min(...lngs),maxLng=Math.max(...lngs);
    if(maxLat-minLat<.18){minLat-=.09;maxLat+=.09} if(maxLng-minLng<.18){minLng-=.09;maxLng+=.09}
    return {minLat,maxLat,minLng,maxLng};
  })();
  if (!bounds) return <div className="finder-map finder-map-empty"><strong>Mapa no disponible</strong><p>Las entidades encontradas todavía no tienen coordenadas verificables.</p></div>;
  const position=(lat:number,lng:number)=>({left:`${8+84*(lng-bounds.minLng)/(bounds.maxLng-bounds.minLng)}%`,top:`${8+84*(bounds.maxLat-lat)/(bounds.maxLat-bounds.minLat)}%`});
  return <div className="finder-map" aria-label="Mapa esquemático de resultados"><div className="finder-map-grid" />
    <span className="finder-map-north">N</span>
    {points.map((item)=>item.entidad_uuid?<Link href={`/entidades/${item.entidad_uuid}`} className="finder-map-pin" style={position(Number(item.latitud),Number(item.longitud))} key={item.directorio_id||item.entidad_uuid} aria-label={`${item.ranking_posicion}. ${item.nombre_fantasia}`}><b>{item.ranking_posicion}</b><span>{item.nombre_fantasia}</span></Link>:null)}
    {location&&<span className="finder-user-pin" style={position(location.lat,location.lng)} title="Tu ubicación"><i /></span>}
    <small className="finder-map-note">Representación territorial basada en coordenadas registradas</small>
  </div>;
}

export default function FinderClient() {
  const params = useSearchParams();
  const [options,setOptions]=useState<Options|null>(null);
  const [service,setService]=useState(params.get("servicio")||"");
  const [capability,setCapability]=useState(params.get("capacidad")||"");
  const [communeText,setCommuneText]=useState("");
  const [communeId,setCommuneId]=useState<number|null>(null);
  const [jurisdictionText,setJurisdictionText]=useState("");
  const [jurisdictionId,setJurisdictionId]=useState<number|null>(null);
  const [location,setLocation]=useState<{lat:number;lng:number}|null>(null);
  const [radius,setRadius]=useState(100);
  const [order,setOrder]=useState(params.get("servicio")?"RELEVANCIA":"NOMBRE");
  const [results,setResults]=useState<SearchResponse|null>(null);
  const [loading,setLoading]=useState(false);
  const [error,setError]=useState("");
  const [page,setPage]=useState(1);
  const [view,setView]=useState<"LIST"|"MAP">("LIST");
  const initialFilters = useRef(Boolean(params.get("servicio") || params.get("capacidad")));
  const initialSearchStarted = useRef(false);

  useEffect(()=>{fetch(`${apiBase}/portal/finder/options`,{cache:"no-store"}).then(async response=>{const body=await response.json();if(!response.ok)throw new Error(body.detail);return body}).then(setOptions).catch(()=>setError("No fue posible cargar el buscador."));},[]);

  const execute = useCallback(async (targetPage=1,targetOrder=order) => {
    setLoading(true);setError("");
    const query=new URLSearchParams({orden:targetOrder,page:String(targetPage),limit:"12"});
    if(service)query.set("servicio",service);
    if(capability)query.set("capacidad",capability);
    if(communeId)query.set("comuna_id",String(communeId));
    if(jurisdictionId)query.set("jurisdiccion_id",String(jurisdictionId));
    if(location){query.set("lat",String(location.lat));query.set("lng",String(location.lng));query.set("radio_km",String(radius));}
    try{const response=await fetch(`${apiBase}/portal/finder/search?${query}`,{cache:"no-store"});const body=await response.json();if(!response.ok)throw new Error(body.detail||"No fue posible buscar entidades.");setResults(body);setPage(targetPage);const publicQuery=new URLSearchParams(query);publicQuery.delete("lat");publicQuery.delete("lng");publicQuery.delete("radio_km");window.history.replaceState(null,"",`/buscar?${publicQuery}`);}catch(reason){setError(userMessage(reason,"No fue posible buscar entidades."));}finally{setLoading(false)}
  }, [order, service, capability, communeId, jurisdictionId, location, radius]);

  useEffect(() => {
    if (!options || !initialFilters.current || initialSearchStarted.current) return;
    initialSearchStarted.current = true;
    void execute(1);
  }, [options, execute]);
  function submit(event:FormEvent){event.preventDefault();void execute(1)}
  function useLocation(){if(!navigator.geolocation){setError("Tu navegador no permite obtener ubicación.");return}navigator.geolocation.getCurrentPosition((position)=>{setLocation({lat:position.coords.latitude,lng:position.coords.longitude});setError("");},()=>setError("No fue posible obtener tu ubicación. Puedes buscar por comuna o jurisdicción."),{enableHighAccuracy:false,timeout:8000,maximumAge:300000});}
  function communeChange(value:string){setCommuneText(value);const found=options?.comunas.find((item)=>`${item.nombre} — ${item.region}`===value);setCommuneId(found?.id||null)}
  function jurisdictionChange(value:string){setJurisdictionText(value);const found=options?.jurisdicciones.find((item)=>`${item.nombre} — ${item.corte}`===value);setJurisdictionId(found?.id||null)}
  return <div className="finder-layout">
    <form className="finder-filters" onSubmit={submit}>
      <div className="finder-filter-heading"><span>FILTROS</span><h2>Define tu búsqueda</h2><p>El tipo de trámite es opcional. También puedes explorar por entidad o comuna.</p></div>
      <label>Tipo de trámite <small>(opcional)</small><select value={service} onChange={(event)=>{const next=event.target.value;setService(next);if(!next){setView("LIST");setLocation(null);setJurisdictionId(null);setJurisdictionText("");setOrder("NOMBRE")}}}><option value="">Todos los trámites</option>{options?.servicios.map((item)=><option value={item.slug} key={item.slug}>{item.nombre}</option>)}</select></label>
      <label>Tipo de entidad<select value={capability} onChange={(event)=>setCapability(event.target.value)}><option value="">Cualquiera compatible</option>{options?.capacidades.map((item)=><option value={item.codigo} key={item.codigo}>{item.nombre}</option>)}</select></label>
      <label>Comuna<input list="finder-communes" value={communeText} onChange={(event)=>communeChange(event.target.value)} placeholder="Escribe una comuna"/><datalist id="finder-communes">{options?.comunas.map((item)=><option value={`${item.nombre} — ${item.region}`} key={item.id}/>)}</datalist></label>
      {service&&<label>Jurisdicción<input list="finder-jurisdictions" value={jurisdictionText} onChange={(event)=>jurisdictionChange(event.target.value)} placeholder="Escribe una jurisdicción"/><datalist id="finder-jurisdictions">{options?.jurisdicciones.map((item)=><option value={`${item.nombre} — ${item.corte}`} key={item.id}/>)}</datalist></label>}
      {service&&<div className="finder-location-control"><div><strong>Proximidad</strong><small>{location?"Ubicación incorporada":"Opcional"}</small></div><button type="button" onClick={useLocation}>{location?"Actualizar ubicación":"Usar mi ubicación"}</button>{location&&<><label>Radio máximo<select value={radius} onChange={(event)=>setRadius(Number(event.target.value))}><option value="20">20 km</option><option value="50">50 km</option><option value="100">100 km</option><option value="250">250 km</option><option value="1000">Todo Chile</option></select></label><button className="finder-clear-location" type="button" onClick={()=>setLocation(null)}>Quitar ubicación</button></>}</div>}
      <button className="portal-button portal-button-primary" disabled={loading}>{loading?"Buscando…":"Buscar entidades"}</button>
      <small className="finder-privacy">Tu ubicación se usa para calcular distancia. La auditoría registra sólo que utilizaste proximidad, no tus coordenadas.</small>
    </form>
    <section className="finder-results" aria-live="polite">
      <header className="finder-results-header"><div><span>RESULTADOS</span><h2>{results?`${results.total} ${results.total===1?"entidad":"entidades"}`:"Explora el directorio"}</h2>{results&&<p>{service?`Coincidencias para el trámite seleccionado · ${results.ranking_version}.`:"Catastro nacional. Las acciones digitales aparecen sólo en entidades habilitadas."}</p>}</div><div className="finder-result-tools"><select aria-label="Ordenar resultados" value={order} onChange={(event)=>{const nextOrder=event.target.value;setOrder(nextOrder);if(results)void execute(1,nextOrder)}}>{service&&<><option value="RELEVANCIA">Mayor coincidencia</option><option value="DISTANCIA">Menor distancia</option><option value="PRECIO">Menor precio</option></>}<option value="NOMBRE">Nombre</option></select><div><button className={view==="LIST"?"is-active":""} onClick={()=>setView("LIST")} type="button">Lista</button>{service&&<button className={view==="MAP"?"is-active":""} onClick={()=>setView("MAP")} type="button">Mapa</button>}</div></div></header>
      {error&&<div className="finder-message is-error">{error}</div>}
      {!results&&!error&&<div className="finder-empty"><strong>Busca sin completar todos los filtros.</strong><p>Puedes ver el directorio completo o acotarlo por tipo, comuna y trámite.</p></div>}
      {results&&results.total===0&&<div className="finder-empty"><strong>No encontramos una oferta con esos filtros.</strong><p>{results.message||"Prueba ampliando el radio o quitando un filtro territorial."}</p></div>}
      {results&&view==="MAP"&&<ResultMap items={results.items} location={location}/>} 
      {results&&view==="LIST"&&<div className="finder-result-list">{results.items.map((item)=><article className="finder-result-card" key={item.directorio_id||item.entidad_uuid||`catalogo-${item.catalogo_id}`}><div className="finder-result-rank"><span>#{item.ranking_posicion}</span><small>{item.documenta_habilitada||service?"Documenta":"Catastro"}</small></div><div className="finder-result-main"><div className="finder-result-tags">{item.capacidades.map((value)=><span key={value}>{capabilityLabel(value)}</span>)}{item.tipo_cobertura&&<span>{item.tipo_cobertura.toLowerCase()}</span>}<span>{item.documenta_habilitada||service?"Habilitada":"No enrolada"}</span></div><h3>{item.nombre_fantasia}</h3>{item.nombre_notario&&<p className="finder-officer">{item.nombre_notario}</p>}<address>{item.direccion}<br/>{item.comuna}, {item.region}</address><details><summary>Información del resultado</summary><ul>{item.ranking_motivos.map((reason)=><li key={reason}>{reason}</li>)}</ul></details></div><div className="finder-result-commercial">{service&&item.precio!=null?<><span>Valor del servicio</span><strong>{money(item.precio)}</strong>{item.plazo_estimado_horas&&<small>Plazo estimado: {item.plazo_estimado_horas} h</small>}</>:<><span>Disponibilidad digital</span><strong>{item.documenta_habilitada?`${item.servicios_disponibles||0} trámites`:`Sólo directorio`}</strong></>}{item.distancia_km!=null&&<small>A {Number(item.distancia_km).toLocaleString("es-CL")} km</small>}{item.entidad_uuid&&<Link className="portal-button portal-button-secondary" href={`/entidades/${item.entidad_uuid}`}>Ver ficha</Link>}{item.entidad_uuid&&(item.documenta_habilitada||service)&&<a className="portal-button portal-button-primary" href={service?`https://tramites.documenta.cl/tramite/${service}?entidad=${item.entidad_uuid}`:`https://tramites.documenta.cl/embed/entidad/${item.entidad_uuid}`}>{service?"Solicitar →":"Ver trámites"}</a>}</div></article>)}</div>}
      {results&&results.pages>1&&<nav className="finder-pagination" aria-label="Páginas de resultados"><button disabled={page<=1||loading} onClick={()=>void execute(page-1)}>Anterior</button><span>Página {page} de {results.pages}</span><button disabled={page>=results.pages||loading} onClick={()=>void execute(page+1)}>Siguiente</button></nav>}
    </section>
  </div>;
}