import React, { useState, useMemo, useRef, useEffect } from 'react'; import { Briefcase, AlertTriangle, Target, Zap, Building2, Landmark, PiggyBank, MoreHorizontal, ArrowRight, TrendingUp, Calculator, ShieldCheck, ChevronRight, ArrowLeft, PlusCircle, Scale, Mail, X, CheckCircle2 } from 'lucide-react'; // Firebase Imports import { initializeApp } from 'firebase/app'; import { getAuth, signInWithCustomToken, signInAnonymously, onAuthStateChanged } from 'firebase/auth'; import { getFirestore, collection, addDoc, serverTimestamp } from 'firebase/firestore'; // --- FIREBASE INITIALIZATION --- const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {}; const app = initializeApp(firebaseConfig); const auth = getAuth(app); const db = getFirestore(app); const appId = typeof __app_id !== 'undefined' ? __app_id : 'eis-risk-visualiser'; // --- STABLE SUB-COMPONENTS --- const CurrencyInput = ({ value, onChange, placeholder, className = "" }) => { const inputRef = useRef(null); const handleChange = (e) => { const input = e.target; const rawValue = input.value; const selectionStart = input.selectionStart; const digitsBefore = rawValue.substring(0, selectionStart).replace(/\D/g, "").length; const numericValue = rawValue.replace(/\D/g, ""); onChange(numericValue); window.requestAnimationFrame(() => { if (!inputRef.current) return; const newValue = numericValue ? parseInt(numericValue).toLocaleString() : ""; let newPos = 0; let digitsFound = 0; while (digitsFound < digitsBefore && newPos < newValue.length) { if (/\d/.test(newValue[newPos])) digitsFound++; newPos++; } inputRef.current.setSelectionRange(newPos, newPos); }); }; const displayValue = value ? parseInt(value).toLocaleString() : ""; return ( ); }; const AssetRow = ({ id, label, Icon, assetData, onUpdate }) => ( ); // --- MAIN APPLICATION --- const App = () => { const [currentPage, setCurrentPage] = useState('inventory'); const [showPopup, setShowPopup] = useState(false); const [email, setEmail] = useState(""); const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitted, setIsSubmitted] = useState(false); const [user, setUser] = useState(null); const [riskAppetite, setRiskAppetite] = useState(5); const [eisInvestment, setEisInvestment] = useState(""); const [assets, setAssets] = useState({ pension: { value: "", risk: "3" }, isa: { value: "", risk: "5" }, property: { value: "", risk: "4" }, other: { value: "", risk: "7" } }); // Handle Authentication useEffect(() => { const initAuth = async () => { if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) { await signInWithCustomToken(auth, __initial_auth_token); } else { await signInAnonymously(auth); } }; initAuth(); const unsubscribe = onAuthStateChanged(auth, setUser); return () => unsubscribe(); }, []); // Popup Trigger Logic useEffect(() => { let timer; if (currentPage === 'impact' && !isSubmitted && !showPopup) { timer = setTimeout(() => setShowPopup(true), 6000); } return () => clearTimeout(timer); }, [currentPage, isSubmitted, showPopup]); const parseNum = (str) => { if (!str) return 0; const numeric = str.toString().replace(/\D/g, ""); return parseInt(numeric) || 0; }; const portfolioData = useMemo(() => { let totalValue = 0; let weightedRiskSum = 0; Object.values(assets).forEach(asset => { const val = parseNum(asset.value); const r = parseInt(asset.risk) || 0; totalValue += val; weightedRiskSum += (val * r); }); const avgRisk = totalValue === 0 ? 0 : (weightedRiskSum / totalValue); const eisAmount = parseNum(eisInvestment); const simulatedTotal = totalValue + eisAmount; const simulatedWeightedSum = weightedRiskSum + (eisAmount * 9); const simulatedAvgRisk = simulatedTotal === 0 ? 0 : (simulatedWeightedSum / simulatedTotal); return { totalValue, avgRisk: parseFloat(avgRisk.toFixed(1)), roundedRisk: Math.round(avgRisk), simulatedTotal, simulatedAvgRisk: parseFloat(simulatedAvgRisk.toFixed(1)), riskShift: parseFloat((simulatedAvgRisk - avgRisk).toFixed(1)) }; }, [assets, eisInvestment]); // --- SAVE TO CLOUD LOGIC --- const handleEmailSubmit = async (e) => { e.preventDefault(); if (!user) return; setIsSubmitting(true); try { // Save data to Firestore (Public Collection for Submissions) const submissionsCol = collection(db, 'artifacts', appId, 'public', 'data', 'submissions'); await addDoc(submissionsCol, { email, riskAppetite, eisInvestment: parseNum(eisInvestment), portfolioAssets: assets, summary: { currentTotal: portfolioData.totalValue, currentRisk: portfolioData.avgRisk, newTotal: portfolioData.simulatedTotal, newRisk: portfolioData.simulatedAvgRisk }, timestamp: serverTimestamp() }); setIsSubmitting(false); setIsSubmitted(true); setTimeout(() => setShowPopup(false), 2500); } catch (error) { console.error("Error saving submission:", error); setIsSubmitting(false); } }; const handleUpdate = (key, type, val) => { setAssets(prev => ({ ...prev, [key]: { ...prev[key], [type]: val } })); }; const getRiskProfile = (val) => { if (val <= 2) return { label: "Very Conservative", color: "text-emerald-700", desc: "Prioritises capital preservation with minimal exposure to market fluctuations." }; if (val <= 4) return { label: "Conservative", color: "text-emerald-600", desc: "Willing to accept small fluctuations for modest long-term growth potential." }; if (val <= 6) return { label: "Balanced", color: "text-indigo-600", desc: "Seeking a balance between capital growth and income with moderate volatility." }; if (val <= 8) return { label: "Growth / Aggressive", color: "text-indigo-800", desc: "Higher tolerance for volatility to achieve significant capital appreciation." }; return { label: "Very Aggressive", color: "text-rose-600", desc: "Maximum risk for high growth, including high-risk or illiquid alternative assets." }; }; const profile = getRiskProfile(riskAppetite); if (currentPage === 'inventory') { return ( ); } return ( ); }; export default App;