'use client'

import { useState } from 'react'
import { ModelCard } from '@/components/ModelCard'
import { ModelModal } from '@/components/ModelModal'
import { Model3D } from '@/types'
import Image from 'next/image'

const models: Model3D[] = [
  {
    id: '1',
    title: 'Splitter Mini',
    description: 'Open pin locking mechanisms with a simple and concealable non-magnetic tool. Splitter Mini is designed to fit easily in your pocket.',
    detailedDescription: 'The splitter mini is an elegant bypass for the notorious locking gray and green phone bags schools across the country have been implementing. While they can be defeated with nothing more than a pen or decently strong magnet, the Splitter Mini makes the brute-force route a easier and safer. No more worrying about straightening bent pins.',
    images: [
      '/images/splitter-mini/SplitterMini.jpg',
      '/images/splitter-mini/SplitterMiniBack.jpg',
      '/images/splitter-mini/SplitterMiniThickness.jpg',
      '/images/splitter-mini/SplitterMiniWidth.jpg'
    ],
    files: [
      { name: 'Spliter Mini v5.step', type: 'Object', size: '1.8 MB', url: '/models/splitter-mini/Splitter%20Mini%20v5.step' },
      { name: 'Splitter Mini v5 Unbranded.step', type: 'Object', size: '54 KB', url: '/models/splitter-mini/Splitter%20Mini%20v5%20Unbranded.step' },
      { name: 'Splitter Mini v5.f3d', type: 'CAD', size: '958 KB', url: '/models/splitter-mini/Splitter%20Mini%20v5.f3d' }
    ],
    category: 'Accessibility',
  },
  {
    id: '2',
    title: 'Splitter XL',
    description: 'Open pin locking mechanisms with a simple and concealable non-magnetic tool. Splitter Mini is designed to fit easily in your pocket.',
    detailedDescription: 'The splitter mini is an elegant bypass for the notorious locking gray and green phone bags schools across the country have been implementing. While they can be defeated with nothing more than a pen or decently strong magnet, the Splitter Mini makes the brute-force route a easier and safer. No more worrying about straightening bent pins.',
    images: [
      '/images/splitter-xl/SplitterXL.jpg',
      '/images/splitter-xl/SplitterXLThickness.jpg',
      '/images/splitter-xl/SplitterXLWidth.jpg'
    ],
    files: [
      { name: 'Spliter XL v6.step', type: 'Object', size: '1.7 MB', url: '/models/splitter-xl/Splitter%20XL%20v6.step' },
      { name: 'Splitter XL v6 Unbranded.step', type: 'Object', size: '55 KB', url: '/models/splitter-xl/Splitter%20XL%20v6%20Unbranded.step' },
      { name: 'Splitter XL v6.f3d', type: 'CAD', size: '900 KB', url: '/models/splitter-xl/Splitter%20XL%20v6.f3d' }
    ],
    category: 'Accessibility',
  }
]

export default function Models3D() {
  const [selectedModel, setSelectedModel] = useState<Model3D | null>(null)
  const [filter, setFilter] = useState<string>('All')

  const categories = ['All', 'Accessibility', 'Ergonomics', 'Privacy', 'Organization']
  
  const filteredModels = filter === 'All' 
    ? models 
    : models.filter(model => model.category === filter)

  return (
    <div className="min-h-screen py-16 px-4">
      <div className="max-w-7xl mx-auto">
        {/* Hero Section */}
        <div className="text-center mb-16">
          <h1 className="text-4xl md:text-6xl font-bold mb-6 text-primary">
            3D Models
          </h1>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto mb-8">
            Open-source 3D printable designs for accessibility, privacy, and digital rights
          </p>
          
          {/* Filter Tabs */}
          <div className="flex flex-wrap justify-center gap-2">
            {categories.map((category) => (
              <button
                key={category}
                onClick={() => setFilter(category)}
                className={`px-4 py-2 rounded-full transition-colors ${
                  filter === category
                    ? 'bg-primary text-primary-foreground'
                    : 'bg-secondary hover:bg-secondary/80'
                }`}
              >
                {category}
              </button>
            ))}
          </div>
        </div>

        {/* Models Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {filteredModels.map((model) => (
            <ModelCard
              key={model.id}
              model={model}
              onClick={() => setSelectedModel(model)}
            />
          ))}
        </div>

        {/* Modal */}
        {selectedModel && (
          <ModelModal
            model={selectedModel}
            onClose={() => setSelectedModel(null)}
          />
        )}
      </div>
    </div>
  )
}