"use client"

import * as React from "react"
import { Sparkles, ShieldCheck, ChevronDown, FileOutput, Bookmark, ThumbsUp, TrendingUp } from "lucide-react"

interface SourceItem {
  initials: string
  title: string
  author: string
  role: string
  date: string
  triangulated: string
}

interface MiniChart {
  title: string
  trajectory: string
  growthText: string
  values: string
  bars: string[]
}

interface IQAnswerData {
  badge: string
  title: string
  subTitle: string
  statusText: string
  paragraphs: string[]
  miniChart: MiniChart
  citedSources: {
    title: string
    subtitle: string
    items: SourceItem[]
  }
  trustFooter: string
  actions: {
    exportText: string
    saveText: string
    disclaimer: string
  }
}

export function IQAnswerPanel({
  data,
  onExport,
}: {
  data: IQAnswerData
  onExport?: () => void
}) {
  const [sourcesOpen, setSourcesOpen] = React.useState(false)

  return (
    <div className="bg-white border border-[#E2DDD6] rounded-[10px] overflow-hidden mb-[22px] shadow-[0_4px_20px_rgba(13,43,85,.05)]">
      {/* Header */}
      <div className="flex items-center gap-3 px-6 py-[18px] bg-gradient-to-r from-[#0D2B55] to-[#163d6e] relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,.06)_1px,transparent_1px)] bg-[size:18px_18px]" />
        <div className="relative w-[38px] h-[38px] rounded-[8px] bg-[rgba(232,160,32,.18)] border border-[rgba(245,188,80,.4)] flex items-center justify-center shrink-0">
          <Sparkles className="size-5 text-accent-gold" />
        </div>
        <div className="relative flex-1">
          <div className="text-[15px] font-bold text-white flex items-center gap-2.5">
            {data.title}
            <span className="text-[9px] font-bold tracking-[.06em] uppercase text-ink bg-accent-gold px-[7px] py-[2px] rounded-[3px]">
              {data.badge}
            </span>
          </div>
          <div className="text-[11.5px] text-white/60 mt-0.5">{data.subTitle}</div>
        </div>
        <div className="relative flex items-center gap-1.5 text-[11.5px] text-[#7FD0A3] font-semibold">
          <span className="w-[7px] h-[7px] rounded-full bg-[#3FB97D] animate-pulse" />
          {data.statusText}
        </div>
      </div>

      {/* Answer body */}
      <div className="px-[26px] pt-6 pb-2">
        {/* vfig highlight style — matches HTML reference */}
        <style>{`.vfig{background:rgba(26,115,64,.09);color:#0A0D14;font-weight:600;border-bottom:1.5px solid rgba(26,115,64,.4);border-radius:3px;padding:1px 5px;white-space:nowrap}`}</style>
        {data.paragraphs.map((para, i) => (
          <p
            key={i}
            className="text-[15.5px] leading-[1.85] text-[#1E1C19] mb-[15px]"
            dangerouslySetInnerHTML={{ __html: para }}
          />
        ))}

        {/* Mini chart */}
        <div className="flex items-flex-end gap-2 bg-[#FAF8F4] border border-[#F0EDE8] rounded-[8px] p-[16px_18px] mt-1.5 mb-1">
          <div className="flex-1">
            <div className="text-[11px] font-bold tracking-[.05em] uppercase text-[#9A968E] mb-3">
              {data.miniChart.title}
            </div>
            <div className="grid gap-2.5 items-end h-[84px]" style={{ gridTemplateColumns: `repeat(${data.miniChart.bars.length}, 1fr)` }}>
              {data.miniChart.bars.map((h, i) => {
                const isLast = i === data.miniChart.bars.length - 1
                const isSecondLast = i === data.miniChart.bars.length - 2
                return (
                  <div key={i} className="flex flex-col items-center justify-end h-full">
                    <div
                      style={{
                        height: h,
                        background: isLast ? "#E8A020" : isSecondLast ? "#1A5C9E" : "#0D2B55",
                        width: "100%",
                        maxWidth: "30px",
                        borderRadius: "2px 2px 0 0",
                      }}
                    />
                  </div>
                )
              })}
            </div>
          </div>
          <div className="border-l border-[#E2DDD6] pl-[18px] self-stretch flex flex-col justify-center gap-0.5 min-w-[96px]">
            <div className="text-[10.5px] text-[#9A968E]">{data.miniChart.trajectory}</div>
            <div className="font-display text-[22px] text-navy leading-[1.1]">
              {data.miniChart.values}
            </div>
            <div className="text-[12px] font-bold text-[#1A7340] flex items-center gap-1">
              <TrendingUp className="size-3.5" />
              {data.miniChart.growthText}
            </div>
          </div>
        </div>
      </div>

      {/* Sources toggle */}
      <div className="px-[26px] pb-1">
        <button
          onClick={() => setSourcesOpen(!sourcesOpen)}
          className="w-full flex items-center gap-2 cursor-pointer py-3.5 border-t border-[#F0EDE8] mt-3.5 bg-transparent border-x-0 border-b-0 text-left"
        >
          <Sparkles className="size-[17px] text-navy" />
          <span className="text-[13px] font-semibold text-ink">{data.citedSources.title}</span>
          <span className="text-[12px] text-[#9A968E]">{data.citedSources.subtitle}</span>
          <ChevronDown
            className={`size-[17px] text-[#9A968E] ml-auto transition-transform duration-200 ${sourcesOpen ? "rotate-180" : ""}`}
          />
        </button>

        {sourcesOpen && (
          <div className="pb-2">
            {data.citedSources.items.map((src, i) => (
              <div
                key={i}
                className="flex items-center gap-3 p-[12px_14px] border border-[#E2DDD6] rounded-[7px] mb-2 bg-white hover:shadow-sm transition-shadow cursor-pointer"
              >
                <span className="w-[30px] h-[30px] rounded-full bg-navy text-accent-gold flex items-center justify-center font-display text-[12px] shrink-0">
                  {src.initials}
                </span>
                <div className="flex-1 min-w-0">
                  <div className="text-[13px] font-semibold text-ink">{src.title}</div>
                  <div className="text-[11.5px] text-[#9A968E]">
                    {src.author} · {src.role} · {src.date} · {src.triangulated}
                  </div>
                </div>
                <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-[#1A7340] shrink-0">
                  <ShieldCheck className="size-3.5" />
                  Verified
                </span>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Trust footer */}
      <div className="flex items-center gap-3 px-[26px] py-3.5 bg-[rgba(26,115,64,.05)] border-t border-[rgba(26,115,64,.12)]">
        <ShieldCheck className="size-5 text-[#1A7340] shrink-0" />
        <div className="text-[12.5px] text-[#46433E] leading-[1.5]">
          {data.trustFooter.split("Nothing scraped")[0]}
          <strong className="text-ink">Nothing scraped, nothing AI-invented</strong>
          {" — " + data.trustFooter.split("— ")[1]}
        </div>
      </div>

      {/* Actions */}
      <div className="flex items-center gap-2.5 px-[26px] py-4 border-t border-[#F0EDE8] flex-wrap">
        <button
          onClick={onExport}
          className="flex items-center gap-1.5 bg-navy text-white border-none rounded-[6px] px-4 py-2.5 text-[13px] font-semibold cursor-pointer hover:bg-navy/90 transition-colors"
        >
          <FileOutput className="size-4" />
          {data.actions.exportText}
        </button>
        <button className="flex items-center gap-1.5 bg-white text-navy border border-[#C8C3BA] rounded-[6px] px-3.5 py-2.5 text-[13px] font-semibold cursor-pointer hover:bg-off-white transition-colors">
          <Bookmark className="size-4" />
          {data.actions.saveText}
        </button>
        <button className="flex items-center gap-1.5 bg-white text-navy border border-[#C8C3BA] rounded-[6px] px-3 py-2.5 text-[13px] font-semibold cursor-pointer hover:bg-off-white transition-colors">
          <ThumbsUp className="size-4" />
        </button>
        <span className="ml-auto text-[11.5px] text-[#9A968E] italic">
          {data.actions.disclaimer}
        </span>
      </div>
    </div>
  )
}