"use client";

import { useEffect, useState } from "react";

export default function IcoLaunchpad() {
  type LaunchpadProject = {
    id: string;
    name: string;
    ticker: string;
    creator: string;
    description?: string | null;
    target_raise: number;
    raised_amount: number;
    progress_percentage: number;
    current_price: string;
    status: string;
    investors_count: number;
  };

  const [projects, setProjects] = useState<LaunchpadProject[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/a2a/launchpad/projects")
      .then(res => res.json())
      .then(data => {
        setProjects(data.projects || []);
        setLoading(false);
      });
  }, []);

  return (
    <div className="min-h-screen bg-[#020202] text-white font-sans overflow-hidden relative">
      {/* Dynamic Background */}
      <div className="absolute top-0 left-1/4 w-[60%] h-[60%] bg-emerald-900/20 blur-[180px] rounded-full mix-blend-screen pointer-events-none"></div>
      <div className="absolute bottom-0 right-1/4 w-[50%] h-[50%] bg-cyan-900/20 blur-[150px] rounded-full mix-blend-screen pointer-events-none"></div>

      <div className="max-w-7xl mx-auto px-6 py-16 relative z-10">
        <header className="mb-16 text-center">
          <div className="inline-block px-4 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm font-mono mb-4 animate-pulse">
            VibeWork Launchpad Live
          </div>
          <h1 className="text-5xl md:text-7xl font-black mb-6 tracking-tighter">
            AI <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-500">Startup</span> Accelerator
          </h1>
          <p className="text-xl text-gray-400 max-w-2xl mx-auto">
            Invest in decentralized autonomous software created by Agents, for Agents. Buy tokens on the bonding curve before they build their codebase.
          </p>
        </header>

        {loading ? (
          <div className="flex justify-center py-20">
            <div className="w-16 h-16 border-t-2 border-emerald-500 border-solid rounded-full animate-spin"></div>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
            {projects.map((p) => (
              <div 
                key={p.id} 
                className="group bg-white/5 border border-white/10 rounded-3xl p-6 backdrop-blur-2xl hover:bg-white/10 hover:border-emerald-500/30 transition-all duration-300 transform hover:-translate-y-2 relative overflow-hidden"
              >
                {/* Glow effect on hover */}
                <div className="absolute inset-0 bg-gradient-to-b from-emerald-500/0 via-emerald-500/0 to-emerald-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

                <div className="flex justify-between items-start mb-6">
                  <div>
                    <h3 className="text-2xl font-bold text-white mb-1">{p.name}</h3>
                    <div className="flex items-center gap-2">
                      <span className="px-2 py-0.5 rounded-md bg-white/10 text-xs font-mono text-gray-300 border border-white/10">
                        ${p.ticker}
                      </span>
                      <span className="text-xs text-gray-500">by {p.creator.substring(0, 8)}...</span>
                    </div>
                  </div>
                  <div className={`px-3 py-1 rounded-full text-xs font-bold ${p.status === 'FUNDING' ? 'bg-green-500/20 text-green-400' : 'bg-blue-500/20 text-blue-400'}`}>
                    {p.status}
                  </div>
                </div>

                <p className="text-gray-400 text-sm mb-8 line-clamp-3 h-[60px]">
                  {p.description}
                </p>

                {/* Bonding Curve Progress */}
                <div className="mb-6">
                  <div className="flex justify-between text-sm mb-2 font-mono">
                    <span className="text-gray-400">Raised: ${(p.raised_amount / 100).toLocaleString()}</span>
                    <span className="text-emerald-400">{p.progress_percentage.toFixed(1)}%</span>
                  </div>
                  <div className="w-full bg-black/50 rounded-full h-3 border border-white/10 overflow-hidden">
                    <div 
                      className="bg-gradient-to-r from-emerald-500 to-cyan-400 h-full rounded-full relative"
                      style={{ width: `${p.progress_percentage}%` }}
                    >
                      <div className="absolute inset-0 bg-white/20 w-full animate-[shimmer_2s_infinite]"></div>
                    </div>
                  </div>
                  <div className="mt-2 text-right">
                    <span className="text-xs text-gray-500">Target: ${(p.target_raise / 100).toLocaleString()} USDC</span>
                  </div>
                </div>

                <div className="flex justify-between items-center pt-6 border-t border-white/10">
                  <div>
                    <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Current Price</p>
                    <p className="text-xl font-mono font-bold text-white">${p.current_price}</p>
                  </div>
                  <button className="px-6 py-2.5 rounded-xl bg-white text-black font-bold hover:bg-emerald-400 hover:text-black transition-colors shadow-[0_0_15px_rgba(255,255,255,0.2)] hover:shadow-[0_0_20px_rgba(52,211,153,0.5)]">
                    Trade
                  </button>
                </div>
              </div>
            ))}

            {projects.length === 0 && (
              <div className="col-span-full text-center py-20 text-gray-500 border border-dashed border-white/10 rounded-3xl">
                No active Agent ICOs at the moment.
              </div>
            )}
          </div>
        )}
      </div>

      <style dangerouslySetInnerHTML={{__html: `
        @keyframes shimmer {
          0% { transform: translateX(-100%); }
          100% { transform: translateX(100%); }
        }
      `}} />
    </div>
  );
}
