import React from 'react';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Calendar, Clock, Users, Play, Download, ArrowLeft, Share2, BookOpen } from 'lucide-react';
import { navigateTo } from './Router';
import { ImageWithFallback } from './figma/ImageWithFallback';

interface WebcastDetailProps {
  params: {
    slug: string;
  };
}

// Mock webcast data - in a real app, this would come from an API
const webcastData = {
  'leadership-in-digital-age': {
    id: '1',
    title: 'Leadership in the Digital Age: Navigating Change and Innovation',
    description: 'Discover how modern leaders can adapt and thrive in an increasingly digital world. This comprehensive webcast covers digital transformation strategies, leading remote teams, and fostering innovation.',
    presenter: 'Dr. Sarah Mitchell',
    presenterTitle: 'Chief Digital Transformation Officer',
    presenterBio: 'Dr. Sarah Mitchell is a renowned expert in digital transformation with over 15 years of experience helping organizations navigate digital change.',
    date: '2024-02-15',
    time: '2:00 PM EST',
    duration: '90 minutes',
    attendees: '2,400+',
    category: 'Digital Transformation',
    tags: ['Leadership', 'Digital Strategy', 'Innovation', 'Change Management'],
    thumbnail: 'https://images.unsplash.com/photo-1560472355-536de3962603?w=800&h=400&fit=crop',
    status: 'Available',
    recordingUrl: '#',
    resourcesUrl: '#',
    slidesUrl: '#',
    keyTakeaways: [
      'Understanding the digital leadership mindset',
      'Strategies for leading remote and hybrid teams',
      'Building a culture of innovation',
      'Managing digital transformation initiatives',
      'Leveraging technology for competitive advantage'
    ],
    agenda: [
      { time: '2:00 PM', topic: 'Introduction to Digital Leadership' },
      { time: '2:15 PM', topic: 'The Digital Transformation Landscape' },
      { time: '2:45 PM', topic: 'Leading Remote Teams Effectively' },
      { time: '3:15 PM', topic: 'Q&A Session' },
      { time: '3:30 PM', topic: 'Closing Remarks and Next Steps' }
    ]
  },
  'building-resilient-teams': {
    id: '2',
    title: 'Building Resilient Teams: Strategies for Sustainable Performance',
    description: 'Learn proven methodologies for creating teams that can withstand challenges and maintain high performance under pressure.',
    presenter: 'Marcus Rodriguez',
    presenterTitle: 'Director of Organizational Development',
    presenterBio: 'Marcus Rodriguez specializes in team dynamics and organizational resilience with experience across Fortune 500 companies.',
    date: '2024-02-08',
    time: '1:00 PM EST',
    duration: '75 minutes',
    attendees: '1,850+',
    category: 'Team Development',
    tags: ['Team Building', 'Resilience', 'Performance', 'Leadership'],
    thumbnail: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=400&fit=crop',
    status: 'Available',
    recordingUrl: '#',
    resourcesUrl: '#',
    slidesUrl: '#',
    keyTakeaways: [
      'Principles of team resilience',
      'Building psychological safety',
      'Managing team stress and pressure',
      'Creating sustainable performance systems',
      'Tools for team assessment and development'
    ],
    agenda: [
      { time: '1:00 PM', topic: 'Understanding Team Resilience' },
      { time: '1:20 PM', topic: 'Building Psychological Safety' },
      { time: '1:45 PM', topic: 'Sustainable Performance Strategies' },
      { time: '2:10 PM', topic: 'Interactive Q&A' },
      { time: '2:15 PM', topic: 'Resources and Action Planning' }
    ]
  },
  'strategic-decision-making': {
    id: '3',
    title: 'Strategic Decision Making: Tools and Frameworks for Leaders',
    description: 'Master the art of strategic thinking and decision-making with proven frameworks and methodologies used by top executives.',
    presenter: 'Dr. Emily Chen',
    presenterTitle: 'Strategic Leadership Consultant',
    presenterBio: 'Dr. Emily Chen is a strategic leadership consultant who has advised C-suite executives across multiple industries.',
    date: '2024-01-25',
    time: '3:00 PM EST',
    duration: '60 minutes',
    attendees: '3,200+',
    category: 'Strategy',
    tags: ['Strategic Thinking', 'Decision Making', 'Leadership', 'Planning'],
    thumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&h=400&fit=crop',
    status: 'Available',
    recordingUrl: '#',
    resourcesUrl: '#',
    slidesUrl: '#',
    keyTakeaways: [
      'Strategic thinking frameworks',
      'Decision-making methodologies',
      'Risk assessment and management',
      'Stakeholder analysis techniques',
      'Implementation and monitoring strategies'
    ],
    agenda: [
      { time: '3:00 PM', topic: 'Introduction to Strategic Decision Making' },
      { time: '3:15 PM', topic: 'Framework Deep Dive' },
      { time: '3:35 PM', topic: 'Case Study Analysis' },
      { time: '3:50 PM', topic: 'Q&A and Discussion' },
      { time: '4:00 PM', topic: 'Action Planning' }
    ]
  }
};

export function WebcastDetail({ params }: WebcastDetailProps) {
  const webcast = webcastData[params.slug as keyof typeof webcastData];

  if (!webcast) {
    return (
      <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: '#F7F7FD' }}>
        <div className="text-center">
          <h1 className="text-h2 mb-4">Webcast Not Found</h1>
          <p className="text-body-lg text-muted mb-8">
            The webcast you're looking for doesn't exist.
          </p>
          <Button
            onClick={() => navigateTo('/learning/webcast')}
            className="brand-button-system"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back to Webcasts
          </Button>
        </div>
      </div>
    );
  }

  const formattedDate = new Date(webcast.date).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });

  return (
    <div style={{ backgroundColor: '#F7F7FD' }}>
      {/* Header Section */}
      <div className="hero-margin-x py-12">
        <div className="max-w-4xl mx-auto">
          {/* Back Button */}
          <Button
            variant="ghost"
            onClick={() => navigateTo('/learning/webcast')}
            className="mb-6 hover:bg-white/50"
            style={{
              fontSize: 'var(--font-body)',
              fontFamily: 'var(--font-family-base)',
              color: 'var(--color-black)'
            }}
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back to Webcasts
          </Button>

          {/* Webcast Header */}
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            {/* Webcast Image */}
            <div className="aspect-video w-full bg-gray-100 relative">
              <ImageWithFallback
                src={webcast.thumbnail}
                alt={webcast.title}
                className="w-full h-full object-cover"
              />
              <div className="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                <Button
                  variant="default"
                  size="lg"
                  className="bg-white text-black hover:bg-gray-100"
                  onClick={() => window.open(webcast.recordingUrl, '_blank')}
                >
                  <Play className="w-6 h-6 mr-2" />
                  Watch Recording
                </Button>
              </div>
            </div>

            {/* Webcast Content */}
            <div className="p-8">
              {/* Category Badge */}
              <Badge
                variant="secondary"
                className="mb-4"
                style={{
                  backgroundColor: 'rgba(248, 195, 1, 0.1)',
                  color: 'var(--color-black)',
                  fontSize: 'var(--font-small)',
                  fontFamily: 'var(--font-family-base)'
                }}
              >
                {webcast.category}
              </Badge>

              {/* Title */}
              <h1 
                className="mb-4"
                style={{
                  fontSize: 'var(--font-h2)',
                  fontWeight: 'var(--font-weight-h2)',
                  lineHeight: 'var(--line-height-h2)',
                  color: 'var(--color-black)',
                  fontFamily: 'var(--font-family-base)'
                }}
              >
                {webcast.title}
              </h1>

              {/* Meta Information */}
              <div className="flex flex-wrap gap-6 mb-6 text-muted">
                <div className="flex items-center gap-2">
                  <Calendar className="w-4 h-4" />
                  <span style={{ fontSize: 'var(--font-body)', fontFamily: 'var(--font-family-base)' }}>
                    {formattedDate}
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <Clock className="w-4 h-4" />
                  <span style={{ fontSize: 'var(--font-body)', fontFamily: 'var(--font-family-base)' }}>
                    {webcast.duration}
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <Users className="w-4 h-4" />
                  <span style={{ fontSize: 'var(--font-body)', fontFamily: 'var(--font-family-base)' }}>
                    {webcast.attendees} attendees
                  </span>
                </div>
              </div>

              {/* Description */}
              <p 
                className="mb-8"
                style={{
                  fontSize: 'var(--font-body-lg)',
                  lineHeight: 'var(--line-height-body-lg)',
                  color: 'var(--color-black)',
                  fontFamily: 'var(--font-family-base)'
                }}
              >
                {webcast.description}
              </p>

              {/* Action Buttons */}
              <div className="flex flex-wrap gap-4">
                <Button
                  onClick={() => window.open(webcast.recordingUrl, '_blank')}
                  className="brand-button-system"
                >
                  <Play className="w-4 h-4 mr-2" />
                  Watch Recording
                </Button>
                <Button
                  variant="outline"
                  onClick={() => window.open(webcast.slidesUrl, '_blank')}
                  style={{
                    fontSize: 'var(--font-body)',
                    fontFamily: 'var(--font-family-base)',
                    borderColor: 'var(--color-primary)'
                  }}
                >
                  <Download className="w-4 h-4 mr-2" />
                  Download Slides
                </Button>
                <Button
                  variant="outline"
                  onClick={() => window.open(webcast.resourcesUrl, '_blank')}
                  style={{
                    fontSize: 'var(--font-body)',
                    fontFamily: 'var(--font-family-base)',
                    borderColor: 'var(--color-primary)'
                  }}
                >
                  <BookOpen className="w-4 h-4 mr-2" />
                  Resources
                </Button>
                <Button
                  variant="outline"
                  style={{
                    fontSize: 'var(--font-body)',
                    fontFamily: 'var(--font-family-base)',
                    borderColor: 'var(--color-primary)'
                  }}
                >
                  <Share2 className="w-4 h-4 mr-2" />
                  Share
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Content Sections */}
      <div className="section-margin-x pb-12">
        <div className="max-w-4xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Main Content */}
            <div className="lg:col-span-2 space-y-8">
              {/* Presenter Information */}
              <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
                <h2 
                  className="mb-4"
                  style={{
                    fontSize: 'var(--font-h3)',
                    fontWeight: 'var(--font-weight-h3)',
                    color: 'var(--color-black)',
                    fontFamily: 'var(--font-family-base)'
                  }}
                >
                  About the Presenter
                </h2>
                <div className="flex items-start gap-4">
                  <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center">
                    <span 
                      className="text-xl font-semibold"
                      style={{ 
                        color: 'var(--color-primary)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      {webcast.presenter.split(' ').map(n => n[0]).join('')}
                    </span>
                  </div>
                  <div>
                    <h3 
                      className="mb-1"
                      style={{
                        fontSize: 'var(--font-h4)',
                        fontWeight: 'var(--font-weight-h4)',
                        color: 'var(--color-black)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      {webcast.presenter}
                    </h3>
                    <p 
                      className="text-muted mb-2"
                      style={{
                        fontSize: 'var(--font-body)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      {webcast.presenterTitle}
                    </p>
                    <p 
                      style={{
                        fontSize: 'var(--font-body)',
                        lineHeight: 'var(--line-height-body)',
                        color: 'var(--color-black)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      {webcast.presenterBio}
                    </p>
                  </div>
                </div>
              </div>

              {/* Key Takeaways */}
              <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
                <h2 
                  className="mb-4"
                  style={{
                    fontSize: 'var(--font-h3)',
                    fontWeight: 'var(--font-weight-h3)',
                    color: 'var(--color-black)',
                    fontFamily: 'var(--font-family-base)'
                  }}
                >
                  Key Takeaways
                </h2>
                <ul className="space-y-2">
                  {webcast.keyTakeaways.map((takeaway, index) => (
                    <li key={index} className="flex items-start gap-3">
                      <div 
                        className="w-2 h-2 rounded-full mt-2 flex-shrink-0"
                        style={{ backgroundColor: 'var(--color-accent)' }}
                      />
                      <span 
                        style={{
                          fontSize: 'var(--font-body)',
                          lineHeight: 'var(--line-height-body)',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        {takeaway}
                      </span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Agenda */}
              <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
                <h2 
                  className="mb-4"
                  style={{
                    fontSize: 'var(--font-h3)',
                    fontWeight: 'var(--font-weight-h3)',
                    color: 'var(--color-black)',
                    fontFamily: 'var(--font-family-base)'
                  }}
                >
                  Agenda
                </h2>
                <div className="space-y-3">
                  {webcast.agenda.map((item, index) => (
                    <div key={index} className="flex items-start gap-4 py-2">
                      <span 
                        className="text-sm font-medium text-muted min-w-[80px]"
                        style={{
                          fontSize: 'var(--font-small)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        {item.time}
                      </span>
                      <span 
                        style={{
                          fontSize: 'var(--font-body)',
                          lineHeight: 'var(--line-height-body)',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        {item.topic}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Sidebar */}
            <div className="space-y-6">
              {/* Tags */}
              <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
                <h3 
                  className="mb-4"
                  style={{
                    fontSize: 'var(--font-h4)',
                    fontWeight: 'var(--font-weight-h4)',
                    color: 'var(--color-black)',
                    fontFamily: 'var(--font-family-base)'
                  }}
                >
                  Topics Covered
                </h3>
                <div className="flex flex-wrap gap-2">
                  {webcast.tags.map((tag, index) => (
                    <Badge
                      key={index}
                      variant="secondary"
                      style={{
                        backgroundColor: 'var(--color-bg-light)',
                        color: 'var(--color-black)',
                        fontSize: 'var(--font-small)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      {tag}
                    </Badge>
                  ))}
                </div>
              </div>

              {/* Quick Actions */}
              <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
                <h3 
                  className="mb-4"
                  style={{
                    fontSize: 'var(--font-h4)',
                    fontWeight: 'var(--font-weight-h4)',
                    color: 'var(--color-black)',
                    fontFamily: 'var(--font-family-base)'
                  }}
                >
                  Quick Actions
                </h3>
                <div className="space-y-3">
                  <Button 
                    variant="outline" 
                    className="w-full justify-start"
                    onClick={() => window.open(webcast.recordingUrl, '_blank')}
                    style={{
                      fontSize: 'var(--font-body)',
                      fontFamily: 'var(--font-family-base)',
                      borderColor: 'var(--color-primary)'
                    }}
                  >
                    <Play className="w-4 h-4 mr-2" />
                    Watch Recording
                  </Button>
                  <Button 
                    variant="outline" 
                    className="w-full justify-start"
                    onClick={() => window.open(webcast.slidesUrl, '_blank')}
                    style={{
                      fontSize: 'var(--font-body)',
                      fontFamily: 'var(--font-family-base)',
                      borderColor: 'var(--color-primary)'
                    }}
                  >
                    <Download className="w-4 h-4 mr-2" />
                    Download Slides
                  </Button>
                  <Button 
                    variant="outline" 
                    className="w-full justify-start"
                    onClick={() => window.open(webcast.resourcesUrl, '_blank')}
                    style={{
                      fontSize: 'var(--font-body)',
                      fontFamily: 'var(--font-family-base)',
                      borderColor: 'var(--color-primary)'
                    }}
                  >
                    <BookOpen className="w-4 h-4 mr-2" />
                    Resources
                  </Button>
                </div>
              </div>

              {/* Related Webcasts */}
              <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
                <h3 
                  className="mb-4"
                  style={{
                    fontSize: 'var(--font-h4)',
                    fontWeight: 'var(--font-weight-h4)',
                    color: 'var(--color-black)',
                    fontFamily: 'var(--font-family-base)'
                  }}
                >
                  Related Webcasts
                </h3>
                <div className="space-y-3">
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-auto p-0"
                    onClick={() => navigateTo('/learning/webcast/building-resilient-teams')}
                  >
                    <div className="text-left">
                      <div 
                        className="font-medium mb-1"
                        style={{
                          fontSize: 'var(--font-body)',
                          fontFamily: 'var(--font-family-base)',
                          color: 'var(--color-black)'
                        }}
                      >
                        Building Resilient Teams
                      </div>
                      <div 
                        className="text-sm text-muted"
                        style={{
                          fontSize: 'var(--font-small)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Team Development
                      </div>
                    </div>
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-auto p-0"
                    onClick={() => navigateTo('/learning/webcast/strategic-decision-making')}
                  >
                    <div className="text-left">
                      <div 
                        className="font-medium mb-1"
                        style={{
                          fontSize: 'var(--font-body)',
                          fontFamily: 'var(--font-family-base)',
                          color: 'var(--color-black)'
                        }}
                      >
                        Strategic Decision Making
                      </div>
                      <div 
                        className="text-sm text-muted"
                        style={{
                          fontSize: 'var(--font-small)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Strategy
                      </div>
                    </div>
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}