"use client";

import { useState } from "react";
import { ChevronDown } from "lucide-react";

interface Event { type?: string; title?: string; description?: string; affectedLocations?: string[]; searchImpact?: string; severity?: string }

const SEV_DOT: Record<string, string> = { critical: "bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.6)]", major: "bg-orange-500 shadow-[0_0_6px_rgba(249,115,22,0.5)]", moderate: "bg-amber-400", minor: "bg-blue-400" };
const SEV_BORDER: Record<string, string> = { critical: "border-l-red-500", major: "border-l-orange-500", moderate: "border-l-amber-400", minor: "border-l-blue-400" };
const TYPE_CLS: Record<string, string> = { weather: "bg-sky-50 text-sky-700", regulatory: "bg-violet-50 text-violet-700", economic: "bg-green-50 text-green-700", health: "bg-red-50 text-red-700", technology: "bg-blue-50 text-blue-700", cultural: "bg-amber-50 text-amber-700" };

interface Props { events: Event[] }

export default function EventsTimeline({ events }: Props) {
  const [expandedIdx, setExpandedIdx] = useState<number | null>(null);
  if (!events.length) return null;

  return (
    <div>
      <h2 className="text-xs font-bold uppercase tracking-widest text-slate-400 mb-3">External Events Detected</h2>
      <div className="space-y-2">
        {events.map((ev, i) => {
          const sev = ev.severity || "minor";
          const expanded = expandedIdx === i;
          return (
            <div key={i} className={`bg-white rounded-xl border-l-4 border border-slate-200 ${SEV_BORDER[sev] || SEV_BORDER.minor} overflow-hidden`}>
              <button onClick={() => setExpandedIdx(expanded ? null : i)} className="w-full flex items-start gap-3 px-4 py-3 text-left hover:bg-slate-50">
                <div className={`w-3 h-3 rounded-full mt-1 shrink-0 ${SEV_DOT[sev] || SEV_DOT.minor}`} />
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 flex-wrap mb-0.5">
                    <span className="text-sm font-bold text-slate-900">{ev.title}</span>
                    {ev.type && <span className={`text-[9px] font-bold uppercase tracking-wider rounded-full px-2 py-0.5 ${TYPE_CLS[ev.type] || TYPE_CLS.cultural}`}>{ev.type}</span>}
                    <span className={`text-[9px] font-bold uppercase tracking-wider rounded-full px-2 py-0.5 ${sev === "critical" ? "bg-red-100 text-red-700" : sev === "major" ? "bg-orange-100 text-orange-700" : "bg-slate-100 text-slate-500"}`}>{sev}</span>
                  </div>
                  {!expanded && ev.description && <p className="text-xs text-slate-500 line-clamp-1">{ev.description}</p>}
                </div>
                <ChevronDown className={`w-4 h-4 text-slate-400 shrink-0 mt-1 transition-transform ${expanded ? "rotate-180" : ""}`} />
              </button>
              {expanded && (
                <div className="px-4 pb-3 pl-10 space-y-2">
                  {ev.description && <p className="text-xs text-slate-700 leading-relaxed">{ev.description}</p>}
                  {ev.affectedLocations?.length ? (
                    <div className="flex flex-wrap gap-1">{ev.affectedLocations.map((loc) => <span key={loc} className="px-2 py-0.5 rounded-md bg-slate-100 text-[10px] font-medium text-slate-600">{loc}</span>)}</div>
                  ) : null}
                  {ev.searchImpact && <p className="text-[11px] text-slate-500 italic">{ev.searchImpact}</p>}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}
