import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TimelineConfig, TimelineSectionComponent } from "../../../../../ui-landing-pages/src/public-api";

@Component({
  selector: 'app-landing-timeline-demo',
  standalone: true,
  imports: [CommonModule, TimelineSectionComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="demo-container">
      <div class="demo-header">
        <h1>Timeline Demo</h1>
        <p>Visual timeline components for roadmaps, company history, and project milestones.</p>
      </div>

      <!-- Vertical Timeline -->
      <div class="demo-section">
        <h2>Vertical Timeline (Default)</h2>
        <ui-lp-timeline [configuration]="verticalConfig"></ui-lp-timeline>
      </div>

      <!-- Horizontal Timeline -->
      <div class="demo-section">
        <h2>Horizontal Timeline</h2>
        <ui-lp-timeline [configuration]="horizontalConfig"></ui-lp-timeline>
      </div>

      <!-- Minimal Theme -->
      <div class="demo-section">
        <h2>Minimal Theme</h2>
        <ui-lp-timeline [configuration]="minimalConfig"></ui-lp-timeline>
      </div>

      <!-- Connected Theme -->
      <div class="demo-section">
        <h2>Connected Theme</h2>
        <ui-lp-timeline [configuration]="connectedConfig"></ui-lp-timeline>
      </div>

      <!-- Product Roadmap -->
      <div class="demo-section">
        <h2>Product Roadmap</h2>
        <ui-lp-timeline [configuration]="roadmapConfig"></ui-lp-timeline>
      </div>
    </div>
  `,
  styles: [`
    .demo-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }

    .demo-header {
      text-align: center;
      margin-bottom: 3rem;
    }

    .demo-header h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      color: #1a1a1a;
    }

    .demo-header p {
      font-size: 1.125rem;
      color: #666;
    }

    .demo-section {
      margin-bottom: 4rem;
    }

    .demo-section h2 {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
      color: #333;
      border-bottom: 2px solid #e0e0e0;
      padding-bottom: 0.5rem;
    }
  `]
})
export class LandingTimelineDemoComponent {
  verticalConfig: TimelineConfig = {
    title: 'Our Company Journey',
    subtitle: 'Key milestones that shaped our growth',
    orientation: 'vertical',
    theme: 'default',
    showDates: true,
    items: [
      {
        id: '1',
        title: 'Company Founded',
        description: 'Started with a vision to revolutionize how teams collaborate and build software together.',
        date: 'January 2020',
        status: 'completed',
        icon: 'rocket'
      },
      {
        id: '2',
        title: 'First Product Launch',
        description: 'Launched our MVP with core features that solve real problems for development teams.',
        date: 'June 2020',
        status: 'completed',
        icon: 'star'
      },
      {
        id: '3',
        title: 'Series A Funding',
        description: 'Secured $5M in Series A funding to accelerate product development and team growth.',
        date: 'March 2021',
        status: 'completed',
        icon: 'check'
      },
      {
        id: '4',
        title: '10,000 Active Users',
        description: 'Reached a major milestone with 10,000+ active users across 50+ countries worldwide.',
        date: 'September 2021',
        status: 'completed',
        icon: 'star'
      },
      {
        id: '5',
        title: 'Major Platform Update',
        description: 'Released version 2.0 with advanced automation, better performance, and new integrations.',
        date: 'December 2022',
        status: 'current',
        icon: 'rocket',
        badge: 'Current'
      },
      {
        id: '6',
        title: 'International Expansion',
        description: 'Planning to open offices in Europe and Asia to better serve our global customer base.',
        date: 'Q2 2024',
        status: 'upcoming'
      }
    ]
  };

  horizontalConfig: TimelineConfig = {
    title: 'Development Process',
    subtitle: 'Our structured approach to building great products',
    orientation: 'horizontal',
    theme: 'default',
    showDates: false,
    items: [
      {
        id: '7',
        title: 'Research & Discovery',
        description: 'Understanding user needs through interviews, surveys, and market analysis.',
        status: 'completed',
        icon: 'check'
      },
      {
        id: '8',
        title: 'Design & Prototyping',
        description: 'Creating wireframes, mockups, and interactive prototypes for validation.',
        status: 'completed',
        icon: 'check'
      },
      {
        id: '9',
        title: 'Development',
        description: 'Building features with clean code, automated testing, and continuous integration.',
        status: 'current',
        icon: 'rocket'
      },
      {
        id: '10',
        title: 'Testing & QA',
        description: 'Comprehensive testing across devices, browsers, and user scenarios.',
        status: 'upcoming'
      },
      {
        id: '11',
        title: 'Launch & Monitor',
        description: 'Deploying to production and monitoring performance and user feedback.',
        status: 'upcoming'
      }
    ]
  };

  minimalConfig: TimelineConfig = {
    title: 'Project Milestones',
    subtitle: 'Clean and simple timeline presentation',
    orientation: 'vertical',
    theme: 'minimal',
    showDates: true,
    items: [
      {
        id: '12',
        title: 'Project Kickoff',
        description: 'Initial team meeting and project scope definition.',
        date: 'Week 1',
        status: 'completed'
      },
      {
        id: '13',
        title: 'Requirements Gathering',
        description: 'Detailed analysis of user requirements and technical specifications.',
        date: 'Week 2-3',
        status: 'completed'
      },
      {
        id: '14',
        title: 'Architecture Planning',
        description: 'System design and technology stack selection.',
        date: 'Week 4',
        status: 'current'
      },
      {
        id: '15',
        title: 'Implementation',
        description: 'Core development phase with iterative releases.',
        date: 'Week 5-12',
        status: 'upcoming'
      }
    ]
  };

  connectedConfig: TimelineConfig = {
    title: 'Feature Evolution',
    subtitle: 'How our features have evolved over time',
    orientation: 'vertical',
    theme: 'connected',
    showDates: true,
    items: [
      {
        id: '16',
        title: 'Basic Dashboard',
        description: 'Simple dashboard with essential metrics and basic user management.',
        date: 'v1.0',
        status: 'completed',
        icon: 'check'
      },
      {
        id: '17',
        title: 'Advanced Analytics',
        description: 'Added detailed analytics, custom reports, and data visualization tools.',
        date: 'v1.5',
        status: 'completed',
        icon: 'check'
      },
      {
        id: '18',
        title: 'Team Collaboration',
        description: 'Introduced real-time collaboration features, comments, and notification system.',
        date: 'v2.0',
        status: 'completed',
        icon: 'check'
      },
      {
        id: '19',
        title: 'AI-Powered Insights',
        description: 'Implementing machine learning algorithms for predictive analytics and smart recommendations.',
        date: 'v2.5',
        status: 'current',
        icon: 'rocket',
        badge: 'In Progress'
      }
    ]
  };

  roadmapConfig: TimelineConfig = {
    title: '2024 Product Roadmap',
    subtitle: 'Exciting features and improvements coming soon',
    orientation: 'horizontal',
    theme: 'default',
    showDates: true,
    items: [
      {
        id: '20',
        title: 'Mobile App',
        description: 'Native iOS and Android applications with offline support.',
        date: 'Q1 2024',
        status: 'completed',
        icon: 'check'
      },
      {
        id: '21',
        title: 'API v3',
        description: 'Complete API overhaul with GraphQL support and improved performance.',
        date: 'Q2 2024',
        status: 'current',
        icon: 'rocket'
      },
      {
        id: '22',
        title: 'Enterprise Features',
        description: 'SSO, advanced permissions, audit logs, and compliance tools.',
        date: 'Q3 2024',
        status: 'upcoming',
        badge: 'Coming Soon'
      },
      {
        id: '23',
        title: 'Global Expansion',
        description: 'Multi-language support, regional data centers, and local partnerships.',
        date: 'Q4 2024',
        status: 'upcoming'
      }
    ]
  };
}