src/app/dashboard/page.tsx

'use client';
import { useEffect, useState } from 'react';

const INSIGHTS = [
  { title: 'Emotional Authority', desc: 'Wait for emotional clarity before major decisions. Your wave is the oracle.', gate: '6' },
  { title: 'Splenic Awareness', desc: 'In-the-moment intuition is your strongest signal. Trust the first impulse.', gate: '57' },
  { title: 'Root Pressure', desc: 'You transmit urgency to others. Ground before engaging.', gate: '52' },
];

const METRICS = [
  { label: 'System Load', value: 78, unit: '%', color: 'bg-violet-500' },
  { label: 'Signal Clarity', value: 91, unit: '%', color: 'bg-cyan-500' },
  { label: 'Coherence', value: 64, unit: '%', color: 'bg-amber-500' },
  { label: 'Safety', value: 85, unit: '%', color: 'bg-green-500' },
];

export default function DashboardPage() {
  const [user, setUser] = useState<Record<string,string> | null>(null);
  const [tick, setTick] = useState(0);

  useEffect(() => {
    const stored = localStorage.getItem('defrag_user');
    if (stored) setUser(JSON.parse(stored));
    const id = setInterval(() => setTick(t => t + 1), 3000);
    return () => clearInterval(id);
  }, []);

  const currentGate = 10 + (tick % 54);

  return (
    <div className="min-h-screen p-6 max-w-6xl mx-auto">
      {/* Header */}
      <div className="flex items-start justify-between mb-8">
        <div>
          <p className="text-xs font-mono text-slate-600 tracking-widest uppercase mb-1">System Status</p>
          <h1 className="text-3xl font-light text-slate-100">
            {user?.name ? `${user.name}'s` : 'Your'} Dashboard
          </h1>
          {user?.hdType && (
            <p className="text-sm text-violet-400 font-mono mt-1">{user.hdType} • {user.sunGate || 'Gate Unknown'}</p>
          )}
        </div>
        <div className="text-right">
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-green-950 border border-green-800 text-green-400 text-xs font-mono">
            <span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
            ONLINE
          </div>
          <p className="text-xs text-slate-700 font-mono mt-1">Gate {currentGate} active</p>
        </div>
      </div>

      {/* Metrics grid */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        {METRICS.map(m => (
          <div key={m.label} className="p-4 rounded-lg border border-[#1e1e2e] bg-[#0d0d14]">
            <p className="text-xs font-mono text-slate-600 uppercase tracking-wider mb-3">{m.label}</p>
            <div className="flex items-end gap-1 mb-2">
              <span className="text-3xl font-mono text-slate-100">{m.value}</span>
              <span className="text-slate-600 text-sm mb-0.5">{m.unit}</span>
            </div>
            <div className="h-1 bg-slate-900 rounded-full overflow-hidden">
              <div className={`h-full ${m.color} rounded-full transition-all duration-1000`} style={{ width: `${m.value}%` }} />
            </div>
          </div>
        ))}
      </div>

      {/* Insight cards */}
      <div className="mb-8">
        <p className="text-xs font-mono text-slate-600 tracking-widest uppercase mb-4">Active Insights</p>
        <div className="grid md:grid-cols-3 gap-4">
          {INSIGHTS.map(ins => (
            <div key={ins.title} className="p-5 rounded-lg border border-[#1e1e2e] bg-[#0d0d14] hover:border-violet-800/50 transition-colors">
              <div className="flex items-start justify-between mb-3">
                <span className="text-xs font-mono text-violet-400 tracking-wider">{ins.title}</span>
                <span className="text-xs font-mono text-slate-700 border border-slate-800 px-1.5 py-0.5 rounded">
                  G{ins.gate}
                </span>
              </div>
              <p className="text-sm text-slate-400 leading-relaxed">{ins.desc}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Quick nav */}
      <div className="grid md:grid-cols-3 gap-4">
        {[
          { href: '/relationships', label: 'Relational Map', sub: 'View connection geometry' },
          { href: '/oracle', label: 'Oracle Guidance', sub: 'Spoken AI insights' },
          { href: '/onboarding', label: 'Update Profile', sub: 'Recalibrate your node' },
        ].map(nav => (
          <a
            key={nav.href}
            href={nav.href}
            className="p-4 rounded-lg border border-[#1e1e2e] bg-[#0d0d14] hover:border-violet-800/50 flex items-center justify-between group transition-colors"
          >
            <div>
              <p className="text-sm text-slate-200 group-hover:text-violet-400 transition-colors">{nav.label}</p>
              <p className="text-xs text-slate-600">{nav.sub}</p>
            </div>
            <span className="text-slate-700 group-hover:text-violet-400 transition-colors">→</span>
          </a>
        ))}
      </div>
    </div>
  );
}