Conversation insights

interface InsightData {
  transcript: string;                 // Full conversation text
  emotions: Record<string, number>;   // Emotion confidence scores
  analysis: string;                   // AI-generated analysis
  timestamp: number;                  // Session timestamp (ms)
}

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { motion } from "framer-motion";

export default function Insights() {
  const [data, setData] = useState<InsightData | null>(null);
  const navigate = useNavigate();

  useEffect(() => {
    const stored = sessionStorage.getItem("svaraInsights");
    if (stored) {
      setData(JSON.parse(stored));
    }
  }, []);

  const topEmotions = data?.emotions
    ? Object.entries(data.emotions)
        .sort(([, a], [, b]) => b - a)
        .slice(0, 5)
    : [];

  if (!data) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center">
        <BrainIcon />
        <h1 className="text-2xl font-light text-gray-800 mb-4 mt-6">
          No conversation data
        </h1>
        <p className="text-gray-600 mb-8">
          Start a voice conversation to get insights.
        </p>
        <button
          onClick={() => navigate("/playground")}
          className="px-6 py-3 bg-[#E07155] text-white rounded-xl"
        >
          Start Conversation
        </button>
      </div>
    );
  }

  return (
    <div className="min-h-screen px-6 py-12 max-w-4xl mx-auto">
      {/* Insights content */}
    </div>
  );
}

<div className="bg-white/80 backdrop-blur-md rounded-2xl p-8 shadow-lg">
  <div className="flex items-center gap-3 mb-4">
    <SparkleIcon />
    <h2 className="text-xl font-medium text-gray-800">
      Emotional Analysis
    </h2>
  </div>
  <p className="text-gray-700 leading-relaxed text-lg">
    {data.analysis}
  </p>
</div>

<div className="bg-white/80 backdrop-blur-md rounded-2xl p-8 shadow-lg">
  <div className="flex items-center gap-3 mb-6">
    <ChartIcon />
    <h2 className="text-xl font-medium text-gray-800">
      Detected Emotions
    </h2>
  </div>
  <div className="space-y-4">
    {topEmotions.map(([emotion, score]) => (
      <div key={emotion} className="flex items-center gap-4">
        <span className="w-32 text-gray-600 capitalize">
          {emotion}
        </span>
        <div className="flex-1 h-3 bg-gray-200 rounded-full overflow-hidden">
          <motion.div
            initial={{ width: 0 }}
            animate={{ width: `${score * 100}%` }}
            transition={{ duration: 0.8, ease: "easeOut" }}
            className="h-full bg-gradient-to-r from-[#E07155] to-[#E39682] rounded-full"
          />
        </div>
        <span className="w-16 text-right text-gray-500 text-sm">
          {(score * 100).toFixed(0)}%
        </span>
      </div>
    ))}
  </div>
</div>

<div className="bg-white/80 backdrop-blur-md rounded-2xl p-8 shadow-lg">
  <div className="flex items-center gap-3 mb-4">
    <MessageIcon />
    <h2 className="text-xl font-medium text-gray-800">
      Conversation
    </h2>
  </div>
  <div className="space-y-3 max-h-64 overflow-y-auto">
    {data.transcript.split("\n").map((line, i) => {
      const isUser = line.startsWith("User:");
      return (
        <p 
          key={i} 
          className={`text-sm ${
            isUser 
              ? "text-gray-800 font-medium" 
              : "text-gray-600"
          }`}
        >
          {line}
        </p>
      );
    })}
  </div>
</div>

<div className="text-center mb-12">
  <h1 className="text-4xl font-light text-gray-800 mb-2">
    Your Insights
  </h1>
  <p className="text-gray-500 text-sm">
    {new Date(data.timestamp).toLocaleString()}
  </p>
</div>

<div className="flex gap-4 justify-center pt-8">
  <button
    onClick={() => {
      sessionStorage.removeItem("svaraInsights");
      navigate("/playground");
    }}
    className="px-8 py-3 bg-[#E07155] text-white rounded-xl hover:bg-[#D65A3F] transition-colors"
  >
    New Conversation
  </button>
  <button
    onClick={() => navigate("/")}
    className="px-8 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-100 transition-colors"
  >
    Back Home
  </button>
</div>

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  className="space-y-8"
>
  {/* Insight cards */}
</motion.div>

/* Primary accent */
--coral: #E07155;
--coral-dark: #D65A3F;
--coral-light: #E39682;

/* Neutrals */
--gray-800: #1F2937;
--gray-700: #374151;
--gray-600: #4B5563;
--gray-500: #6B7280;

/* Backgrounds */
--white-80: rgba(255, 255, 255, 0.8);

<div className="min-h-screen px-6 py-12 max-w-4xl mx-auto">
  <motion.div className="space-y-8">
    {/* Insight cards with consistent 8-unit spacing */}
  </motion.div>
</div>

// 1. Emotion detection provides scores
const emotions = await detectEmotions(audioUrl);

// 2. Therapeutic feedback generates analysis
const { response, emotions } = await generateFeedback(
  transcript, 
  emotions
);

// 3. Insights page displays combined data
const insightData: InsightData = {
  transcript,
  emotions,
  analysis: response,
  timestamp: Date.now()
};

sessionStorage.setItem(
  "svaraInsights", 
  JSON.stringify(insightData)
);