"use client"

import * as React from "react"
import { X, Download, FileSpreadsheet, Presentation, FileText, ClipboardList, ShieldCheck, Unlock } from "lucide-react"

/* ─── Export Modal ─── */
interface ExportFormat { name: string; desc: string; icon: string; color: string; active?: boolean }
interface ExportModalData {
  title: string
  description: string
  formats: ExportFormat[]
  footerNote: string
  buttonText: string
}

const iconMap: Record<string, React.ReactNode> = {
  "ti-table": <FileSpreadsheet className="size-[22px]" />,
  "ti-presentation": <Presentation className="size-[22px]" />,
  "ti-file-type-pdf": <FileText className="size-[22px]" />,
  "ti-clipboard-text": <ClipboardList className="size-[22px]" />,
}

export function ExportModal({ data, onClose }: { data: ExportModalData; onClose: () => void }) {
  const [activeFormat, setActiveFormat] = React.useState(0)

  return (
    <div
      className="fixed inset-0 z-[900] flex items-center justify-center p-6"
      style={{ background: "rgba(10,13,20,.55)", backdropFilter: "blur(3px)" }}
      onClick={onClose}
    >
      <div
        className="bg-white rounded-[12px] w-full max-w-[480px] overflow-hidden shadow-[0_30px_80px_rgba(0,0,0,.4)]"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-5 border-b border-[#F0EDE8]">
          <div className="text-[16px] font-semibold text-ink flex items-center gap-2.5">
            <Download className="size-[19px] text-navy" />
            {data.title}
          </div>
          <button
            onClick={onClose}
            className="w-[30px] h-[30px] rounded-[6px] flex items-center justify-center text-[#9A968E] hover:text-ink hover:bg-off-white transition-colors bg-transparent border-none cursor-pointer"
          >
            <X className="size-[18px]" />
          </button>
        </div>

        <div className="px-6 py-[22px]">
          {/* Description */}
          <div className="text-[13px] text-[#6B6760] mb-4 leading-[1.55]">
            {data.description.split("fully sourced")[0]}
            <strong className="text-ink">fully sourced &amp; citation-ready</strong>.
          </div>

          {/* Format grid — 2 columns matching HTML */}
          <div className="grid grid-cols-2 gap-2.5 mb-[18px]">
            {data.formats.map((fmt, i) => (
              <button
                key={i}
                onClick={() => setActiveFormat(i)}
                className={`flex items-center gap-[11px] p-[15px] rounded-[8px] border cursor-pointer transition-all text-left ${
                  activeFormat === i
                    ? "border-[#1A7340] bg-[rgba(26,115,64,.05)]"
                    : "border-[#E2DDD6] bg-white hover:border-[#C8C3BA]"
                }`}
                style={{ borderWidth: "1.5px" }}
              >
                <span style={{ color: activeFormat === i ? fmt.color : "#0D2B55" }}>
                  {iconMap[fmt.icon] ?? <FileText className="size-[22px]" />}
                </span>
                <div>
                  <div className="text-[13.5px] font-semibold text-ink">{fmt.name}</div>
                  <div className="text-[11px] text-[#9A968E]">{fmt.desc}</div>
                </div>
              </button>
            ))}
          </div>

          {/* Footer note box */}
          <div className="flex items-center gap-2.5 bg-[#FAF8F4] border border-[#F0EDE8] rounded-[7px] px-[13px] py-[11px] mb-[18px]">
            <ShieldCheck className="size-[17px] text-gold shrink-0" />
            <span className="text-[11.5px] text-[#6B6760] leading-[1.45]">{data.footerNote}</span>
          </div>

          {/* Download button */}
          <button
            onClick={onClose}
            className="w-full bg-navy text-white rounded-[7px] py-[13px] text-[14px] font-semibold cursor-pointer hover:bg-navy/90 transition-colors border-none flex items-center justify-center gap-2"
          >
            <Download className="size-[17px]" />
            {data.buttonText}
          </button>
        </div>
      </div>
    </div>
  )
}

/* ─── Paywall Modal ─── */
interface PaywallModalData {
  title: string
  description: string
  benefits: string[]
  ctaText: string
  cancelText: string
}

export function PaywallModal({ data, onClose }: { data: PaywallModalData; onClose: () => void }) {
  return (
    <div
      className="fixed inset-0 z-[900] flex items-center justify-center p-6"
      style={{ background: "rgba(10,13,20,.6)", backdropFilter: "blur(3px)" }}
      onClick={onClose}
    >
      <div
        className="bg-white rounded-[12px] w-full max-w-[520px] overflow-hidden shadow-[0_30px_80px_rgba(0,0,0,.45)]"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Gradient header with dot pattern */}
        <div
          className="px-[28px] py-[26px] relative overflow-hidden"
          style={{ background: "linear-gradient(140deg,#0D2B55,#163d6e)" }}
        >
          <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,.06)_1px,transparent_1px)] bg-[size:18px_18px]" />
          {/* Close X */}
          <button
            onClick={onClose}
            className="absolute top-4 right-4 w-[30px] h-[30px] rounded-[6px] flex items-center justify-center text-white/60 hover:text-white cursor-pointer bg-transparent border-none z-10"
          >
            <X className="size-[18px]" />
          </button>
          <div className="relative">
            <div className="w-[46px] h-[46px] rounded-[10px] bg-[rgba(232,160,32,.18)] border border-[rgba(245,188,80,.4)] flex items-center justify-center mb-3.5">
              <Unlock className="size-6 text-accent-gold" />
            </div>
            <div className="font-display font-normal text-[24px] text-white leading-[1.2] mb-2">
              {data.title}
            </div>
            <p className="text-[13.5px] text-white/65 leading-[1.6] m-0">
              {data.description}
            </p>
          </div>
        </div>

        {/* Body */}
        <div className="px-[28px] py-[22px]">
          <div className="flex flex-col gap-[11px] mb-5">
            {data.benefits.map((b, i) => (
              <div key={i} className="flex gap-2.5 items-start text-[13.5px] text-[#46433E]">
                <ShieldCheck className="size-[17px] text-[#1A7340] shrink-0 mt-px" />
                {b}
              </div>
            ))}
          </div>

          <div className="flex gap-[11px] flex-wrap">
            <a href="/dataone#plans" className="flex-1 no-underline min-w-[160px]">
              <button className="w-full bg-[#E8A020] text-ink border-none rounded-[7px] py-[13px] text-[14px] font-bold cursor-pointer hover:bg-[#E8A020]/90 transition-colors">
                {data.ctaText}
              </button>
            </a>
            <button
              onClick={onClose}
              className="bg-white text-[#6B6760] border border-[#C8C3BA] rounded-[7px] px-[18px] py-[13px] text-[13.5px] font-semibold cursor-pointer hover:text-ink hover:border-[#9A968E] transition-colors"
            >
              {data.cancelText}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}