balance.js

import React, { useState, useMemo } from 'react';
import { 
  Briefcase, 
  Moon, 
  Heart, 
  User, 
  TrendingUp, 
  AlertCircle,
  Calendar,
  Activity,
  Zap,
  EyeOff,
  Target,
  BarChart3,
  ArrowUp,
  ArrowDown
} from 'lucide-react';
const EquilibriumV2 = () => {
  // Global styles to force smooth SVG path interpolation
  const animationStyles = `
    .ease-path {
      transition: d 0.7s cubic-bezier(0.4, 0, 0.2, 1), 
                  fill 0.7s ease, 
                  stroke 0.7s ease;
    }
    @keyframes pulse-ring {
      0% { transform: scale(.8); opacity: 0.5; }
      100% { transform: scale(1.2); opacity: 0; }
    }
    .impact-pulse {
      animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
  `;
  const pillarsConfig = [
    { id: 'work', name: 'Work', target: 35, color: '#f59e0b', icon: Briefcase },
    { id: 'sleep', name: 'Sleep', target: 35, color: '#6366f1', icon: Moon },
    { id: 'life', name: 'Life', target: 25, color: '#10b981', icon: User },
    { id: 'health', name: 'Health', target: 5, color: '#ec4899', icon: Heart },
  ];
  const weeklyData = [
    { day: 'Mon', date: 'Oct 12', actuals: { work: 35, sleep: 35, life: 25, health: 5 } }, 
    { day: 'Tue', date: 'Oct 13', actuals: { work: 30, sleep: 30, life: 20, health: 5 } }, 
    { day: 'Wed', date: 'Oct 14', actuals: { work: 50, sleep: 25, life: 5, health: 0 } },  
    { day: 'Thu', date: 'Oct 15', actuals: { work: 32, sleep: 35, life: 23, health: 5 } }, 
    { day: 'Fri', date: 'Oct 16', actuals: { work: 40, sleep: 30, life: 0, health: 0 } },  
    { day: 'Sat', date: 'Oct 17', actuals: { work: 10, sleep: 40, life: 40, health: 5 } }, 
    { day: 'Sun', date: 'Oct 18', actuals: { work: 20, sleep: 35, life: 30, health: 10 } }, 
  ];
  const dataWithMetrics = useMemo(() => {
    return weeklyData.map(dayData => {
      const trackedTotal = Object.values(dayData.actuals).reduce((a, b) => a + b, 0);
      const untracked = Math.max(0, 100 - trackedTotal);
      
      let totalAbsVariance = 0;
      pillarsConfig.forEach(p => {
        totalAbsVariance += Math.abs(dayData.actuals[p.id] - p.target);
      });
      totalAbsVariance += Math.abs(untracked - 0);
      const intention = 100 - (totalAbsVariance / 2);
      const completeness = trackedTotal;
      const netScore = (intention * (completeness / 100)); 
      return { ...dayData, intention, completeness, untracked, netScore };
    });
  }, []);
  const [selectedIndex, setSelectedIndex] = useState(2); 
  const activeDay = dataWithMetrics[selectedIndex];
  const stats = useMemo(() => {
    const processedPillars = pillarsConfig.map(p => {
      const actual = activeDay.actuals[p.id];
      const variance = actual - p.target;
      return {
        ...p,
        actual,
        variance,
        accuracy: (actual / p.target) * 100,
        isOutlier: Math.abs(variance) >= 10 
      };
    });
    const outliers = processedPillars.filter(p => p.isOutlier);
    if (activeDay.untracked >= 10) {
      outliers.push({ id: 'void', name: 'The Void', variance: activeDay.untracked, isOutlier: true, color: '#f43f5e', icon: EyeOff });
    }
    return {
      pillars: processedPillars,
      intention: activeDay.intention,
      completeness: activeDay.completeness,
      untracked: activeDay.untracked,
      netScore: activeDay.netScore,
      outliers: outliers
        .sort((a, b) => Math.abs(b.variance) - Math.abs(a.variance))
        .slice(0, 3)
    };
  }, [activeDay]);
  const RadarPieChart = ({ size = 320 }) => {
    const center = size / 2;
    const innerRingRadius = 60; 
    const targetRingRadius = 115; 
    const trackWidth = targetRingRadius - innerRingRadius;
    return (
      <div className="relative" style={{ width: size, height: size }}>
        <svg width={size} height={size} className="transform -rotate-90 overflow-visible">
          <circle cx={center} cy={center} r={targetRingRadius} fill="none" stroke="#334155" strokeWidth="1.5" strokeDasharray="4 4" />
          {[25, 50, 75].map(v => (
            <circle key={v} cx={center} cy={center} r={innerRingRadius + (v / 100) * trackWidth} fill="none" stroke="#1e293b" strokeWidth="1" strokeDasharray="4 4" />
          ))}
          {stats.pillars.map((p, i) => {
            const startAngle = (i * 90) * (Math.PI / 180);
            const endAngle = ((i + 1) * 90) * (Math.PI / 180);
            const visualAccuracy = Math.max(0.1, Math.min(p.accuracy, 150));
            const actualRadius = innerRingRadius + (visualAccuracy / 100) * trackWidth;
            
            const xOut1 = center + actualRadius * Math.cos(startAngle);
            const yOut1 = center + actualRadius * Math.sin(startAngle);
            const xOut2 = center + actualRadius * Math.cos(endAngle);
            const yOut2 = center + actualRadius * Math.sin(endAngle);
            const xIn1 = center + innerRingRadius * Math.cos(startAngle);
            const yIn1 = center + innerRingRadius * Math.sin(startAngle);
            const xIn2 = center + innerRingRadius * Math.cos(endAngle);
            const yIn2 = center + innerRingRadius * Math.sin(endAngle);
            const pathData = `M ${xIn1} ${yIn1} L ${xOut1} ${yOut1} A ${actualRadius} ${actualRadius} 0 0 1 ${xOut2} ${yOut2} L ${xIn2} ${yIn2} A ${innerRingRadius} ${innerRingRadius} 0 0 0 ${xIn1} ${yIn1} Z`;
            return (
              <g key={p.id}>
                <path d={pathData} fill={p.color} className="ease-path opacity-30" style={{ opacity: p.actual === 0 ? 0 : 0.3 }} />
                <path d={pathData} fill="none" stroke={p.color} strokeWidth="3" className="ease-path" style={{ opacity: p.actual === 0 ? 0 : 1 }} />
                {p.isOutlier && p.actual > 0 && (
                  <circle cx={xOut1 + (xOut2-xOut1)/2} cy={yOut1 + (yOut2-yOut1)/2} r="4" fill={p.color} className="impact-pulse" />
                )}
              </g>
            );
          })}
        </svg>
        <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
          <div className="bg-slate-950/90 backdrop-blur-md rounded-full w-28 h-28 border border-slate-800 flex flex-col items-center justify-center shadow-2xl">
            <span className="text-[9px] font-bold text-indigo-400 uppercase tracking-[0.2em] mb-0.5">Net Score</span>
            <span className="text-4xl font-black text-white tabular-nums">{stats.netScore.toFixed(0)}%</span>
            <div className="flex gap-2 mt-1 opacity-50 text-[8px] font-mono text-slate-400">
              <span>I:{stats.intention.toFixed(0)}%</span>
              <span>C:{stats.completeness.toFixed(0)}%</span>
            </div>
          </div>
        </div>
      </div>
    );
  };
  const InteractiveTrendChart = ({ data, selectedIndex, onSelect }) => {
    const width = 800;
    const height = 120;
    const paddingX = 60;
    const paddingY = 30;
    const minScore = 0; 
    const maxScore = 100;
    const points = data.map((d, i) => {
      const x = (i / (data.length - 1)) * (width - paddingX * 2) + paddingX;
      const y = height - ((d.netScore - minScore) / (maxScore - minScore)) * (height - paddingY * 2) - paddingY;
      const yBarTop = height - ((d.completeness - minScore) / (maxScore - minScore)) * (height - paddingY * 2) - paddingY;
      return { x, y, yBarTop, ...d };
    });
    const pathData = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
    return (
      <div className="w-full bg-slate-900/40 border border-slate-800 rounded-[2rem] p-6 mt-8">
        <div className="flex justify-between items-center mb-4 px-4">
          <h3 className="text-[10px] font-bold text-slate-500 uppercase tracking-widest flex items-center gap-2">
            <Activity size={14} className="text-indigo-400" /> Equilibrium Trend Analysis
          </h3>
          
          {/* Chart Legend */}
          <div className="flex items-center gap-6">
            <div className="flex items-center gap-2">
              <div className="w-2.5 h-2.5 rounded-full bg-indigo-500 shadow-[0_0_8px_rgba(99,102,241,0.5)]"></div>
              <span className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Net Score</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-2.5 h-4 rounded-sm bg-slate-800 border border-slate-700"></div>
              <span className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Completeness</span>
            </div>
          </div>
        </div>
        <svg width="100%" height={height} viewBox={`0 0 ${width} ${height}`} className="overflow-visible">
          <line x1={paddingX} y1={paddingY} x2={width - paddingX} y2={paddingY} stroke="#1e293b" strokeWidth="1" strokeDasharray="4 4" />
          <path d={pathData} fill="none" stroke="#6366f1" strokeWidth="3" strokeLinecap="round" className="transition-all duration-700 opacity-20" />
          {points.map((p, i) => {
            const isSelected = selectedIndex === i;
            const barHeight = Math.max(0, (height - paddingY) - p.yBarTop);
            return (
              <g key={i} className="cursor-pointer group" onClick={() => onSelect(i)}>
                <rect x={p.x - 40} y={0} width={80} height={height} fill="transparent" />
                <rect x={p.x - 12} y={p.yBarTop} width={24} height={barHeight} rx={4} fill={isSelected ? "rgba(255, 255, 255, 0.08)" : "rgba(255, 255, 255, 0.03)"} className="transition-all duration-700" />
                <circle cx={p.x} cy={p.y} r={isSelected ? 6 : 4} fill={isSelected ? "#818cf8" : "#334155"} className="transition-all duration-700" />
                <text x={p.x} y={height - 5} fill={isSelected ? "#fff" : "#475569"} fontSize="10" fontWeight={isSelected ? "bold" : "normal"} textAnchor="middle">{p.day}</text>
                {isSelected && (
                  <g className="animate-in fade-in zoom-in duration-300">
                    <text x={p.x} y={p.y - 12} fill="#818cf8" fontSize="9" fontWeight="black" textAnchor="middle">{p.netScore.toFixed(0)}%</text>
                  </g>
                )}
              </g>
            );
          })}
        </svg>
      </div>
    );
  };
  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 p-8 font-sans">
      <style>{animationStyles}</style>
      <div className="max-w-6xl mx-auto">
        <header className="flex justify-between items-start mb-10">
          <div>
            <h1 className="text-3xl font-black text-white uppercase tracking-tighter italic">Equilibrium V2</h1>
            <p className="text-slate-500 text-xs mt-1 font-mono">Intent vs. Actual, to Time Accounted</p>
          </div>
          <div className="flex gap-4">
            <div className="bg-slate-900 border border-slate-800 px-4 py-2 rounded-2xl flex items-center gap-3">
               <EyeOff size={16} className="text-rose-400" />
               <div className="flex flex-col">
                 <span className="text-[10px] text-slate-500 font-bold uppercase">Completeness</span>
                 <span className="text-sm font-black text-slate-200">{stats.completeness}%</span>
               </div>
            </div>
            <div className="bg-indigo-600 px-4 py-2 rounded-2xl flex items-center gap-3 shadow-lg shadow-indigo-500/20">
               <Target size={16} className="text-white" />
               <div className="flex flex-col">
                 <span className="text-[10px] text-indigo-200 font-bold uppercase">Intention</span>
                 <span className="text-sm font-black text-white">{stats.intention.toFixed(0)}%</span>
               </div>
            </div>
          </div>
        </header>
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
          <div className="lg:col-span-8 flex flex-col">
            <div className="bg-slate-900/40 border border-slate-800 rounded-[2.5rem] p-12 relative overflow-hidden flex-1">
               <div className="grid grid-cols-1 md:grid-cols-2 items-center gap-12 h-full">
                 <RadarPieChart />
                 <div className="space-y-6">
                    <h3 className="text-white font-bold text-sm uppercase tracking-widest flex items-center gap-2"><TrendingUp size={16} className="text-indigo-400" /> Displacement Analysis</h3>
                    {stats.pillars.map(p => (
                      <div key={p.id} className="space-y-2">
                        <div className="flex justify-between items-end text-[10px] font-bold uppercase tracking-tighter">
                          <div className="flex items-center gap-2">
                            <span className="text-slate-500">{p.name}</span>
                            {p.isOutlier && (
                              <span className="px-1.5 py-0.5 rounded-sm bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 text-[8px] animate-pulse">IMPACT</span>
                            )}
                          </div>
                          <span className={p.variance > 0 ? 'text-amber-400' : 'text-rose-400'}>{p.actual}% ({p.variance > 0 ? '+' : ''}{p.variance}%)</span>
                        </div>
                        <div className="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden relative">
                          <div className="absolute inset-y-0 left-0 bg-white/5" style={{ width: `${p.target}%` }} />
                          <div className="h-full rounded-full transition-all duration-1000" style={{ width: `${p.actual}%`, backgroundColor: p.color }} />
                        </div>
                      </div>
                    ))}
                    {stats.untracked > 0 && (
                      <div className="pt-4 border-t border-slate-800">
                         <div className="flex justify-between items-end text-[10px] font-bold uppercase tracking-tighter">
                          <span className="text-rose-500">The Void (Untracked)</span>
                          <span className="text-rose-500">+{stats.untracked}% Variance</span>
                        </div>
                        <div className="h-1 w-full bg-rose-950/20 rounded-full mt-2 overflow-hidden">
                           <div className="h-full bg-rose-500/40" style={{ width: `${stats.untracked}%` }} />
                        </div>
                      </div>
                    )}
                 </div>
               </div>
            </div>
          </div>
          <div className="lg:col-span-4 h-full">
            <section className="bg-slate-900/40 border border-slate-800 p-6 rounded-3xl h-full flex flex-col">
              <h3 className="text-white font-bold mb-6 flex items-center gap-2"><BarChart3 size={18} className="text-indigo-400" />Areas of Impact</h3>
              <div className="flex flex-col gap-3 flex-1 overflow-y-auto no-scrollbar">
                {stats.outliers.length > 0 ? (
                  stats.outliers.map((p) => (
                    <div key={p.id} className={`p-4 rounded-2xl border transition-all ${p.variance > 0 ? 'bg-amber-500/5 border-amber-500/10' : 'bg-rose-500/5 border-rose-500/10'}`}>
                      <div className="flex items-center justify-between mb-2">
                        <div className="flex items-center gap-3">
                          <div className="p-2 rounded-lg" style={{ backgroundColor: `${p.color}15`, color: p.color }}>
                            <p.icon size={16} />
                          </div>
                          <span className="text-sm font-bold text-white">{p.name}</span>
                        </div>
                        <div className={`text-xs font-black px-2 py-0.5 rounded flex items-center gap-1 ${p.variance > 0 ? 'bg-amber-500/20 text-amber-400' : 'bg-rose-500/20 text-rose-400'}`}>
                          {p.variance > 0 ? <ArrowUp size={12}/> : <ArrowDown size={12}/>}
                          {Math.abs(p.variance)}%
                        </div>
                      </div>
                      <p className="text-[11px] text-slate-500 leading-relaxed italic">
                        {p.id === 'void' 
                          ? "Significant information leakage. This volume of untracked time is the primary driver of score degradation."
                          : p.variance > 0 
                            ? `Pillar overrun. The creation volume here is cannibalizing ${stats.pillars.find(u => u.variance < 0)?.name || 'other'} resources.`
                            : `Pillar deficit. High-risk zone for long-term imbalance and goal non-completion.`}
                      </p>
                    </div>
                  ))
                ) : (
                  <div className="p-6 rounded-2xl bg-indigo-500/5 border border-indigo-500/10 flex flex-col items-center text-center">
                    <Activity className="text-indigo-400/50 mb-3" size={32} />
                    <div className="text-sm font-bold text-white mb-1">Steady Equilibrium</div>
                    <p className="text-xs text-slate-500">No major outliers detected. Behavior is tightly aligned with intention.</p>
                  </div>
                )}
              </div>
            </section>
          </div>
        </div>
        <InteractiveTrendChart data={dataWithMetrics} selectedIndex={selectedIndex} onSelect={setSelectedIndex} />
      </div>
    </div>
  );
};
export default EquilibriumV2;