import React, { useState, useEffect } from "react"; import { Property, Agent } from "../types"; import { formatIDR } from "../utils"; import { Bookmark, Compass, Search, FileSignature, Sparkles, MapPin, ExternalLink, RefreshCw } from "lucide-react"; import { translations } from "../translations"; interface Inquiry { id: number; name: string; email: string; phone: string; interest: string; agent: string; message: string; transactionId: string; created_at: string; } interface ClientPanelProps { lang: "en" | "id"; onSelectProperty: (property: Property) => void; } export default function ClientPanel({ lang, onSelectProperty }: ClientPanelProps) { const isEn = lang === "en"; const t = translations[lang]; const [properties, setProperties] = useState([]); const [agents, setAgents] = useState([]); const [savedIds, setSavedIds] = useState([]); const [emailQuery, setEmailQuery] = useState(""); const [matchingInquiries, setMatchingInquiries] = useState([]); const [searchExecuted, setSearchExecuted] = useState(false); const [loading, setLoading] = useState(false); const [errorMsg, setErrorMsg] = useState(""); // Hook localstorage and express queries useEffect(() => { // Read saved bookmarks try { const stored = localStorage.getItem("luniar_saved_bookmarks"); if (stored) { setSavedIds(JSON.parse(stored)); } } catch (e) { console.warn(e); } // Auto-fill logged-in client email query if session exists try { const session = localStorage.getItem("luniar_client_session"); if (session) { const parsed = JSON.parse(session); if (parsed && parsed.email) { setEmailQuery(parsed.email); } } } catch (e) { console.warn(e); } // Retrieve active catalogs const loadCatalog = async () => { try { const propsRes = await fetch("/api/properties"); if (propsRes.ok) { const propsData = await propsRes.json(); setProperties(propsData); } const agentsRes = await fetch("/api/agents"); if (agentsRes.ok) { const agentsData = await agentsRes.json(); setAgents(agentsData); } } catch (err) { console.error("Failed loading client catalog limits: ", err); } }; loadCatalog(); }, []); const handleSearchInquiries = async (e: React.FormEvent) => { e.preventDefault(); const queryMail = emailQuery.trim(); if (!queryMail) return; setLoading(true); setSearchExecuted(true); setErrorMsg(""); try { // Find Token to headers let token = ""; try { const session = localStorage.getItem("luniar_client_session"); if (session) { const parsed = JSON.parse(session); token = parsed?.token || ""; } } catch (e) { console.warn(e); } const res = await fetch(`/api/inquiries/search?email=${encodeURIComponent(queryMail)}`, { headers: { "Authorization": token ? `Bearer ${token}` : "" } }); if (res.ok) { const inqs: Inquiry[] = await res.json(); setMatchingInquiries(inqs); } else { const errObj = await res.json(); setErrorMsg(errObj.error || (isEn ? "Access denied. Are you logged in correctly?" : "Akses ditolak. Apakah Anda masuk dengan kredensial yang benar?")); setMatchingInquiries([]); } } catch (err) { console.error(err); setErrorMsg(isEn ? "Connection severed. Is server working?" : "Sambungan terputus. Apakah server berfungsi dengan baik?"); } finally { setLoading(false); } }; const handleRemoveBookmark = (propertyId: string) => { const nextSaved = savedIds.filter((id) => id !== propertyId); setSavedIds(nextSaved); try { localStorage.setItem("luniar_saved_bookmarks", JSON.stringify(nextSaved)); } catch (e) { console.error(e); } }; // Find properties matched inside savedIds list const bookmarkedProperties = properties.filter((p) => savedIds.includes(p.id)); // Translate agent representation const getLocalizedAgent = (agent: Agent) => { if (isEn) return agent; if (agent.id === "agent-alistair") { return { ...agent, role: "Penasihat Arsitektur Global", bio: "Dengan lebih dari lima belas tahun pengalaman di pasar arsitektur mewah, Alistair berspesialisasi dalam aset premium langka yang menunjukkan integritas struktural murni." }; } else if (agent.id === "agent-clara") { return { ...agent, role: "Direktur Kurasi", bio: "Clara memiliki mata yang tanpa kompromi untuk estetika minimalis. Dia bekerja erat dengan kolektor internasional untuk mengkurasi rumah yang berfungsi sebagai patung hidup." }; } else if (agent.id === "agent-hiroshi") { return { ...agent, role: "Akun Komersial & Privat", bio: "Spesialis dalam apartemen premium berkepadatan tinggi dan arsitektur komersial skulptural, Hiroshi menjembatani visi pembangunan dengan modal privat yang canggih." }; } return agent; }; return (
{/* Title Header */}
{isEn ? "PRIVATE ACQUISITION MANAGEMENT" : "MANAJEMEN AKUISISI PRIVAT"}

{t.clientPortalTitle}

{t.clientPortalSubtitle}

{/* LEFT COLUMN: Bookmarked curations & advisors (8 columns) */}
{/* Sub block: Bookmarks */}

{isEn ? "Curated Bookmarks" : "Markah Terkurasi Anda"}

{bookmarkedProperties.length} {isEn ? "bookmarked" : "ditandai"}
{bookmarkedProperties.length === 0 ? (
{isEn ? "No properties curated under your bookmark storage yet. Browse Luniar portfolios to accumulate files." : "Belum ada properti yang dikurasi di buku markah Anda. Telusuri portofolio Luniar untuk menambahkan daftar."}
) : (
{bookmarkedProperties.map((p) => (
{p.title}
{p.location}

{p.title}

{formatIDR(p.price)}
))}
)}
{/* Sub block: Dedicated Officers */}

{isEn ? "Your Curatorial Cabinet" : "Kabinat Kurator Anda"}

{agents.map((rawAg) => { const ag = getLocalizedAgent(rawAg); return (
{ag.name}

{ag.name}

{ag.role}

{ag.bio}

{isEn ? "Direct lines:" : "Saluran langsung:"} {ag.email} {ag.phone}
); })}
{/* RIGHT COLUMN: Inquiry Search Lookup (4 columns) */}
{isEn ? "LEDGER LOOKUP" : "PENCARIAN ARSIP SAKTI"}

{isEn ? "Acquisitions Search" : "Penyelidikan Akuisisi"}

{isEn ? "Enter your catalogued registration email address below to fetch active spatial inquiry ledgers directly from the database." : "Masukkan alamat email pendaftaran Anda di bawah untuk mengambil data pertanyaan spasial aktif langsung dari database."}

setEmailQuery(e.target.value)} className="w-full pl-3 pr-10 py-2.5 bg-white border border-[#EEECE6] focus:border-[#C5A572] outline-none text-xs rounded-none font-sans" required />
{/* Results display */} {searchExecuted && (
{isEn ? `RESULTS FOUND (${matchingInquiries.length})` : `HASIL DITEMUKAN (${matchingInquiries.length})`} {loading ? (
{t.queryingDatabase}
) : errorMsg ? (
🔐 {t.restrictedSession}
{errorMsg}
) : matchingInquiries.length === 0 ? (

{isEn ? `No registered inquiry ledger entries could be resolved matching "${emailQuery}". Fill out high-fidelity forms on our contact page first.` : `Tidak ada riwayat catatan kueri yang ditemukan sepadan dengan "${emailQuery}". Silakan isi formulir kontak terlebih dahulu.`}

) : (
{matchingInquiries.map((inq) => (
{inq.transactionId} {new Date(inq.created_at).toLocaleDateString()}
{isEn ? "Requested Target:" : "Aset Sasaran:"}
{inq.interest}
{isEn ? "Assigned Advisor:" : "Kurator Ditunjuk:"}
{inq.agent}
"{inq.message}"
))}
)}
)}
); }