import React, { useState } from 'react';
import { 
  Tally3, 
  CircleDot, 
  Wind, 
  Ghost, 
  ShieldAlert, 
  Heart,
  Navigation2,
  Moon,
  Activity
} from 'lucide-react';

const OrbitApp = () => {
  const [orbitLevel, setOrbitLevel] = useState(1); // 1 (Inner) to 4 (Outer)
  const [status, setStatus] = useState('Resonant');

  const getOrbitColor = () => {
    if (orbitLevel === 1) return 'border-amber-500 shadow-amber-500/20';
    if (orbitLevel === 2) return 'border-emerald-500 shadow-emerald-500/20';
    if (orbitLevel === 3) return 'border-blue-500 shadow-blue-500/10';
    return 'border-slate-800 shadow-none';
  };

  const getOrbitLabel = () => {
    if (orbitLevel === 1) return 'Inner Orbit (High Frequency)';
    if (orbitLevel === 2) return 'Stable Orbit (Connection)';
    if (orbitLevel === 3) return 'Outer Orbit (Reflection)';
    return 'Stasis (Legacy)';
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 flex items-center justify-center p-6 font-sans">
      <div className="max-w-md w-full bg-slate-900 rounded-[3rem] border border-slate-800 p-8 shadow-2xl relative overflow-hidden">
        
        {/* The Connection Card */}
        <div className="relative z-10 text-center space-y-6">
          <div className="flex justify-between items-center mb-4">
            <Tally3 className="text-slate-600 rotate-90" />
            <span className="text-[10px] tracking-[0.3em] uppercase text-slate-500">Connection Mapping</span>
            <CircleDot className="text-slate-600" />
          </div>

          {/* User Profile in Orbit */}
          <div className="relative flex justify-center py-10">
            {/* Visual Orbit Rings */}
            <div className={`absolute inset-0 border border-slate-800 rounded-full transition-all duration-1000 ${orbitLevel <= 3 ? 'scale-100' : 'scale-75 opacity-0'}`} />
            <div className={`absolute inset-8 border border-slate-800 rounded-full transition-all duration-1000 ${orbitLevel <= 2 ? 'scale-100' : 'scale-75 opacity-0'}`} />
            <div className={`absolute inset-16 border border-slate-800 rounded-full transition-all duration-1000 ${orbitLevel <= 1 ? 'scale-100' : 'scale-75 opacity-0'}`} />

            <div className={`relative w-32 h-32 rounded-full border-4 transition-all duration-700 p-1 ${getOrbitColor()}`}>
              <div className="w-full h-full rounded-full bg-slate-800 overflow-hidden">
                {/* Fallback avatar */}
                <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-slate-700 to-slate-900">
                  <span className="text-2xl font-serif italic text-white">O</span>
                </div>
              </div>
              {/* Pulse Indicator */}
              <div className={`absolute -bottom-2 right-1/2 translate-x-1/2 px-3 py-1 rounded-full text-[8px] font-bold uppercase tracking-widest bg-slate-900 border ${orbitLevel === 1 ? 'border-amber-500 text-amber-500' : 'border-slate-700 text-slate-500'}`}>
                {status}
              </div>
            </div>
          </div>

          <div>
            <h2 className="text-2xl font-bold text-white mb-1">Olivia</h2>
            <p className="text-xs text-slate-500 uppercase tracking-widest">{getOrbitLabel()}</p>
          </div>

          {/* The Resonance Dial (Slider for Orbit) */}
          <div className="pt-6 space-y-4">
            <div className="flex justify-between items-center text-[10px] uppercase tracking-tighter text-slate-600">
              <span className={orbitLevel === 1 ? 'text-amber-500' : ''}>Resonance</span>
              <span className={orbitLevel === 4 ? 'text-blue-400' : ''}>Dampen</span>
            </div>
            <input 
              type="range" 
              min="1" max="4" 
              step="1"
              value={orbitLevel}
              onChange={(e) => {
                setOrbitLevel(parseInt(e.target.value));
                if (e.target.value > 1) setStatus('Cooling');
                else setStatus('Resonant');
              }}
              className="w-full h-1 bg-slate-800 appearance-none cursor-pointer accent-amber-500"
            />
          </div>

          {/* Action Area */}
          <div className="grid grid-cols-2 gap-4 pt-6">
            <button className="flex flex-col items-center justify-center gap-2 p-4 bg-slate-800/50 rounded-2xl hover:bg-slate-800 transition-colors border border-slate-700/50">
              <Wind size={20} className="text-amber-500" />
              <span className="text-[10px] uppercase font-bold tracking-widest">Send Seed</span>
            </button>
            <button className="flex flex-col items-center justify-center gap-2 p-4 bg-slate-800/50 rounded-2xl hover:bg-slate-800 transition-colors border border-slate-700/50">
              <Navigation2 size={20} className="text-blue-400" />
              <span className="text-[10px] uppercase font-bold tracking-widest">Share Path</span>
            </button>
          </div>

          {/* The Graceful Exit (Not a Block) */}
          <div className="pt-6">
            <button 
              className="group flex items-center justify-center gap-2 w-full text-slate-700 hover:text-slate-400 transition-colors"
              onClick={() => {
                setOrbitLevel(4);
                setStatus('Legacy');
              }}
            >
              <Moon size={14} className="group-hover:text-blue-500 transition-colors" />
              <span className="text-[10px] uppercase tracking-[0.2em]">Move to Legacy Reflection</span>
            </button>
          </div>

        </div>

        {/* Bottom Navigation (Haptic look) */}
        <div className="absolute bottom-4 left-8 right-8 flex justify-around items-center pt-4 border-t border-slate-800/50">
          <Activity size={18} className="text-amber-500" />
          <Ghost size={18} className="text-slate-700" />
          <Heart size={18} className="text-slate-700" />
        </div>

      </div>
    </div>
  );
};

export default OrbitApp;