import React, { useState } from “react”;
import { AssessmentForm, AdvisorBlueprint } from “../types”;
import { Cpu, ShieldAlert, CheckCircle, ChevronRight, ChevronLeft, Loader2, Sparkles, AlertCircle, Info, Heart } from “lucide-react”;
export default function StepFormAdvisor() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState
const [blueprint, setBlueprint] = useState
const [step, setStep] = useState(1);
const [form, setForm] = useState
name: “”,
age: 35,
dependents: 0,
maritalStatus: “single”,
yearlyIncome: 75000,
healthLifestyle: “average”,
smoker: false,
ownsHome: “rent”,
ownsCar: true,
riskTolerance: “medium”,
primaryGoal: “Comprehensive overall security with deductible savings strategies”,
});
const nextStep = () => setStep((prev) => Math.min(prev + 1, 4));
const prevStep = () => setStep((prev) => Math.max(prev – 1, 1));
const handleFormChange = (fields: Partial
setForm((prev) => ({ …prev, …fields }));
};
const handleFormSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError(null);
try {
const response = await fetch(“/api/advisor”, {
method: “POST”,
headers: { “Content-Type”: “application/json” },
body: JSON.stringify(form),
});
if (!response.ok) {
throw new Error(“Failed to receive structured advisor analysis.”);
}
const data = await response.json();
setBlueprint(data);
} catch (err: any) {
console.error(err);
setError(err.message || “An unexpected error occurred during analysis.”);
} finally {
setLoading(false);
}
};
const handleReset = () => {
setBlueprint(null);
setStep(1);
setError(null);
};
return (
AI Risk & Security Advisor
Complete our short anonymous diagnostic to generate a specialized, custom Insurance Security Blueprint powered by the Gemini 3.5 model.
{error && (
Make sure you have specified your GEMINI_API_KEY environment variable securely in AI Studio Secrets panel.
)}
{/* Main Container */}
/* Multi-step diagnostic questionnaire */
= s ? “bg-indigo-600 w-4” : “bg-slate-200”
}`}
/>
))}
) : (
/* Analysis Done screen – Show highly styled UI dashboard with the custom score & details */
Portfolio Analysis for {blueprint.userName || form.name || “Valued User”}
{blueprint.riskProfileSummary}
{/* Unique Visual Score Ring */}
{blueprint.overallScore}
Safety Score
? “bg-emerald-500/10 text-emerald-400”
: blueprint.overallScore >= 55
? “bg-amber-500/10 text-amber-400”
: “bg-rose-500/10 text-rose-400”
}`}>
{blueprint.overallScore >= 80 ? “Sufficient Protection” : blueprint.overallScore >= 55 ? “Moderate Exposure Gaps” : “High Uninsured Exposure”}
{/* Recommendations Grid */}
RECOMMENDED COVERAGE STRATEGIES
const isHigh = rec.urgency === “High”;
const isMedium = rec.urgency === “Medium”;
return (
{rec.urgency} Urgency
{rec.insuranceType}
${rec.estimatedMonthlyCost}/mo
{rec.recommendedCoverageLimit}
{rec.suggestedDeductible}
{rec.rationale}
{rec.tipsToSave}
);
})}
{/* Bottom Section: Exposures & Checklist Action Plan */}
Key Lifestyle Exposures Detected
-
{blueprint.vulnerabilities.map((v, i) => (
-
{v}
))}
{/* Suggested Action Item next steps */}
Actionable Next Steps
-
{blueprint.suggestedNextSteps.map((s, i) => (
-
{s}
))}
{/* Recalculate CTA button under safety panel */}
)}
);
}