'use client'

import Link from 'next/link'
import { Header } from '@/components/header'
import { Footer } from '@/components/footer'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { CustomSolutionCTA } from '@/components/ui/custom-solution-cta'
import { Mic, Image as ImageIcon, Volume2, Check, ArrowRight, Wrench, Zap } from 'lucide-react'

interface WebTool {
  id: string
  title: string
  description: string
  longDescription: string
  features: string[]
  icon: any
  href: string
  status: 'available' | 'coming-soon' | 'beta'
  category: 'Audio' | 'Image' | 'Text'
}

export default function ToolsPage() {
  const webTools: WebTool[] = [
    {
      id: 'web-speech',
      title: 'Ask AI with Voice',
      description: 'Voice-to-AI conversation with real-time speech recognition and AI responses.',
      longDescription:
        'Complete voice interaction system that converts speech to text, processes it with AI, and speaks back the response. Features continuous speech recognition, OpenAI integration, and automatic text-to-speech playback.',
      features: [
        'Real-time speech recognition',
        'AI-powered responses via OpenAI',
        'Automatic text-to-speech playback',
        'Silence detection and auto-stop',
        'Session management and debugging',
        'Browser-based speech API',
        'Continuous conversation flow',
      ],
      icon: Mic,
      href: '/tools/web-speech',
      status: 'available',
      category: 'Audio',
    },
    {
      id: 'speech-to-text',
      title: 'Speech to Text',
      description: 'Real-time transcription with high accuracy using advanced AI models.',
      longDescription:
        'Convert audio recordings and live speech to text with multiple API integration including Whisper (GPU) and Vosk (CPU). Features real-time transcription, audio recording capability, and wide language support.',
      features: [
        'Real-time transcription',
        'Multiple API integration (Whisper, Vosk)',
        'Audio recording capability',
        'Export transcription as text files',
        'Wide language support',
        'Punctuation and formatting options',
      ],
      icon: Mic,
      href: '/tools/speech-to-text',
      status: 'available',
      category: 'Audio',
    },
    {
      id: 'image-resize',
      title: 'Image Resize',
      description: 'Fast image processing with preset dimensions for social media.',
      longDescription:
        'Resize and optimize images quickly with preset dimensions for social media and web use. Supports multiple formats with quality adjustment and batch processing capabilities.',
      features: [
        'Fast image processing',
        'Preset dimensions for social media',
        'Maintain aspect ratio',
        'Quality adjustment',
        'Multiple formats (JPG, PNG, WebP)',
        'Preview before download',
        'Batch processing',
      ],
      icon: ImageIcon,
      href: '/tools/image-resize',
      status: 'coming-soon',
      category: 'Image',
    },
    {
      id: 'text-to-speech',
      title: 'Text to Speech',
      description: 'High-quality speech synthesis with multiple voice options.',
      longDescription:
        'Convert text to natural-sounding speech with multiple voice options and customizable settings. Features adjustable speech speed, downloadable audio files, and API integration.',
      features: [
        'High-quality speech synthesis',
        'Multiple voice options',
        'Adjustable speech speed',
        'Download as audio file',
        'Text formatting support',
        'API integration',
        'Dialog and logging features',
      ],
      icon: Volume2,
      href: '/tools/text-to-speech',
      status: 'available',
      category: 'Audio',
    },
  ]

  const getStatusBadge = (status: WebTool['status']) => {
    switch (status) {
      case 'available':
        return (
          <Badge
            variant="secondary"
            className="bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400"
          >
            Available
          </Badge>
        )
      case 'beta':
        return (
          <Badge
            variant="secondary"
            className="bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
          >
            Beta
          </Badge>
        )
      case 'coming-soon':
        return (
          <Badge variant="outline" className="text-muted-foreground">
            Coming Soon
          </Badge>
        )
      default:
        return null
    }
  }

  const categories = Array.from(new Set(webTools.map((tool) => tool.category)))

  return (
    <div className="min-h-screen bg-background">
      <Header />
      <main className="container max-w-6xl pt-24 pb-8">
        {/* Page Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold tracking-tight mb-4">SiliconPin Web Tools</h1>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            Powerful web-based tools to enhance your productivity. Process audio, resize images, and
            convert text to speech with our advanced AI-powered utilities.
          </p>
        </div>

        {/* Tools Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
          {webTools.map((tool) => {
            const Icon = tool.icon
            return (
              <Card key={tool.id} className="h-full hover:shadow-lg transition-shadow">
                <CardHeader>
                  <div className="flex items-start justify-between">
                    <div className="flex items-center space-x-3">
                      <div className="bg-primary/10 rounded-lg p-2">
                        <Icon className="w-6 h-6 text-primary" />
                      </div>
                      <div>
                        <CardTitle className="text-xl">{tool.title}</CardTitle>
                        <div className="mt-1">{getStatusBadge(tool.status)}</div>
                      </div>
                    </div>
                  </div>
                  <CardDescription className="text-base">{tool.longDescription}</CardDescription>
                </CardHeader>

                <CardContent>
                  <div className="mb-6">
                    <h4 className="font-medium text-sm mb-3 text-muted-foreground">
                      Key Features:
                    </h4>
                    <ul className="space-y-2">
                      {tool.features.slice(0, 4).map((feature, index) => (
                        <li key={index} className="flex items-start text-sm">
                          <Check className="w-4 h-4 text-green-600 mr-2 mt-0.5 shrink-0" />
                          <span>{feature}</span>
                        </li>
                      ))}
                      {tool.features.length > 4 && (
                        <li className="text-sm text-muted-foreground">
                          +{tool.features.length - 4} more features...
                        </li>
                      )}
                    </ul>
                  </div>

                  <div className="flex gap-3">
                    {tool.status === 'available' ? (
                      <Button asChild className="flex-1">
                        <Link href={tool.href}>
                          <ArrowRight className="w-4 h-4 mr-2" />
                          Launch Tool
                        </Link>
                      </Button>
                    ) : (
                      <Button disabled className="flex-1">
                        {tool.status === 'coming-soon' ? 'Coming Soon' : 'Preview'}
                      </Button>
                    )}
                    <Button variant="outline" size="sm" className="shrink-0">
                      Learn More
                    </Button>
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>

        {/* Need Something Custom */}
        <CustomSolutionCTA description="We offer custom tool development and API integration services for your specific requirements" />
      </main>
      <Footer />
    </div>
  )
}