import { useRoute, Link } from "wouter";
import { Button } from "@/components/ui/button";
import { ArrowLeft, ChevronLeft, ChevronRight, FileText, Presentation } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent } from "@/components/ui/card";
import Footer from "@/components/Footer";
import { useState, useEffect } from "react";

const slides = [
  {
    title: "Chayan Asli",
    subtitle: "Technology Entrepreneur | Hedge Fund Manager | AI Pioneer",
    content: (
      <div className="text-center space-y-6">
        <div className="w-32 h-32 mx-auto rounded-full overflow-hidden border-4 border-white shadow-lg mb-6">
          <img src="https://pbs.twimg.com/profile_images/1683962801457332227/TZD2wovr_400x400.jpg" alt="Chayan Asli" className="w-full h-full object-cover" />
        </div>
        <h1 className="text-5xl font-bold text-white">Chayan Asli</h1>
        <p className="text-2xl text-blue-100">Technology Entrepreneur | Hedge Fund Manager | AI Pioneer</p>
        <p className="text-xl text-blue-200">Founder & CEO, Vestun</p>
      </div>
    ),
    background: "bg-gradient-to-br from-blue-600 to-blue-800"
  },
  {
    title: "Executive Summary",
    subtitle: "Professional Overview",
    content: (
      <div className="space-y-6">
        <h2 className="text-4xl font-bold text-gray-900 mb-8">Executive Summary</h2>
        <div className="space-y-4 text-lg text-gray-700">
          <p className="leading-relaxed">
            Swiss-born technology entrepreneur and hedge fund manager who has established himself as a significant figure in the intersection of artificial intelligence, financial technology, and venture capital.
          </p>
          <div className="grid grid-cols-2 gap-6 mt-8">
            <div className="bg-blue-50 p-6 rounded-lg">
              <h3 className="font-bold text-xl text-blue-900 mb-2">Company</h3>
              <p className="text-gray-700">Founder & CEO of Vestun</p>
            </div>
            <div className="bg-blue-50 p-6 rounded-lg">
              <h3 className="font-bold text-xl text-blue-900 mb-2">Location</h3>
              <p className="text-gray-700">Zurich, Switzerland</p>
            </div>
            <div className="bg-blue-50 p-6 rounded-lg">
              <h3 className="font-bold text-xl text-blue-900 mb-2">Focus Areas</h3>
              <p className="text-gray-700">AI, FinTech, Blockchain</p>
            </div>
            <div className="bg-blue-50 p-6 rounded-lg">
              <h3 className="font-bold text-xl text-blue-900 mb-2">Since</h3>
              <p className="text-gray-700">Crypto investor since 2016</p>
            </div>
          </div>
        </div>
      </div>
    ),
    background: "bg-white"
  },
  {
    title: "Vestun Overview",
    subtitle: "Technology & Investment Group",
    content: (
      <div className="space-y-6">
        <h2 className="text-4xl font-bold text-gray-900 mb-8">Vestun</h2>
        <div className="text-center mb-8">
          <img src="https://vestun.com/wp-content/uploads/2023/05/vestun-logo-dark-lt-1.png" alt="Vestun" className="max-w-md mx-auto" />
        </div>
        <div className="grid grid-cols-2 gap-6">
          <div className="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-6 rounded-lg">
            <h3 className="font-bold text-2xl mb-3">Legal Status</h3>
            <p className="text-blue-100">Authorized and regulated in Switzerland as financial intermediary</p>
          </div>
          <div className="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-6 rounded-lg">
            <h3 className="font-bold text-2xl mb-3">Team</h3>
            <p className="text-purple-100">~5 employees based in Zurich</p>
          </div>
          <div className="bg-gradient-to-br from-green-500 to-green-600 text-white p-6 rounded-lg">
            <h3 className="font-bold text-2xl mb-3">Operations</h3>
            <p className="text-green-100">Capital markets, AI hedge funds, venture building</p>
          </div>
          <div className="bg-gradient-to-br from-orange-500 to-orange-600 text-white p-6 rounded-lg">
            <h3 className="font-bold text-2xl mb-3">Expansion</h3>
            <p className="text-orange-100">Subsidiary in Korea (2024)</p>
          </div>
        </div>
      </div>
    ),
    background: "bg-gray-50"
  },
  {
    title: "Hedge Fund Strategy",
    subtitle: "Quantamental AI Approach",
    content: (
      <div className="space-y-6">
        <h2 className="text-4xl font-bold text-gray-900 mb-8">Hedge Fund Strategy</h2>
        <div className="bg-blue-600 text-white p-8 rounded-lg mb-6">
          <p className="text-2xl font-bold text-center">First Quantamental AI Hedge Fund</p>
          <p className="text-xl text-center text-blue-100 mt-2">Launched 2019 | External investors 2020</p>
        </div>
        <div className="space-y-4">
          <div className="flex items-start space-x-4 bg-gray-50 p-4 rounded-lg">
            <div className="w-3 h-3 bg-blue-600 rounded-full mt-2"></div>
            <div>
              <h3 className="font-bold text-xl text-gray-900">Market Agnostic</h3>
              <p className="text-gray-600">Systematic US equity trading with dynamic adaptation</p>
            </div>
          </div>
          <div className="flex items-start space-x-4 bg-gray-50 p-4 rounded-lg">
            <div className="w-3 h-3 bg-blue-600 rounded-full mt-2"></div>
            <div>
              <h3 className="font-bold text-xl text-gray-900">Non-traditional Approach</h3>
              <p className="text-gray-600">No reliance on statistical rules or historical backtesting</p>
            </div>
          </div>
          <div className="flex items-start space-x-4 bg-gray-50 p-4 rounded-lg">
            <div className="w-3 h-3 bg-blue-600 rounded-full mt-2"></div>
            <div>
              <h3 className="font-bold text-xl text-gray-900">Intelligence Integration</h3>
              <p className="text-gray-600">Domain-specific intelligence with uncorrelated datasets</p>
            </div>
          </div>
        </div>
      </div>
    ),
    background: "bg-white"
  },
  {
    title: "Investment Philosophy",
    subtitle: "Contrarian & Technology-Focused",
    content: (
      <div className="space-y-6">
        <h2 className="text-4xl font-bold text-gray-900 mb-8">Investment Philosophy</h2>
        <div className="grid grid-cols-2 gap-8">
          <div>
            <h3 className="text-2xl font-bold text-blue-600 mb-4">Core Thesis</h3>
            <ul className="space-y-3 text-lg">
              <li className="flex items-start">
                <span className="text-blue-600 mr-3">•</span>
                <span>Contrarian positioning</span>
              </li>
              <li className="flex items-start">
                <span className="text-blue-600 mr-3">•</span>
                <span>Technology-first focus</span>
              </li>
              <li className="flex items-start">
                <span className="text-blue-600 mr-3">•</span>
                <span>Long-term vision</span>
              </li>
              <li className="flex items-start">
                <span className="text-blue-600 mr-3">•</span>
                <span>Market skepticism</span>
              </li>
            </ul>
          </div>
          <div>
            <h3 className="text-2xl font-bold text-purple-600 mb-4">Investment Areas</h3>
            <div className="space-y-3">
              <div className="bg-purple-50 p-4 rounded-lg">
                <p className="font-bold text-purple-900">Short-term</p>
                <p className="text-gray-700">AI and Web3 technologies</p>
              </div>
              <div className="bg-purple-50 p-4 rounded-lg">
                <p className="font-bold text-purple-900">Long-term</p>
                <p className="text-gray-700">Deep Tech, Longevity, Precision Health</p>
              </div>
              <div className="bg-purple-50 p-4 rounded-lg">
                <p className="font-bold text-purple-900">Ongoing</p>
                <p className="text-gray-700">Cryptocurrency since 2016</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    ),
    background: "bg-gray-50"
  },
  {
    title: "Key Achievements",
    subtitle: "Track Record & Success",
    content: (
      <div className="space-y-6">
        <h2 className="text-4xl font-bold text-gray-900 mb-8">Key Achievements</h2>
        <div className="space-y-4">
          <div className="bg-gradient-to-r from-green-500 to-green-600 text-white p-6 rounded-lg">
            <h3 className="text-2xl font-bold mb-2">🎯 Market Predictions</h3>
            <p className="text-green-100">Successfully predicted Beyond Meat ($BYND) decline from $165 to sub-$100 (June 2019)</p>
          </div>
          <div className="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-6 rounded-lg">
            <h3 className="text-2xl font-bold mb-2">🚀 Fund Performance</h3>
            <p className="text-blue-100">Sustained performance during COVID-19 market turbulence</p>
          </div>
          <div className="bg-gradient-to-r from-purple-500 to-purple-600 text-white p-6 rounded-lg">
            <h3 className="text-2xl font-bold mb-2">🌐 International Expansion</h3>
            <p className="text-purple-100">Established Korea subsidiary (2024)</p>
          </div>
          <div className="bg-gradient-to-r from-orange-500 to-orange-600 text-white p-6 rounded-lg">
            <h3 className="text-2xl font-bold mb-2">🤝 Strategic Partnerships</h3>
            <p className="text-orange-100">Collaborations with EY-Parthenon, HEC Paris, and major banks</p>
          </div>
        </div>
      </div>
    ),
    background: "bg-white"
  },
  {
    title: "Leadership Style",
    subtitle: "Personality & Approach",
    content: (
      <div className="space-y-6">
        <h2 className="text-4xl font-bold text-gray-900 mb-8">Leadership & Personality</h2>
        <div className="grid grid-cols-3 gap-6">
          <div className="text-center p-6 bg-blue-50 rounded-lg">
            <div className="text-5xl mb-4">💪</div>
            <h3 className="font-bold text-xl text-gray-900 mb-2">Risk Tolerance</h3>
            <p className="text-gray-600">High - Left Master's program to pursue entrepreneurship</p>
          </div>
          <div className="text-center p-6 bg-purple-50 rounded-lg">
            <div className="text-5xl mb-4">🧠</div>
            <h3 className="font-bold text-xl text-gray-900 mb-2">Intellectual</h3>
            <p className="text-gray-600">Analytical and philosophical approach</p>
          </div>
          <div className="text-center p-6 bg-green-50 rounded-lg">
            <div className="text-5xl mb-4">🎯</div>
            <h3 className="font-bold text-xl text-gray-900 mb-2">Disciplined</h3>
            <p className="text-gray-600">Athletic background influences work ethic</p>
          </div>
        </div>
        <div className="bg-gray-900 text-white p-8 rounded-lg mt-8">
          <p className="text-2xl font-bold italic text-center mb-4">"Problems are opportunities."</p>
          <p className="text-center text-gray-400">— Chayan Asli</p>
        </div>
      </div>
    ),
    background: "bg-gray-50"
  },
  {
    title: "Contact & Network",
    subtitle: "Professional Connections",
    content: (
      <div className="space-y-6">
        <h2 className="text-4xl font-bold text-gray-900 mb-8">Network & Reach</h2>
        <div className="grid grid-cols-2 gap-8">
          <div className="space-y-4">
            <div className="bg-blue-600 text-white p-6 rounded-lg">
              <h3 className="text-2xl font-bold mb-3">LinkedIn</h3>
              <p className="text-3xl font-bold">3,000+</p>
              <p className="text-blue-100">Followers</p>
            </div>
            <div className="bg-sky-500 text-white p-6 rounded-lg">
              <h3 className="text-2xl font-bold mb-3">Twitter/X</h3>
              <p className="text-3xl font-bold">2,478</p>
              <p className="text-sky-100">Followers (Since 2016)</p>
            </div>
          </div>
          <div>
            <h3 className="text-2xl font-bold text-gray-900 mb-4">Industry Connections</h3>
            <ul className="space-y-3 text-lg text-gray-700">
              <li className="flex items-start">
                <span className="text-blue-600 mr-3">✓</span>
                <span>Major banks & multi-family offices</span>
              </li>
              <li className="flex items-start">
                <span className="text-blue-600 mr-3">✓</span>
                <span>Academic institutions (HEC Paris)</span>
              </li>
              <li className="flex items-start">
                <span className="text-blue-600 mr-3">✓</span>
                <span>Speaking engagements (CryptoMondays)</span>
              </li>
              <li className="flex items-start">
                <span className="text-blue-600 mr-3">✓</span>
                <span>Consulting (EY-Parthenon)</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    ),
    background: "bg-white"
  }
];

export default function Report() {
  const [, params] = useRoute("/media/:slug/report");
  const [currentSlide, setCurrentSlide] = useState(0);
  
  const nextSlide = () => {
    if (currentSlide < slides.length - 1) {
      setCurrentSlide((prev) => prev + 1);
    }
  };
  
  const prevSlide = () => {
    if (currentSlide > 0) {
      setCurrentSlide((prev) => prev - 1);
    }
  };

  // Keyboard navigation
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'ArrowRight') {
        nextSlide();
      } else if (e.key === 'ArrowLeft') {
        prevSlide();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [currentSlide]);

  return (
    <div className="flex flex-col min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href={`/media/${params?.slug}`}>
              <Button variant="ghost" size="sm" data-testid="button-back">
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Media Outlet
              </Button>
            </Link>
            <h1 className="text-2xl font-bold text-gray-900">Comprehensive Report</h1>
            <div className="w-32"></div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-1 max-w-7xl mx-auto px-4 py-8 w-full">
        <Tabs defaultValue="report" className="w-full">
          <TabsList className="grid w-full max-w-md mx-auto grid-cols-2 mb-8">
            <TabsTrigger value="report" data-testid="tab-report">
              <FileText className="h-4 w-4 mr-2" />
              Report
            </TabsTrigger>
            <TabsTrigger value="slides" data-testid="tab-slides">
              <Presentation className="h-4 w-4 mr-2" />
              Slides
            </TabsTrigger>
          </TabsList>

          <TabsContent value="report">
            <Card className="bg-white">
              <CardContent className="p-0">
                <iframe
                  src="/attached_assets/chayan asli report_1759208054055.html"
                  className="w-full border-none"
                  style={{ minHeight: '100vh', height: 'auto' }}
                  title="Comprehensive Report"
                  data-testid="iframe-report"
                />
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="slides">
            <div className="relative">
              {/* Slide Display */}
              <Card className={`${slides[currentSlide].background} min-h-[600px] shadow-2xl`}>
                <CardContent className="p-16">
                  {slides[currentSlide].content}
                </CardContent>
              </Card>

              {/* Navigation Controls */}
              <div className="flex items-center justify-between mt-6">
                <Button
                  onClick={prevSlide}
                  variant="outline"
                  size="lg"
                  disabled={currentSlide === 0}
                  data-testid="button-prev-slide"
                >
                  <ChevronLeft className="h-5 w-5 mr-2" />
                  Previous
                </Button>

                <div className="flex items-center space-x-3">
                  <span className="text-lg font-medium text-gray-700">
                    {currentSlide + 1} / {slides.length}
                  </span>
                  <div className="flex space-x-1">
                    {slides.map((_, index) => (
                      <button
                        key={index}
                        onClick={() => setCurrentSlide(index)}
                        className={`w-2 h-2 rounded-full transition-colors ${
                          index === currentSlide ? 'bg-blue-600' : 'bg-gray-300'
                        }`}
                        data-testid={`dot-slide-${index}`}
                      />
                    ))}
                  </div>
                </div>

                <Button
                  onClick={nextSlide}
                  variant="outline"
                  size="lg"
                  disabled={currentSlide === slides.length - 1}
                  data-testid="button-next-slide"
                >
                  Next
                  <ChevronRight className="h-5 w-5 ml-2" />
                </Button>
              </div>

              {/* Keyboard Navigation Hint */}
              <p className="text-center text-sm text-gray-500 mt-4">
                Use arrow keys ← → to navigate slides
              </p>
            </div>
          </TabsContent>
        </Tabs>
      </main>

      <Footer />
    </div>
  );
}