import { useRoute } from "wouter";
import { 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";

const reportContent: Record<string, { htmlPath: string; pptPath: string }> = {
  'chayan-asli': {
    htmlPath: '/attached_assets/chayan asli report_1759208054055.html',
    pptPath: '/attached_assets/chayan asli slides_1759208079159.pptx'
  },
  'krysh-parker': {
    htmlPath: 'krysh-parker',
    pptPath: '/attached_assets/krysh parker slides_1759208861997.pptx'
  }
};

export default function Report() {
  const [, params] = useRoute("/media/:slug/report");
  
  const slug = params?.slug || '';
  const content = reportContent[slug] || reportContent['chayan-asli'];
  
  // Get full URL for PPT file
  const getFullPptUrl = () => {
    const baseUrl = window.location.origin;
    return `${baseUrl}${content.pptPath}`;
  };

  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-center">
            <h1 className="text-2xl font-bold text-gray-900">Comprehensive Report</h1>
          </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">
                {content.htmlPath === 'krysh-parker' ? (
                  <div className="p-16">
                    <h2 className="text-4xl font-bold text-gray-900 mb-8 text-center">Krysh Parker - Comprehensive Report</h2>
                    <div className="max-w-4xl mx-auto space-y-8 text-lg text-gray-700">
                      <section>
                        <h3 className="text-3xl font-bold text-purple-600 mb-4">Executive Summary</h3>
                        <p className="leading-relaxed">
                          Krysh Parker is a distinguished technology strategist and innovation leader with deep expertise in digital assets, fund management, and venture capital. As Partner at Type3 Capital and Non-Executive Director at TrueFi DAO, he brings strategic vision to cutting-edge blockchain and DeFi projects.
                        </p>
                      </section>

                      <section>
                        <h3 className="text-3xl font-bold text-purple-600 mb-4">Professional Background</h3>
                        <p className="leading-relaxed mb-4">
                          With a strong background in fund management and venture capital, Parker has established himself as a key figure in the blockchain and decentralized finance ecosystem. His work focuses on identifying and nurturing innovative projects that push the boundaries of what's possible in digital finance.
                        </p>
                        <p className="leading-relaxed">
                          Parker's career demonstrates a consistent focus on building sustainable value in the digital asset space, combining traditional finance expertise with cutting-edge blockchain technology knowledge.
                        </p>
                      </section>

                      <section>
                        <h3 className="text-3xl font-bold text-purple-600 mb-4">Current Leadership Roles</h3>
                        <div className="space-y-6">
                          <div className="bg-purple-50 p-6 rounded-lg">
                            <h4 className="text-2xl font-bold text-purple-900 mb-3">Partner at Type3 Capital</h4>
                            <p className="leading-relaxed">
                              At Type3 Capital, Parker leads investment strategy in early-stage blockchain and Web3 projects. His portfolio focuses on infrastructure, DeFi protocols, and innovative applications that are shaping the future of decentralized finance. He brings deep technical expertise and market insight to evaluate and support promising ventures in the rapidly evolving crypto ecosystem.
                            </p>
                          </div>
                          <div className="bg-blue-50 p-6 rounded-lg">
                            <h4 className="text-2xl font-bold text-blue-900 mb-3">Non-Executive Director at TrueFi DAO</h4>
                            <p className="leading-relaxed">
                              As Non-Executive Director at TrueFi DAO, Parker guides governance and strategic development of one of the pioneering uncollateralized lending protocols in DeFi. His role involves balancing innovation with risk management, ensuring the protocol maintains its competitive edge while protecting stakeholder interests. TrueFi represents a critical advancement in decentralized credit markets, bridging traditional finance concepts with blockchain technology.
                            </p>
                          </div>
                        </div>
                      </section>

                      <section>
                        <h3 className="text-3xl font-bold text-purple-600 mb-4">Areas of Expertise</h3>
                        <div className="grid grid-cols-2 gap-6">
                          <div className="bg-gray-50 p-5 rounded-lg">
                            <h4 className="font-bold text-xl text-gray-900 mb-2">Digital Asset Strategy</h4>
                            <p className="text-gray-700">Comprehensive approach to digital asset allocation, risk management, and value creation in crypto markets.</p>
                          </div>
                          <div className="bg-gray-50 p-5 rounded-lg">
                            <h4 className="font-bold text-xl text-gray-900 mb-2">DeFi Protocol Design</h4>
                            <p className="text-gray-700">Deep understanding of decentralized finance mechanisms, tokenomics, and protocol sustainability.</p>
                          </div>
                          <div className="bg-gray-50 p-5 rounded-lg">
                            <h4 className="font-bold text-xl text-gray-900 mb-2">Venture Capital</h4>
                            <p className="text-gray-700">Extensive experience in identifying, evaluating, and supporting early-stage blockchain ventures.</p>
                          </div>
                          <div className="bg-gray-50 p-5 rounded-lg">
                            <h4 className="font-bold text-xl text-gray-900 mb-2">Risk Management</h4>
                            <p className="text-gray-700">Sophisticated frameworks for assessing and mitigating risks in volatile crypto markets.</p>
                          </div>
                        </div>
                      </section>

                      <section>
                        <h3 className="text-3xl font-bold text-purple-600 mb-4">Strategic Vision</h3>
                        <p className="leading-relaxed mb-4">
                          Parker's strategic focus centers on three key pillars:
                        </p>
                        <div className="space-y-4">
                          <div className="flex items-start">
                            <span className="text-3xl mr-4">🏗️</span>
                            <div>
                              <h4 className="font-bold text-xl text-gray-900 mb-1">Blockchain Infrastructure</h4>
                              <p className="text-gray-700">Building foundational protocols and systems that enable the next generation of decentralized applications.</p>
                            </div>
                          </div>
                          <div className="flex items-start">
                            <span className="text-3xl mr-4">🚀</span>
                            <div>
                              <h4 className="font-bold text-xl text-gray-900 mb-1">DeFi Innovation</h4>
                              <p className="text-gray-700">Advancing decentralized finance through novel lending, borrowing, and trading mechanisms that improve capital efficiency.</p>
                            </div>
                          </div>
                          <div className="flex items-start">
                            <span className="text-3xl mr-4">🌉</span>
                            <div>
                              <h4 className="font-bold text-xl text-gray-900 mb-1">Institutional Adoption</h4>
                              <p className="text-gray-700">Bridging traditional finance and DeFi to facilitate mainstream adoption of blockchain technology by institutional players.</p>
                            </div>
                          </div>
                        </div>
                      </section>

                      <section>
                        <h3 className="text-3xl font-bold text-purple-600 mb-4">Impact & Contributions</h3>
                        <p className="leading-relaxed mb-4">
                          Throughout his career, Parker has made significant contributions to the blockchain ecosystem:
                        </p>
                        <ul className="space-y-3">
                          <li className="flex items-start">
                            <span className="text-purple-600 mr-3 font-bold text-xl">•</span>
                            <span className="leading-relaxed"><strong>Strategic Leadership:</strong> Guided multiple successful blockchain ventures to achieve market leadership positions and sustainable growth.</span>
                          </li>
                          <li className="flex items-start">
                            <span className="text-purple-600 mr-3 font-bold text-xl">•</span>
                            <span className="leading-relaxed"><strong>Innovation Catalyst:</strong> Pioneered new models for decentralized credit and lending that expand access to capital in DeFi.</span>
                          </li>
                          <li className="flex items-start">
                            <span className="text-purple-600 mr-3 font-bold text-xl">•</span>
                            <span className="leading-relaxed"><strong>Ecosystem Builder:</strong> Created substantial value across the Web3 and DeFi landscape through strategic investments and partnerships.</span>
                          </li>
                          <li className="flex items-start">
                            <span className="text-purple-600 mr-3 font-bold text-xl">•</span>
                            <span className="leading-relaxed"><strong>Thought Leadership:</strong> Shaped industry conversations on blockchain governance, risk management, and the future of decentralized finance.</span>
                          </li>
                        </ul>
                      </section>

                      <section className="bg-gradient-to-r from-purple-50 to-blue-50 p-8 rounded-lg">
                        <h3 className="text-3xl font-bold text-gray-900 mb-4">Looking Forward</h3>
                        <p className="leading-relaxed text-gray-800">
                          As the blockchain industry continues to mature, Krysh Parker remains at the forefront of innovation, combining deep technical knowledge with strategic vision to identify and nurture the next generation of transformative DeFi projects. His work continues to bridge the gap between traditional finance and the decentralized future, facilitating the mainstream adoption of blockchain technology.
                        </p>
                      </section>
                    </div>
                  </div>
                ) : (
                  <iframe
                    src={content.htmlPath}
                    className="w-full border-none"
                    style={{ minHeight: '100vh', height: 'auto' }}
                    title="Comprehensive Report"
                    data-testid="iframe-report"
                  />
                )}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="slides">
            <Card className="bg-white shadow-2xl">
              <CardContent className="p-0">
                <iframe
                  src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(getFullPptUrl())}`}
                  className="w-full border-none"
                  style={{ minHeight: '600px', height: '80vh' }}
                  title="Presentation Slides"
                  data-testid="iframe-slides"
                />
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </main>

      <Footer />
    </div>
  );
}