/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import ForensicDashboard from './components/ForensicDashboard';
import { ForensicTools } from './components/ForensicTools';
import { FrequencyTuner } from './components/FrequencyTuner';
import { MessengerPipe } from './components/MessengerPipe';
import { SettingsDialog } from './components/SettingsDialog';
import { InsiderRegister } from './components/InsiderRegister';
import { Button } from './components/ui/button';
import { ChevronLeft, ChevronRight, MapPin, ExternalLink, AlertTriangle, TrendingUp } from 'lucide-react';
import { cn } from '@/lib/utils';

const PAGES = [
  { id: 'insider', name: 'Insider Register' },
  { id: 'dashboard', name: 'Forensic Dashboard' },
  { id: 'toolkit', name: 'Forensic Toolkit' },
  { id: 'frequency', name: 'Frequency Tuner' },
  { id: 'messenger', name: 'Messenger Pipe' },
];

export default function App() {
  const [currentPage, setCurrentPage] = useState(0);
  const [direction, setDirection] = useState(0);
  const [settings, setSettings] = useState(() => {
    const savedSettings = typeof window !== 'undefined' ? localStorage.getItem('forensic-viewer-settings') : null;
    return savedSettings ? JSON.parse(savedSettings) : {
      fontFamily: "'Cascadia Code', 'Fira Mono', 'Consolas', monospace",
      fontSize: "14px",
      bannerColor: "#18181b", // zinc-900
      theme: "default",
    };
  });

  const [isIframe, setIsIframe] = useState(false);

  useEffect(() => {
    setIsIframe(window.self !== window.top);
  }, []);

  useEffect(() => {
    localStorage.setItem('forensic-viewer-settings', JSON.stringify(settings));
  }, [settings]);

  const getThemeClass = () => {
    switch(settings.theme) {
      case 'matrix': return 'theme-matrix';
      case 'cyber': return 'theme-cyber';
      case 'light': return 'theme-light';
      default: return 'theme-default';
    }
  };

  const slideTo = (index: number) => {
    setDirection(index > currentPage ? 1 : -1);
    setCurrentPage(index);
  };

  const handleNavigate = (pageId: string) => {
    const index = PAGES.findIndex(p => p.id === pageId);
    if (index !== -1) slideTo(index);
  };

  const handleNext = () => {
    slideTo((currentPage + 1) % PAGES.length);
  };

  const handlePrev = () => {
    slideTo((currentPage - 1 + PAGES.length) % PAGES.length);
  };

  // Swipe logic
  const [touchStart, setTouchStart] = useState<number | null>(null);
  const [touchEnd, setTouchEnd] = useState<number | null>(null);

  const minSwipeDistance = 50;

  const onTouchStart = (e: React.TouchEvent) => {
    setTouchEnd(null);
    setTouchStart(e.targetTouches[0].clientX);
  };

  const onTouchMove = (e: React.TouchEvent) => {
    setTouchEnd(e.targetTouches[0].clientX);
  };

  const onTouchEnd = () => {
    if (!touchStart || !touchEnd) return;
    const distance = touchStart - touchEnd;
    const isLeftSwipe = distance > minSwipeDistance;
    const isRightSwipe = distance < -minSwipeDistance;
    if (isLeftSwipe) {
      handleNext();
    }
    if (isRightSwipe) {
      handlePrev();
    }
  };

  const variants = {
    enter: (direction: number) => ({
      x: direction > 0 ? 1000 : -1000,
      opacity: 0,
      filter: 'blur(10px)',
    }),
    center: {
      x: 0,
      opacity: 1,
      filter: 'blur(0px)',
    },
    exit: (direction: number) => ({
      x: direction < 0 ? 1000 : -1000,
      opacity: 0,
      filter: 'blur(10px)',
    }),
  };

  return (
    <div 
      className={`dark min-h-screen flex flex-col overflow-hidden bg-zinc-950 text-zinc-300 ${getThemeClass()}`}
      style={{ 
        fontFamily: settings.fontFamily,
        fontSize: settings.fontSize,
      }}
    >
      {/* Minimal Navigation */}
      <nav className="h-10 bg-[#1e0a3c] border-b border-[#7c3aed]/30 flex items-center px-4 gap-6 z-50">
        <div className="flex items-center gap-2">
          <TrendingUp className="w-4 h-4 text-[#a78bfa]" />
          <span className="text-[10px] font-bold uppercase tracking-widest text-[#ddd6fe]">Albert Intelligence</span>
        </div>
        <div className="flex items-center gap-1">
          {PAGES.map((page, idx) => (
            <button
              key={page.id}
              onClick={() => slideTo(idx)}
              className={cn(
                "px-3 py-1 text-[9px] uppercase tracking-wider transition-colors rounded",
                currentPage === idx 
                  ? "bg-[#7c3aed] text-white font-bold" 
                  : "text-[#a78bfa] hover:bg-white/5"
              )}
            >
              {page.name}
            </button>
          ))}
        </div>
        <div className="ml-auto flex items-center gap-4">
          <SettingsDialog settings={settings} setSettings={setSettings} />
        </div>
      </nav>

      {/* Main Content Area */}
      <main className="flex-1 relative overflow-hidden pt-4 pb-8">
        <AnimatePresence initial={false} custom={direction} mode="popLayout">
          <motion.div
            key={currentPage}
            custom={direction}
            variants={variants}
            initial="enter"
            animate="center"
            exit="exit"
            transition={{
              x: { type: "spring", stiffness: 300, damping: 30 },
              opacity: { duration: 0.2 },
              filter: { duration: 0.3 }
            }}
            className="absolute inset-0 w-full h-full flex flex-col overflow-y-auto"
          >
            {currentPage === 0 && <InsiderRegister />}
            {currentPage === 1 && <ForensicDashboard settings={settings} setSettings={setSettings} />}
            {currentPage === 2 && (
              <div className="p-8 h-full overflow-y-auto max-w-4xl mx-auto w-full">
                <h2 className="text-2xl font-bold mb-6 text-primary uppercase tracking-widest">Forensic Toolkit</h2>
                <ForensicTools onNavigate={handleNavigate} />
              </div>
            )}
            {currentPage === 3 && (
              <div className="p-8 h-full overflow-y-auto max-w-5xl mx-auto w-full">
                <FrequencyTuner onNavigate={handleNavigate} />
              </div>
            )}
            {currentPage === 4 && (
              <div className="p-8 h-full overflow-y-auto max-w-6xl mx-auto w-full">
                <MessengerPipe />
              </div>
            )}
          </motion.div>
        </AnimatePresence>
      </main>
    </div>
  );
}