"use client"

import Link from "next/link"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { 
  Briefcase, 
  Target, 
  TrendingUp, 
  Users, 
  Calendar,
  Building2,
  Lightbulb,
  BarChart3,
  Globe,
  Zap,
  ArrowRight
} from "lucide-react"

interface Expertise {
  title: string
  skills: string[]
}

interface Journey {
  title: string
  company: string
  period: string
  description: string
  isCurrent: boolean
}

interface SkillGroup {
  title: string
  skills: string[]
}

interface PortfolioPageProps {
  page: {
    title: string
    content: string
    frontmatter?: {
      title?: string
      summary?: string
      cta?: string
      ctaLink?: string
      profileImage?: string
    }
  }
}

export function PortfolioPage({ page }: PortfolioPageProps) {
  const frontmatter = page.frontmatter || {}
  
  // Parse content sections
  const sections = parseContentSections(page.content)
  
  return (
    <div className="min-h-screen bg-background">
      <main className="container mx-auto px-4 py-8 max-w-7xl">
        {/* Hero Section */}
        <section className="mb-20">
          <div className="grid lg:grid-cols-3 gap-12 items-start">
            {/* Main Content */}
            <div className="lg:col-span-2">
              <div className="mb-8">
                <h1 className="text-5xl font-bold text-foreground text-balance leading-tight mb-6">
                  {frontmatter.title || page.title}
                </h1>
                <p className="text-xl text-muted-foreground text-pretty leading-relaxed mb-8 max-w-3xl">
                  {frontmatter.summary}
                </p>
                {frontmatter.cta && frontmatter.ctaLink && (
                  <Button asChild size="lg" className="group">
                    <Link href={frontmatter.ctaLink}>
                      {frontmatter.cta}
                      <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                    </Link>
                  </Button>
                )}
              </div>
              
              {/* Professional Summary */}
              {sections.professionalSummary && (
                <div className="prose prose-lg max-w-none">
                  <div dangerouslySetInnerHTML={{ __html: sections.professionalSummary }} />
                </div>
              )}
            </div>
            
            {/* Sidebar */}
            <div className="lg:col-span-1">
              {/* Profile Image */}
              <div className="sticky top-24">
                <div className="w-64 h-64 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center mx-auto shadow-lg">
                  {frontmatter.profileImage ? (
                    <img 
                      src={frontmatter.profileImage} 
                      alt="Nhi Vo" 
                      className="w-56 h-56 rounded-full object-cover"
                    />
                  ) : (
                    <div className="w-56 h-56 rounded-full bg-primary/10 flex items-center justify-center">
                      <span className="text-6xl font-bold text-primary">NV</span>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Core Expertise Section */}
        {sections.coreExpertise && (
          <section className="mb-20">
            <h2 className="text-3xl font-bold text-foreground mb-8">Core Expertise</h2>
            <div className="grid md:grid-cols-3 gap-6">
              {sections.coreExpertise.map((expertise: Expertise, index: number) => (
                <Card key={index} className="border-l-4 border-l-primary hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                  <CardHeader>
                    <CardTitle className="text-lg flex items-center gap-2">
                      {getExpertiseIcon(expertise.title)}
                      {expertise.title}
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-3 text-sm text-muted-foreground">
                      {expertise.skills.map((skill: string, skillIndex: number) => (
                        <li key={skillIndex} className="flex items-center gap-3">
                          <div className="w-2 h-2 rounded-full bg-primary/60 flex-shrink-0"></div>
                          <span>{skill}</span>
                        </li>
                      ))}
                    </ul>
                  </CardContent>
                </Card>
              ))}
            </div>
          </section>
        )}

        {/* Professional Journey Timeline */}
        {sections.professionalJourney && (
          <section className="mb-20">
            <h2 className="text-3xl font-bold text-foreground mb-8">Professional Journey</h2>
            <div className="relative">
              {/* Timeline Line */}
              <div className="absolute left-6 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary/40 to-primary/20"></div>
              
              <div className="space-y-8">
                {sections.professionalJourney.map((role: Journey, index: number) => (
                  <div key={index} className="relative flex gap-8">
                    {/* Timeline Dot */}
                    <div className="absolute left-4 top-2 w-4 h-4 rounded-full bg-primary border-4 border-background shadow-lg"></div>
                    
                    {/* Content */}
                    <div className="ml-12 flex-1">
                      <Card className="hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                        <CardHeader>
                          <div className="flex items-start justify-between">
                            <div>
                              <CardTitle className="text-lg">{role.title}</CardTitle>
                              <div className="flex items-center gap-2 text-muted-foreground mt-2">
                                <Building2 className="h-4 w-4" />
                                <span className="font-medium">{role.company}</span>
                                <span>•</span>
                                <Calendar className="h-4 w-4" />
                                <span>{role.period}</span>
                              </div>
                            </div>
                            {role.isCurrent && (
                              <Badge variant="secondary" className="animate-pulse">Current</Badge>
                            )}
                          </div>
                        </CardHeader>
                        <CardContent>
                          <p className="text-muted-foreground leading-relaxed">
                            {role.description}
                          </p>
                        </CardContent>
                      </Card>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>
        )}

        {/* Skills & Approach */}
        {sections.skillsApproach && (
          <section className="mb-20">
            <h2 className="text-3xl font-bold text-foreground mb-8">Skills & Approach</h2>
            <div className="grid md:grid-cols-2 gap-8">
              {sections.skillsApproach.map((skillGroup: SkillGroup, index: number) => (
                <Card key={index} className="hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                  <CardHeader>
                    <CardTitle className="text-lg flex items-center gap-2">
                      {getSkillGroupIcon(skillGroup.title)}
                      {skillGroup.title}
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="flex flex-wrap gap-2">
                      {skillGroup.skills.map((skill: string, skillIndex: number) => (
                        <Badge key={skillIndex} variant="outline" className="text-xs hover:bg-primary hover:text-primary-foreground transition-colors">
                          {skill}
                        </Badge>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </section>
        )}
      </main>
    </div>
  )
}

// Helper function to parse content sections
function parseContentSections(content: string) {
  const sections: any = {}
  
  // Parse Professional Summary
  const summaryMatch = content.match(/# Professional Summary\n\n([\s\S]*?)(?=\n## |$)/)
  if (summaryMatch) {
    sections.professionalSummary = summaryMatch[1]
  }
  
  // Parse Core Expertise
  const expertiseMatch = content.match(/## Core Expertise\n\n([\s\S]*?)(?=\n## |$)/)
  if (expertiseMatch) {
    sections.coreExpertise = parseExpertise(expertiseMatch[1])
  }
  
  // Parse Professional Journey
  const journeyMatch = content.match(/## Professional Journey\n\n([\s\S]*?)(?=\n## |$)/)
  if (journeyMatch) {
    sections.professionalJourney = parseJourney(journeyMatch[1])
  }
  
  // Parse Skills & Approach
  const skillsMatch = content.match(/## Skills & Approach\n\n([\s\S]*?)(?=\n## |$)/)
  if (skillsMatch) {
    sections.skillsApproach = parseSkills(skillsMatch[1])
  }
  
  return sections
}

function parseExpertise(content: string) {
  const expertise: any[] = []
  const sections = content.split(/\n### /)
  
  sections.slice(1).forEach(section => {
    const lines = section.split('\n')
    const title = lines[0]
    const skills = lines.slice(1)
      .filter(line => line.trim().startsWith('-'))
      .map(line => line.trim().substring(1).trim())
    
    if (title && skills.length > 0) {
      expertise.push({ title, skills })
    }
  })
  
  return expertise
}

function parseJourney(content: string) {
  const journey: any[] = []
  const sections = content.split(/\n### /)
  
  sections.slice(1).forEach(section => {
    const lines = section.split('\n')
    const title = lines[0]
    const companyPeriod = lines[1]?.match(/\*\*(.*?)\*\*/)?.[1] || ''
    const description = lines.slice(2).join('\n').trim()
    
    const [company, period] = companyPeriod.split(' | ')
    const isCurrent = period?.includes('Present')
    
    if (title && company && period) {
      journey.push({
        title,
        company,
        period,
        description,
        isCurrent
      })
    }
  })
  
  return journey
}

function parseSkills(content: string) {
  const skills: any[] = []
  const sections = content.split(/\n### /)
  
  sections.slice(1).forEach(section => {
    const lines = section.split('\n')
    const title = lines[0]
    const skillsList = lines.slice(1)
      .filter(line => line.trim().startsWith('-'))
      .map(line => line.trim().substring(1).trim())
    
    if (title && skillsList.length > 0) {
      skills.push({ title, skills: skillsList })
    }
  })
  
  return skills
}

function getExpertiseIcon(title: string) {
  switch (title.toLowerCase()) {
    case 'business strategy & analysis':
      return <Target className="h-5 w-5 text-primary" />
    case 'commercial excellence':
      return <TrendingUp className="h-5 w-5 text-primary" />
    case 'digital transformation':
      return <Zap className="h-5 w-5 text-primary" />
    default:
      return <Briefcase className="h-5 w-5 text-primary" />
  }
}

function getSkillGroupIcon(title: string) {
  switch (title.toLowerCase()) {
    case 'technical capabilities':
      return <BarChart3 className="h-5 w-5 text-primary" />
    case 'industry focus':
      return <Globe className="h-5 w-5 text-primary" />
    default:
      return <Lightbulb className="h-5 w-5 text-primary" />
  }
}