'use client';

import React, { useState, useEffect } from 'react';
import {
  Terminal,
  Brain as BrainIcon,
  Download,
  Database,
  ShieldCheck,
  Zap,
  ChevronRight,
  Activity,
  CheckCircle2,
  FolderOpen,
  ArrowRight,
  Check,
  Command,
  Settings,
  Link as LinkIcon
} from 'lucide-react';
import Link from 'next/link';

const GitHubIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.43.372.823 1.102.823 2.222 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
  </svg>
);



export default function LandingPage() {
  const [isLoading, setIsLoading] = useState(true);
  const [toast, setToast] = useState<{ message: string; visible: boolean }>({ message: '', visible: false });

  const showToast = (message: string) => {
    setToast({ message, visible: true });
    setTimeout(() => setToast({ message: '', visible: false }), 3000);
  };

  useEffect(() => {
    setIsLoading(false);
  }, []);

  const API_BASE = process.env.NEXT_PUBLIC_APP_URL
    ? process.env.NEXT_PUBLIC_APP_URL
    : (typeof window !== 'undefined' && window.location.hostname === 'localhost'
      ? 'http://localhost:8000'
      : '');

  const handleDownload = () => {
    window.location.href = `${API_BASE}/download/setup`;
  };

  return (
    <div className="min-h-screen bg-[#0a0a0a] text-white selection:bg-white/20 font-outfit">
      {/* Structural Background */}
      <div className="fixed inset-0 bg-grid opacity-20 pointer-events-none" />
      <div className="fixed inset-0 bg-gradient-to-b from-[#0a0a0a] via-[#0a0a0a]/80 to-[#0a0a0a] pointer-events-none" />

      {/* Toast Notification */}
      <div className={`fixed bottom-12 left-1/2 -translate-x-1/2 z-[100] transition-all duration-500 transform ${toast.visible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0 pointer-events-none'}`}>
        <div className="bg-white text-black px-6 py-3 rounded-sm flex items-center gap-3 shadow-2xl">
          <Check className="w-4 h-4" />
          <span className="text-[10px] font-black uppercase tracking-widest">{toast.message}</span>
        </div>
      </div>

      {/* Navbar */}
      <nav className="fixed top-0 left-0 right-0 z-50 border-b border-white/5 backdrop-blur-xl">
        <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
          <div className="flex items-center gap-3 cursor-pointer" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
            <div className="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
              <BrainIcon className="w-5 h-5 text-black" />
            </div>
            <span className="text-lg font-bold tracking-tighter uppercase italic">Ever Brain</span>
          </div>

          <div className="hidden md:flex items-center gap-10 text-[10px] font-black uppercase tracking-[0.2em] text-white/40">
            <a href="#features" className="hover:text-white transition-colors">Infrastructure</a>
            <Link href="/docs" className="hover:text-white transition-colors">Protocol</Link>
          </div>

          <div className="flex items-center gap-6">
            <a href="https://huggingface.co/spaces/projectsorg/ever-brain/tree/main" target='_blank' rel='noopener noreferrer' className="text-white/40 hover:text-white transition-colors">
              <GitHubIcon className="w-5 h-5" />
            </a>
            <button
              onClick={handleDownload}
              className="bg-white text-black px-6 py-2 rounded-sm text-[10px] font-black uppercase tracking-widest hover:bg-white/90 transition-all active:scale-95"
            >
              Get CLI
            </button>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <header className="relative z-10 pt-48 pb-32 px-6">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-7xl md:text-8xl font-bold tracking-tighter mb-8 leading-[0.9]">
            COGNITION <br />
            <span className="text-white/40">OS</span>
          </h1>

          <p className="text-lg text-white/60 mb-16 max-w-xl mx-auto font-medium leading-relaxed">
            A minimalist persistent context layer for autonomous agents.
            Zero bloat. Instant continuity. Shared intelligence.
          </p>

          <div className="flex flex-col sm:flex-row items-center justify-center gap-8">
            <Link
              href="/docs"
              className="group flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-white hover:text-white/70 transition-colors"
            >
              Learn Protocol <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
            </Link>

            <div className="h-px w-8 bg-white/10 hidden sm:block" />

            <div className="flex flex-col items-center gap-4">
              <div
                onClick={() => {
                  navigator.clipboard.writeText(`pip install ever-brain-cli`);
                  showToast('Pip Install Copied');
                }}
                className="flex items-center gap-3 px-6 py-4 bg-white/[0.03] border border-white/10 rounded-sm text-white/60 font-mono text-xs cursor-pointer hover:border-white/40 hover:bg-white/[0.05] transition-all active:scale-95 shadow-2xl"
              >
                <Terminal className="w-4 h-4" />
                <span>pip install ever-brain-cli</span>
              </div>
              
              <div 
                onClick={() => {
                  const host = window.location.origin;
                  const installUrl = `${host}/install.ps1`;
                  navigator.clipboard.writeText(`irm ${installUrl} | iex`);
                  showToast('One-Line Install Copied');
                }}
                className="text-[9px] font-bold text-white/20 uppercase tracking-widest cursor-pointer hover:text-white/40 transition-colors"
              >
                or run the <span className="underline decoration-white/10">powershell one-liner</span>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* Feature Bento Grid */}
      <section id="features" className="relative z-10 py-32 px-6">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-1">
            <div className="p-12 bg-white/[0.01] border border-white/5 hover:bg-white/[0.02] transition-colors">
              <Database className="w-6 h-6 mb-8 text-white/20" />
              <h3 className="text-xs font-black uppercase tracking-widest mb-4">Persistence</h3>
              <p className="text-sm text-white/40 leading-relaxed">
                Decisions and architecture live across every session.
              </p>
            </div>
            <div className="p-12 bg-white/[0.01] border border-white/5 hover:bg-white/[0.02] transition-colors">
              <ShieldCheck className="w-6 h-6 mb-8 text-white/20" />
              <h3 className="text-xs font-black uppercase tracking-widest mb-4">Ownership</h3>
              <p className="text-sm text-white/40 leading-relaxed">
                Markdown-native filesystem. Fully portable and private.
              </p>
            </div>
            <div className="p-12 bg-white/[0.01] border border-white/5 hover:bg-white/[0.02] transition-colors">
              <Terminal className="w-6 h-6 mb-8 text-white/20" />
              <h3 className="text-xs font-black uppercase tracking-widest mb-4">Execution</h3>
              <p className="text-sm text-white/40 leading-relaxed">
                Built for the command line. Designed for speed.
              </p>
            </div>
          </div>
        </div>
      </section>


      {/* Footer */}
      <footer className="relative z-10 py-20 px-6 border-t border-white/5 mt-32">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-12">
          <div className="flex items-center gap-3 cursor-pointer" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
            <BrainIcon className="w-5 h-5 text-white" />
            <span className="text-sm font-black uppercase tracking-tighter italic">Ever Brain</span>
          </div>
          <p className="text-white/20 text-[10px] font-bold uppercase tracking-[0.2em]">
            &copy; MMXXVI Ever Brain // System Ready
          </p>
        </div>
      </footer>
    </div>
  );
}