feat: refactor TenderSearch for build stability with sub-renders

frontend/components/TenderSearch.tsx

@@ -1,29 +1,226 @@
 "use client";
 
-import { useState } from "react";
+import { useMemo, useState, useRef, useEffect } from "react";
+import BrandLoader from "./BrandLoader";
 import type { Tender } from "../lib/types";
-import { Language } from "../lib/translations";
+import { Language, translations } from "../lib/translations";
+import AgentChat from "./AgentChat";
 import type { CompanyProfile } from "../lib/types";
 
 type Props = {
   tenders: Tender[];
-  onSearch: (params: any) => void;
+  onSearch: (params: { keyword?: string; buyer?: string; provider_code?: string; org_code?: string; status?: string; code?: string; date?: string; type_code?: string; skip?: number; limit?: number; isAgile?: boolean }) => void;
   onAnalyze: (tender: Tender) => void;
+  forceShowFollowed?: boolean;
+  initialKeyword?: string;
   lang: Language;
   companyProfile: CompanyProfile;
 };
 
-export default function TenderSearch({ tenders, onSearch, onAnalyze, lang, companyProfile }: Props) {
+export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFollowed = false, initialKeyword = "", lang, companyProfile }: Props) {
+  const t = translations[lang];
+  const [keyword, setKeyword] = useState(initialKeyword);
+  const [buyerCode, setBuyerCode] = useState("");
+  const [providerCode, setProviderCode] = useState("");
+  const [orgCode, setOrgCode] = useState("");
+  const [status, setStatus] = useState("");
+  const [date, setDate] = useState("");
+  const [typeCode, setTypeCode] = useState("");
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [selectedTenderForModal, setSelectedTenderForModal] = useState<Tender | null>(null);
+  const [selectedCodes, setSelectedCodes] = useState<string[]>([]);
+  const [isSyncingToAgents, setIsSyncingToAgents] = useState(false);
+  const [activeDetailTab, setActiveDetailTab] = useState<"Overview" | "Agent Chat">("Overview");
+  
+  const [followedTenders, setFollowedTenders] = useState<Tender[]>(() => {
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('andes_followed_tenders_full');
+      return saved ? JSON.parse(saved) : [];
+    }
+    return [];
+  });
+  
+  const followedCodes = useMemo(() => followedTenders.map(item => item.code), [followedTenders]);
+  const [showOnlyFollowed, setShowOnlyFollowed] = useState(forceShowFollowed);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isAgileMode, setIsAgileMode] = useState(false);
+  const isSearchPending = useRef(false);
+
+  const filteredTenders = useMemo(() => {
+    if (showOnlyFollowed) return followedTenders;
+    let list = tenders;
+    if (isAgileMode) {
+      list = list.filter(item => 
+        item.code.includes('COT26') || 
+        item.name.toLowerCase().includes('compra ágil') ||
+        item.sector?.toLowerCase().includes('agil')
+      );
+    }
+    return list;
+  }, [tenders, showOnlyFollowed, followedTenders, isAgileMode]);
+
+  useEffect(() => {
+    if (forceShowFollowed) setShowOnlyFollowed(true);
+  }, [forceShowFollowed]);
+
+  useEffect(() => {
+    localStorage.setItem('andes_followed_tenders_full', JSON.stringify(followedTenders));
+  }, [followedTenders]);
+
+  const toggleFollow = (tender: Tender) => {
+    setFollowedTenders(prev => {
+      const isFollowing = prev.some(item => item.code === tender.code);
+      return isFollowing ? prev.filter(item => item.code !== tender.code) : [...prev, tender];
+    });
+  };
+
+  const handleSearch = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault();
+    if (isSearchPending.current) return;
+    isSearchPending.current = true;
+    setIsLoading(true);
+    try {
+      const isCode = /^[0-9]+-[0-9]+-[A-Z0-9]+$/i.test(keyword);
+      await onSearch({ 
+        keyword: isCode ? undefined : keyword,
+        code: isCode ? keyword : undefined,
+        org_code: orgCode || undefined,
+        status: status || undefined,
+        type_code: typeCode || undefined,
+        date,
+        skip: 0, 
+        limit: 50,
+        isAgile: isAgileMode
+      });
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+      isSearchPending.current = false;
+    }
+  };
+
+  const isTenderCode = /^[0-9]+-[0-9]+-[A-Z0-9]+$/i.test(keyword);
+  const isLiveSearch = Boolean(isTenderCode || orgCode || status || date || typeCode);
+  const searchButtonLabel = isLoading ? "Searching..." : isLiveSearch ? "Live MP Search" : "Fetch Active Tenders";
+
+  // VIEW: Search & List
+  const renderListView = () => (
+    <div className="space-y-8">
+      <div className={`glass-card rounded-3xl p-8 mb-4 border transition-all duration-500 ${forceShowFollowed ? 'border-purple-500/30 bg-purple-500/5 shadow-[0_0_50px_rgba(168,85,247,0.1)]' : 'border-white/10'}`}>
+        <div className="mb-6 flex justify-between items-start">
+          <div>
+            <div className="flex items-center gap-3 mb-2">
+               <div className={`w-10 h-10 rounded-2xl flex items-center justify-center text-xl ${forceShowFollowed ? 'bg-purple-500 text-white' : 'bg-white/5 text-slate-400'}`}>
+                  {forceShowFollowed ? "★" : "📡"}
+               </div>
+               <h2 className="text-3xl font-black text-white tracking-tight">{forceShowFollowed ? "My Portfolio" : "Tender Discovery"}</h2>
+            </div>
+            <p className="text-slate-400 text-sm">Real-time access to the Chilean public procurement market.</p>
+          </div>
+        </div>
+        
+        {!forceShowFollowed && (
+          <form onSubmit={handleSearch} className="relative z-10 space-y-6">
+            <div className="flex flex-col md:flex-row gap-4">
+              <div className="relative flex-1">
+                <input
+                  type="text"
+                  placeholder="Search by name, ID, or description..."
+                  className="w-full bg-slate-900/60 border border-white/10 rounded-2xl pl-6 pr-4 py-4 text-white focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all"
+                  value={keyword}
+                  onChange={(e) => setKeyword(e.target.value)}
+                />
+              </div>
+              <div className="flex gap-2">
+                <button type="button" onClick={() => setShowAdvanced(!showAdvanced)} className={`px-6 py-4 rounded-2xl border font-bold text-sm transition-all ${showAdvanced ? 'bg-purple-500/20 border-purple-500/50 text-purple-300' : 'bg-white/5 border-white/10 text-slate-400'}`}>Settings</button>
+                <button type="submit" disabled={isLoading} className="px-8 py-4 bg-purple-600 hover:bg-purple-500 text-white rounded-2xl font-bold transition-all shadow-lg active:scale-95">{searchButtonLabel}</button>
+              </div>
+            </div>
+
+            {showAdvanced && (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-6 glass-card rounded-3xl bg-white/[0.02] border border-white/5">
+                <div className="space-y-1"><label className="text-[10px] font-bold uppercase text-slate-500 ml-1">Date</label><input type="date" className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2 text-white text-sm [color-scheme:dark]" value={date} onChange={(e) => setDate(e.target.value)} /></div>
+                <div className="space-y-1"><label className="text-[10px] font-bold uppercase text-slate-500 ml-1">Org ID</label><input type="text" placeholder="e.g. 6945" className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2 text-white text-sm" value={orgCode} onChange={(e) => setOrgCode(e.target.value)} /></div>
+                <div className="space-y-1"><label className="text-[10px] font-bold uppercase text-slate-500 ml-1">Status</label><select className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2 text-white text-sm" value={status} onChange={(e) => setStatus(e.target.value)}><option value="">All</option><option value="5">Publicada</option><option value="7">Desierta</option></select></div>
+                <div className="space-y-1"><label className="text-[10px] font-bold uppercase text-slate-500 ml-1">Type</label><select className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2 text-white text-sm" value={typeCode} onChange={(e) => setTypeCode(e.target.value)}><option value="">All</option><option value="LE">LE</option><option value="LP">LP</option></select></div>
+              </div>
+            )}
+          </form>
+        )}
+      </div>
+
+      <div className="glass-card rounded-3xl overflow-hidden border border-white/5">
+        <table className="w-full text-left text-sm table-fixed">
+          <thead className="bg-white/5 text-slate-500 uppercase text-[10px] font-bold border-b border-white/5">
+            <tr>
+              <th className="px-6 py-5 w-[100px]">ID</th>
+              <th className="px-6 py-5 w-[300px]">Opportunity</th>
+              <th className="px-6 py-5 w-[200px]">Buyer</th>
+              <th className="px-6 py-5 text-center w-[120px]">Status</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-white/5">
+            {filteredTenders.map((item) => (
+              <tr key={item.code} className="hover:bg-white/[0.04] transition-colors group cursor-pointer" onClick={() => setSelectedTenderForModal(item)}>
+                <td className="px-6 py-5 font-mono text-purple-400 text-[10px]">{item.code}</td>
+                <td className="px-6 py-5"><div className="font-bold text-white truncate text-xs">{item.name}</div></td>
+                <td className="px-6 py-5 text-slate-400 text-[11px] truncate">{item.buyer}</td>
+                <td className="px-6 py-5 text-center">
+                  <span className={`inline-block rounded-full px-3 py-1 text-[9px] font-black uppercase ${item.status.toLowerCase().includes('publicada') ? 'bg-green-500/10 text-green-400' : 'bg-slate-800 text-slate-500'}`}>{item.status}</span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+
+  // VIEW: Detail Modal
+  const renderDetailView = (tender: Tender) => (
+    <div className="animate-in slide-in-from-right-8 fade-in duration-700 w-full max-w-[1600px] mx-auto pt-4 pb-20">
+      <div className="flex justify-between items-end mb-8">
+        <button onClick={() => setSelectedTenderForModal(null)} className="flex items-center gap-2 text-slate-400 hover:text-white transition group">
+          <span className="text-xl group-hover:-translate-x-1 transition-transform">←</span>
+          <span className="text-sm font-bold uppercase tracking-widest">Back to search</span>
+        </button>
+        <div className="flex bg-white/5 p-1 rounded-2xl border border-white/10">
+          <button onClick={() => setActiveDetailTab("Overview")} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase transition-all ${activeDetailTab === "Overview" ? "bg-purple-600 text-white" : "text-slate-500"}`}>Overview</button>
+          <button onClick={() => setActiveDetailTab("Agent Chat")} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase transition-all ${activeDetailTab === "Agent Chat" ? "bg-purple-600 text-white" : "text-slate-500"}`}>Agent Chat</button>
+        </div>
+      </div>
+
+      {activeDetailTab === "Overview" ? (
+        <div className="glass-card rounded-[2.5rem] overflow-hidden border border-white/5 bg-slate-900/40 backdrop-blur-xl p-10 md:p-14">
+          <div className="flex items-center gap-3 mb-6">
+            <span className="text-sm font-mono text-purple-400 bg-purple-400/10 px-3 py-1 rounded-lg">{tender.code}</span>
+            <span className="px-3 py-1 rounded-lg text-xs font-black uppercase bg-green-500/10 text-green-400">{tender.status}</span>
+          </div>
+          <h3 className="text-3xl md:text-4xl font-black text-white leading-tight mb-8">{tender.name}</h3>
+          <div className="grid lg:grid-cols-3 gap-12">
+            <div className="lg:col-span-2 space-y-8">
+              <div className="text-slate-300 leading-relaxed text-lg bg-white/[0.02] p-8 rounded-[2rem] border border-white/5 whitespace-pre-wrap">{tender.description || "No description provided."}</div>
+            </div>
+            <div className="space-y-6">
+              <div className="p-8 rounded-[2rem] bg-purple-600/10 border border-purple-500/20">
+                <div className="text-[10px] text-slate-500 font-bold uppercase mb-1">Closing Deadline</div>
+                <div className="text-2xl font-black text-white font-mono">{tender.closing_date ? new Date(tender.closing_date).toLocaleDateString() : "---"}</div>
+              </div>
+              <button onClick={() => { onAnalyze(tender); setSelectedTenderForModal(null); }} className="w-full premium-gradient text-white px-8 py-4 rounded-2xl font-black uppercase shadow-xl">Analyze with AI</button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <AgentChat tender={tender} companyProfile={companyProfile} />
+      )}
+    </div>
+  );
+
   return (
-    <div className="p-20 text-center">
-      <h1 className="text-4xl font-black text-white">RECOVERY MODE</h1>
-      <p className="text-slate-400 mt-4">The search system is being recalibrated to resolve a compilation issue.</p>
-      <button 
-        onClick={() => window.location.reload()}
-        className="mt-8 px-8 py-4 bg-purple-600 text-white rounded-2xl font-bold"
-      >
-        Reload Platform
-      </button>
+    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
+      {selectedTenderForModal ? renderDetailView(selectedTenderForModal) : renderListView()}
+      {isLoading && <BrandLoader />}
     </div>
   );
 }