import React from "react";
import { motion } from "framer-motion";
import { Clock, ShieldCheck, Briefcase, Search, TrendingUp } from "lucide-react";
import { Card } from "../ui/Card";
import { Badge } from "../ui/Badge";

export function RecentAnalysesTimeline() {
  const analyses = [
    {
      type: "Portfolio Doctor",
      result: "Health Score 78/100 · 3 BUY Signals",
      time: "10 mins ago",
      icon: Briefcase,
      status: "SUCCESS",
      variant: "teal",
    },
    {
      type: "Scam Detector",
      result: "CRITICAL SCAM RISK (85/100) — Urgency & Guaranteed Return Flags",
      time: "25 mins ago",
      icon: ShieldCheck,
      status: "COMPLETED",
      variant: "danger",
    },
    {
      type: "AI Screener",
      result: "Found 4 stocks matching 'RSI below 30 & EMA bullish crossover'",
      time: "1 hour ago",
      icon: Search,
      status: "DONE",
      variant: "blue",
    },
    {
      type: "Strategy Builder",
      result: "RELIANCE 2-Year Backtest Yield: +34.2% vs Nifty +18.1%",
      time: "3 hours ago",
      icon: TrendingUp,
      status: "VERIFIED",
      variant: "gold",
    },
  ];

  return (
    <Card style={{ marginBottom: "28px", padding: "20px" }}>
      <div
        style={{
          fontSize: "12px",
          fontWeight: 700,
          color: "var(--color-teal)",
          letterSpacing: "0.8px",
          textTransform: "uppercase",
          marginBottom: "16px",
          display: "flex",
          alignItems: "center",
          gap: "6px",
        }}
      >
        <Clock size={16} /> RECENT AI ANALYSES & MODEL AUDITS
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
        {analyses.map((item, idx) => {
          const IconComp = item.icon;
          return (
            <motion.div
              key={idx}
              initial={{ opacity: 0, x: -10 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: idx * 0.08, duration: 0.25 }}
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                padding: "12px 16px",
                background: "var(--bg-surface)",
                borderRadius: "var(--radius-md, 10px)",
                border: "1px solid var(--border-subtle)",
              }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
                <div
                  style={{
                    width: 34,
                    height: 34,
                    borderRadius: "50%",
                    background: "var(--bg-elevated)",
                    border: "1px solid var(--border)",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    color: "var(--color-teal)",
                  }}
                >
                  <IconComp size={16} />
                </div>

                <div>
                  <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                    <span style={{ fontSize: "13.5px", fontWeight: 700, color: "var(--text-primary)" }}>
                      {item.type}
                    </span>
                    <Badge variant={item.variant} size="sm">
                      {item.status}
                    </Badge>
                  </div>
                  <div style={{ fontSize: "12px", color: "var(--text-secondary)", marginTop: "2px" }}>
                    {item.result}
                  </div>
                </div>
              </div>

              <div style={{ fontSize: "11px", color: "var(--text-muted)", fontFamily: "var(--font-mono)", flexShrink: 0 }}>
                {item.time}
              </div>
            </motion.div>
          );
        })}
      </div>
    </Card>
  );
}

export default RecentAnalysesTimeline;