import { ArrowUp, ArrowDown, LucideIcon, Sparkles } from "lucide-react";

interface Insight {
  label: string;
  description: string;
  icon: LucideIcon;
  accentBg: string;
  accentColor: string;
  trend: number;
}

interface QuickInsightsProps {
  insights: Insight[];
}

export default function QuickInsights({ insights }: QuickInsightsProps) {
  return (
    <div className="flex h-full flex-col overflow-hidden rounded-3xl border border-gray-100 bg-white shadow-lg">
      <div className="flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-transparent px-6 py-4">
        <div className="flex items-center gap-3">
          <div className="rounded-full bg-indigo-600/10 p-2 text-indigo-600">
            <Sparkles className="h-5 w-5" />
          </div>
          <div>
            <h3 className="text-sm font-semibold text-brand-ink">
              Executive brief
            </h3>
            <p className="text-xs text-gray-500">
              AI-picked signals, updated live
            </p>
          </div>
        </div>
        <span className="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1 text-[11px] font-semibold text-emerald-700">
          <span className="h-2 w-2 rounded-full bg-brand-green animate-pulse" />
          Live
        </span>
      </div>

      <div className="flex-1 divide-y divide-gray-100">
        {insights.map((insight) => {
          const InsightIcon = insight.icon;
          const trendPositive = insight.trend >= 0;

          // Determine sentiment color based on trend
          const sentimentColor = trendPositive
            ? "text-emerald-600"
            : "text-amber-600";
          const sentimentBg = trendPositive ? "bg-emerald-50" : "bg-amber-50";

          return (
            <div
              key={insight.label}
              className="group relative px-6 py-4 transition-colors hover:bg-indigo-50/60"
            >
              <div className="absolute inset-y-0 left-0 w-1 rounded-full bg-gradient-to-b from-indigo-400/70 via-indigo-500/70 to-indigo-600/70 opacity-0 transition-opacity group-hover:opacity-100" />

              <div className="flex items-start gap-4">
                <div
                  className={`rounded-xl p-3 ${insight.accentBg} ring-1 ring-inset ring-white/60 transition-transform group-hover:scale-105`}
                >
                  <InsightIcon className={`h-5 w-5 ${insight.accentColor}`} />
                </div>

                <div className="min-w-0 flex-1 space-y-1">
                  <div className="flex items-center justify-between gap-2">
                    <p className="text-sm font-semibold text-brand-ink">
                      {insight.label}
                    </p>
                    {insight.trend !== 0 && (
                      <span
                        className={`inline-flex items-center gap-1 rounded-full px-2 py-1 text-[11px] font-bold uppercase tracking-wide ${sentimentBg} ${sentimentColor}`}
                      >
                        {trendPositive ? (
                          <ArrowUp className="h-3 w-3" />
                        ) : (
                          <ArrowDown className="h-3 w-3" />
                        )}
                        {trendPositive ? "Up" : "Down"}{" "}
                        {Math.abs(insight.trend)}%
                      </span>
                    )}
                  </div>

                  <p className="text-sm leading-relaxed text-gray-600">
                    {insight.description}
                  </p>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <div className="border-t border-gray-100 px-6 py-4 text-xs text-gray-500">
        <div className="flex items-center justify-between">
          <span>Auto-refresh every 30s to stay accurate.</span>
          <span className="font-semibold text-indigo-600">Command view</span>
        </div>
      </div>
    </div>
  );
}