import React, { useState } from 'react';
import { Users, Award, Flame, Gift, ShieldCheck, Layers, PieChart, Info, CheckCircle2, TrendingUp, Sparkles, HelpCircle, FileText } from 'lucide-react';
import { TOKEN_DISTRIBUTION, TOKEN_INFO, TOKENOMICS_VERSION } from '../config';

interface TokenomicsDashboardProps {
  className?: string;
}

export const TokenomicsDashboard: React.FC<TokenomicsDashboardProps> = ({ className = '' }) => {
  const [activeSegment, setActiveSegment] = useState<string | null>(null);

  const iconMap: Record<string, React.ElementType> = {
    Users: Users,
    Award: Award,
    Flame: Flame,
    Gift: Gift,
    ShieldCheck: ShieldCheck,
    Layers: Layers
  };

  const selectedItem = TOKEN_DISTRIBUTION.find((item) => item.id === activeSegment) || TOKEN_DISTRIBUTION[0];

  // Calculate SVG Donut chart paths
  let cumulativeAngle = 0;
  const radius = 80;
  const strokeWidth = 26;
  const center = 110;
  const circumference = 2 * Math.PI * radius;

  return (
    <div id="tokenomics-dashboard" className={`w-full ${className}`}>
      
      {/* Dashboard Section Header */}
      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8 pb-6 border-b border-slate-200 dark:border-white/10">
        <div>
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#FF8C32]/10 text-[#FF8C32] border border-[#FF8C32]/30 text-xs font-bold uppercase tracking-wider mb-2">
            <PieChart className="w-3.5 h-3.5" />
            <span>BM ALPHA TOKENOMICS {TOKENOMICS_VERSION}</span>
          </div>
          <h3 className="font-display text-2xl sm:text-3xl font-black text-slate-900 dark:text-white tracking-tight flex items-center flex-wrap gap-2.5">
            <span>PROPOSED TOKEN DISTRIBUTION</span>
            <span className="text-xs font-mono font-bold px-2.5 py-0.5 rounded-md bg-[#00D7FF]/15 text-[#00A6DB] dark:text-[#00D7FF] border border-[#00D7FF]/30">
              {TOKENOMICS_VERSION}
            </span>
          </h3>
          <p className="text-slate-600 dark:text-gray-400 text-sm mt-1">
            Total Proposed Supply: <strong className="text-slate-900 dark:text-white font-mono">{TOKEN_INFO.totalSupply}</strong>
          </p>
        </div>

        {/* Total Supply & Version Badge */}
        <div className="flex items-center gap-3 p-3 rounded-xl bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 self-start md:self-auto">
          <div className="w-10 h-10 rounded-lg bg-gradient-to-tr from-[#FF8C32] to-[#00D7FF] flex items-center justify-center p-0.5 shadow-md">
            <div className="w-full h-full bg-white dark:bg-[#0a0c14] rounded-[6px] flex items-center justify-center">
              <Sparkles className="w-4 h-4 text-[#FF8C32]" />
            </div>
          </div>
          <div>
            <div className="flex items-center gap-2">
              <span className="text-[10px] uppercase font-bold text-slate-500 dark:text-gray-400 tracking-wider">
                Total Proposed Pool
              </span>
              <span className="text-[9px] font-mono font-black text-[#FF8C32]">
                {TOKENOMICS_VERSION}
              </span>
            </div>
            <div className="font-mono text-sm font-black text-slate-900 dark:text-white">
              10,000,000,000 BMALPHA
            </div>
          </div>
        </div>
      </div>

      {/* Main Visualizer: Donut Chart & Active Allocation Spotlight */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center p-6 sm:p-8 rounded-2xl bg-slate-50/80 dark:bg-white/[0.03] border border-slate-200 dark:border-white/10 mb-10">
        
        {/* Donut Chart Visualizer */}
        <div className="lg:col-span-5 flex flex-col items-center justify-center relative">
          <div className="relative w-[230px] h-[230px] sm:w-[260px] sm:h-[260px]">
            <svg viewBox="0 0 220 220" className="w-full h-full transform -rotate-90">
              {TOKEN_DISTRIBUTION.map((item) => {
                const strokeDasharray = `${(item.percentage / 100) * circumference} ${circumference}`;
                const strokeDashoffset = -((cumulativeAngle / 100) * circumference);
                cumulativeAngle += item.percentage;
                const isHovered = activeSegment === item.id;

                return (
                  <circle
                    key={item.id}
                    cx={center}
                    cy={center}
                    r={radius}
                    fill="transparent"
                    stroke={item.color}
                    strokeWidth={isHovered ? strokeWidth + 6 : strokeWidth}
                    strokeDasharray={strokeDasharray}
                    strokeDashoffset={strokeDashoffset}
                    strokeLinecap="butt"
                    className="cursor-pointer transition-all duration-300 hover:opacity-100"
                    style={{
                      opacity: activeSegment ? (isHovered ? 1 : 0.4) : 0.9,
                      filter: isHovered ? `drop-shadow(0 0 12px ${item.color}80)` : 'none',
                    }}
                    onMouseEnter={() => setActiveSegment(item.id)}
                    onMouseLeave={() => setActiveSegment(null)}
                  />
                );
              })}
            </svg>

            {/* Donut Center Dynamic Details */}
            <div className="absolute inset-0 flex flex-col items-center justify-center text-center p-4 pointer-events-none">
              <span className="text-[10px] font-bold uppercase tracking-wider text-slate-500 dark:text-gray-400">
                {selectedItem ? selectedItem.category : 'Hover to Explore'}
              </span>
              <span className="font-display font-black text-3xl sm:text-4xl text-slate-900 dark:text-white mt-0.5">
                {selectedItem.percentage}%
              </span>
              <span className="font-mono text-xs font-bold text-[#FF8C32] dark:text-[#FFA843]">
                {selectedItem.shortAmount}
              </span>
            </div>
          </div>

          <p className="text-[11px] text-slate-500 dark:text-gray-400 mt-4 text-center">
            Tap or hover any slice to inspect token amounts & purpose
          </p>
        </div>

        {/* Active Allocation Detail Card */}
        <div className="lg:col-span-7 flex flex-col justify-between h-full space-y-4">
          <div className="p-5 sm:p-6 rounded-2xl bg-white dark:bg-[#161b2b] border border-slate-200 dark:border-white/10 shadow-md">
            <div className="flex items-center justify-between gap-3 mb-4">
              <div className="flex items-center gap-3">
                <div
                  className="w-10 h-10 rounded-xl flex items-center justify-center text-white shadow-sm"
                  style={{ backgroundColor: selectedItem.color }}
                >
                  {React.createElement(iconMap[selectedItem.iconName] || Users, { className: 'w-5 h-5 text-white' })}
                </div>
                <div>
                  <h4 className="font-display font-black text-xl text-slate-900 dark:text-white">
                    {selectedItem.category}
                  </h4>
                  <span className="text-xs font-mono font-bold text-slate-500 dark:text-gray-400">
                    {selectedItem.amount} BM Alpha Tokens
                  </span>
                </div>
              </div>

              <div
                className="px-3.5 py-1.5 rounded-full font-display font-black text-base border"
                style={{
                  color: selectedItem.color,
                  borderColor: `${selectedItem.color}50`,
                  backgroundColor: `${selectedItem.color}15`,
                }}
              >
                {selectedItem.percentage}%
              </div>
            </div>

            {/* Purpose Highlight */}
            <div className="pt-3 border-t border-slate-200 dark:border-white/5">
              <div className="text-[10px] font-bold uppercase tracking-widest text-slate-500 dark:text-gray-400 mb-1 flex items-center gap-1.5">
                <Info className="w-3.5 h-3.5" />
                PURPOSE OF THIS ALLOCATION
              </div>
              <p className="text-slate-800 dark:text-gray-200 text-sm sm:text-base font-medium leading-relaxed">
                {selectedItem.purpose}
              </p>
            </div>

            {/* Quick Metrics Bar */}
            <div className="grid grid-cols-2 gap-3 mt-4 pt-3 border-t border-slate-200 dark:border-white/5 text-xs">
              <div className="p-2.5 rounded-lg bg-slate-50 dark:bg-white/5">
                <div className="text-[10px] text-slate-500 dark:text-gray-400 font-medium">Exact Allocation</div>
                <div className="font-mono font-bold text-slate-900 dark:text-white mt-0.5">{selectedItem.amount}</div>
              </div>
              <div className="p-2.5 rounded-lg bg-slate-50 dark:bg-white/5">
                <div className="text-[10px] text-slate-500 dark:text-gray-400 font-medium">Share of 10B Total</div>
                <div className="font-mono font-bold text-slate-900 dark:text-white mt-0.5">{selectedItem.shortAmount} ({selectedItem.percentage}%)</div>
              </div>
            </div>
          </div>

          {/* Quick Segment Selector Pills */}
          <div className="flex flex-wrap gap-2 pt-2">
            {TOKEN_DISTRIBUTION.map((item) => (
              <button
                key={item.id}
                type="button"
                onClick={() => setActiveSegment(item.id)}
                onMouseEnter={() => setActiveSegment(item.id)}
                className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all cursor-pointer flex items-center gap-2 border ${
                  activeSegment === item.id
                    ? 'bg-slate-900 text-white dark:bg-white dark:text-black border-transparent shadow-md'
                    : 'bg-white dark:bg-white/5 text-slate-700 dark:text-gray-300 border-slate-200 dark:border-white/10 hover:border-slate-400'
                }`}
              >
                <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: item.color }} />
                <span>{item.category}</span>
                <span className="text-[10px] opacity-75 font-mono">({item.percentage}%)</span>
              </button>
            ))}
          </div>
        </div>

      </div>

      {/* Multi-Segment Allocation Bar */}
      <div className="mb-10">
        <div className="flex items-center justify-between text-xs font-bold uppercase tracking-wider text-slate-600 dark:text-gray-300 mb-2">
          <span>Overall Allocation Breakdown</span>
          <span className="font-mono text-[#00A6DB] dark:text-[#00D7FF]">100% Fully Accounted</span>
        </div>
        <div className="h-4 w-full rounded-full bg-slate-200 dark:bg-white/5 overflow-hidden flex border border-slate-300 dark:border-white/10 shadow-inner">
          {TOKEN_DISTRIBUTION.map((item) => (
            <div
              key={item.id}
              style={{ width: `${item.percentage}%`, backgroundColor: item.color }}
              className="h-full cursor-pointer hover:opacity-80 transition-all relative group"
              onMouseEnter={() => setActiveSegment(item.id)}
              onClick={() => setActiveSegment(item.id)}
              title={`${item.category}: ${item.percentage}% (${item.shortAmount})`}
            />
          ))}
        </div>
      </div>

      {/* 6 Allocation Cards Grid */}
      <div className="mb-12">
        <h4 className="font-display text-lg font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
          <TrendingUp className="w-4 h-4 text-[#FF8C32]" />
          <span>PROPOSED ALLOCATION BREAKDOWN</span>
        </h4>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
          {TOKEN_DISTRIBUTION.map((item) => {
            const Icon = iconMap[item.iconName] || Users;
            const isSelected = activeSegment === item.id;

            return (
              <div
                key={item.id}
                id={`card-${item.id}`}
                onMouseEnter={() => setActiveSegment(item.id)}
                onClick={() => setActiveSegment(item.id)}
                className={`group p-5 rounded-2xl bg-white dark:bg-[#161b2b] border transition-all duration-300 cursor-pointer shadow-sm hover:shadow-md ${
                  isSelected
                    ? 'border-[#FF8C32] dark:border-[#00D7FF] shadow-[0_0_20px_rgba(255,140,50,0.2)] transform -translate-y-1'
                    : 'border-slate-200 dark:border-white/10 hover:border-slate-300 dark:hover:border-white/20'
                }`}
              >
                {/* Top Bar: Icon, Title & Percentage */}
                <div className="flex items-start justify-between gap-3 mb-3">
                  <div className="flex items-center gap-3">
                    <div
                      className="w-10 h-10 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0"
                      style={{ backgroundColor: item.color }}
                    >
                      <Icon className="w-5 h-5 text-white" />
                    </div>
                    <div>
                      <h5 className="font-display font-black text-base text-slate-900 dark:text-white group-hover:text-[#FF8C32] transition-colors">
                        {item.category}
                      </h5>
                      <span className="font-mono text-xs font-bold text-slate-500 dark:text-gray-400">
                        {item.shortAmount}
                      </span>
                    </div>
                  </div>

                  <span
                    className="font-display font-black text-xl px-2.5 py-0.5 rounded-full border"
                    style={{
                      color: item.color,
                      borderColor: `${item.color}40`,
                      backgroundColor: `${item.color}15`,
                    }}
                  >
                    {item.percentage}%
                  </span>
                </div>

                {/* Progress bar inside card */}
                <div className="w-full bg-slate-100 dark:bg-white/5 h-2 rounded-full overflow-hidden my-3">
                  <div
                    className="h-full rounded-full transition-all duration-500"
                    style={{ width: `${item.percentage * 2.5}%`, backgroundColor: item.color }}
                  />
                </div>

                {/* Exact token amount */}
                <div className="flex items-center justify-between text-xs font-mono text-slate-600 dark:text-gray-400 py-1.5 border-b border-slate-100 dark:border-white/5">
                  <span className="text-[11px] font-sans font-medium text-slate-500">Token Count:</span>
                  <span className="font-bold text-slate-900 dark:text-white">{item.amount}</span>
                </div>

                {/* Purpose text */}
                <p className="mt-2.5 text-xs text-slate-600 dark:text-gray-300 leading-relaxed font-medium">
                  {item.purpose}
                </p>
              </div>
            );
          })}
        </div>
      </div>

      {/* Purpose of Each Allocation Section: Deep-Dive Accordion / Guidance */}
      <div className="p-6 sm:p-8 rounded-2xl bg-gradient-to-br from-slate-50 via-white to-slate-50 dark:from-[#161b2b] dark:via-[#161b2b]/80 dark:to-[#0a0c14] border border-slate-200 dark:border-white/10 shadow-lg">
        
        <div className="flex items-center gap-3 mb-6 pb-4 border-b border-slate-200 dark:border-white/10">
          <div className="w-10 h-10 rounded-xl bg-[#00D7FF]/15 text-[#00A6DB] dark:text-[#00D7FF] border border-[#00D7FF]/30 flex items-center justify-center shrink-0">
            <CheckCircle2 className="w-5 h-5" />
          </div>
          <div>
            <h4 className="font-display font-black text-xl text-slate-900 dark:text-white">
              PURPOSE OF EACH ALLOCATION
            </h4>
            <p className="text-xs sm:text-sm text-slate-600 dark:text-gray-400 font-medium">
              How the proposed 10B supply strategically supports long-term growth and decentralization
            </p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {TOKEN_DISTRIBUTION.map((item) => (
            <div
              key={`purpose-${item.id}`}
              className="p-4 rounded-xl bg-white dark:bg-white/5 border border-slate-200 dark:border-white/5 flex items-start gap-3.5 hover:border-slate-300 dark:hover:border-white/15 transition-colors"
            >
              <span
                className="w-3 h-3 rounded-full mt-1 shrink-0"
                style={{ backgroundColor: item.color }}
              />
              <div>
                <div className="flex items-center gap-2">
                  <span className="font-display font-black text-sm text-slate-900 dark:text-white">
                    {item.category}
                  </span>
                  <span
                    className="text-[10px] font-mono font-bold px-2 py-0.5 rounded-full"
                    style={{
                      color: item.color,
                      backgroundColor: `${item.color}15`,
                    }}
                  >
                    {item.percentage}% ({item.shortAmount})
                  </span>
                </div>
                <p className="text-xs sm:text-sm text-slate-600 dark:text-gray-300 mt-1 leading-relaxed">
                  {item.purpose}
                </p>
              </div>
            </div>
          ))}
        </div>

        {/* Version Governance Note */}
        <div className="mt-6 pt-4 border-t border-slate-200 dark:border-white/5 flex flex-col sm:flex-row sm:items-center justify-between gap-2 text-[11px] text-slate-500 dark:text-gray-400">
          <div className="flex items-center gap-2">
            <span className="w-1.5 h-1.5 rounded-full bg-[#FF8C32]" />
            <span><strong>Specification:</strong> BM Alpha Tokenomics {TOKENOMICS_VERSION}</span>
          </div>
          <div>
            Proposed distribution subject to community input & future governance iterations.
          </div>
        </div>

      </div>

    </div>
  );
};
