'use client'

import { useState } from 'react'
import Link from 'next/link'
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'

const videos = [
  {
    id: 'dgE8nyaxdJI',
    title: 'Seaga HY900 Overview',
    category: 'all'
  },
  {
    id: 'HcVuro9drHo',
    title: 'Troubleshooting Vertical Drop',
    category: 'troubleshooting-vertical-drop'
  },
  {
    id: '-FGJVfZSMAg',
    title: 'Loading Cans',
    category: 'loading-cans'
  },
  {
    id: '-AzbNKq9nHg',
    title: 'Loading Bottles',
    category: 'loading-bottles'
  },
  {
    id: 'LeKX2zJzFMY',
    title: 'Changing Can to Bottle',
    category: 'changing-can-to-bottle'
  }
]

const filterCategories = [
  { value: '', label: 'All' },
  { value: 'troubleshooting-vertical-drop', label: 'Troubleshooting Vertical Drop' },
  { value: 'loading-cans', label: 'Loading Cans' },
  { value: 'loading-bottles', label: 'Loading Bottles' },
  { value: 'changing-can-to-bottle', label: 'Changing Can to Bottle' }
]

export default function SeagaHY900SupportPage() {
  const [selectedCategory, setSelectedCategory] = useState<string>('')

  const filteredVideos = videos.filter(video => 
    selectedCategory === '' || 
    selectedCategory === 'all' || 
    video.category === selectedCategory
  )

  return (
    <article className="container mx-auto px-4 py-8 md:py-12 max-w-6xl">
      <header className="mb-8 md:mb-12 text-center">
        <h1 className="text-4xl md:text-5xl font-bold mb-4 tracking-tight text-balance">
          Seaga HY 900 Support
        </h1>
      </header>
      
      <div className="mb-8 text-center">
        <p className="text-lg mb-6">Please watch the videos to learn more about your HY 900</p>
        <Button asChild>
          <Link href="/manuals/Seaga/seaga-hy900-owners-manual.pdf">
            Owner's Manual
          </Link>
        </Button>
      </div>

      <div className="mb-12">
        <div className="aspect-video w-full max-w-4xl mx-auto mb-8">
          <iframe
            className="w-full h-full rounded-lg"
            src={`https://www.youtube.com/embed/${videos[0].id}`}
            title={videos[0].title}
            frameBorder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          />
        </div>
      </div>

      <section className="mb-8">
        <h2 className="text-2xl font-semibold mb-6 text-center">Video Tutorials</h2>
        
        {/* Filter Buttons */}
        <div className="mb-8 flex flex-wrap justify-center gap-3">
          {filterCategories.map((category) => (
            <Button
              key={category.value}
              onClick={() => setSelectedCategory(category.value)}
              variant={selectedCategory === category.value ? 'default' : 'outline'}
              size="sm"
            >
              {category.label}
            </Button>
          ))}
        </div>

        {/* Video Gallery */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {filteredVideos.map((video) => (
            <Card 
              key={video.id} 
              className="overflow-hidden hover:shadow-lg transition-shadow"
            >
              <div className="aspect-video relative">
                <iframe
                  className="w-full h-full"
                  src={`https://www.youtube.com/embed/${video.id}`}
                  title={video.title}
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                />
              </div>
              <CardContent className="p-4">
                <h3 className="font-semibold text-base">{video.title}</h3>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>
    </article>
  )
}