import React, { useState } from 'react';
import { Search, Code, Link2, FileText, Hash, RefreshCw, GitCompare, Database } from 'lucide-react';
import ToolCard from '../components/ToolCard';

const Home = () => {
  const [searchTerm, setSearchTerm] = useState('');

  const tools = [
    {
      icon: Code,
      title: 'JSON Encoder/Decoder',
      description: 'Format, validate, and minify JSON data with syntax highlighting',
      path: '/json',
      tags: ['JSON', 'Format', 'Validate']
    },
    {
      icon: Database,
      title: 'Serialize Encoder/Decoder',
      description: 'Encode and decode serialized data (PHP serialize format)',
      path: '/serialize',
      tags: ['PHP', 'Serialize', 'Unserialize']
    },
    {
      icon: Link2,
      title: 'URL Encoder/Decoder',
      description: 'Encode and decode URLs and query parameters',
      path: '/url',
      tags: ['URL', 'Encode', 'Decode']
    },
    {
      icon: Hash,
      title: 'Base64 Encoder/Decoder',
      description: 'Convert text to Base64 and back with support for files',
      path: '/base64',
      tags: ['Base64', 'Encode', 'Binary']
    },
    {
      icon: RefreshCw,
      title: 'CSV ↔ JSON Converter',
      description: 'Convert between CSV and JSON formats with custom delimiters',
      path: '/csv-json',
      tags: ['CSV', 'JSON', 'Convert']
    },
    {
      icon: FileText,
      title: 'Code Beautifier/Minifier',
      description: 'Format and minify JSON, XML, SQL, CSS, and HTML code',
      path: '/beautifier',
      tags: ['Format', 'Minify', 'Beautify']
    },
    {
      icon: GitCompare,
      title: 'Text Diff Checker',
      description: 'Compare two texts and highlight differences line by line',
      path: '/diff',
      tags: ['Diff', 'Compare', 'Text']
    }
  ];

  const filteredTools = tools.filter(tool =>
    tool.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
    tool.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
    tool.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  return (
    <div className="max-w-6xl mx-auto">
      {/* Hero Section */}
      <div className="text-center mb-12">
        <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
          Developer Tools
        </h1>
        <p className="text-xl text-gray-600 dark:text-gray-300 mb-8">
          Essential utilities for web developers - fast, local, and easy to use
        </p>
        
        {/* Search */}
        <div className="relative max-w-md mx-auto">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
          <input
            type="text"
            placeholder="Search tools..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent"
          />
        </div>
      </div>

      {/* Tools Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredTools.map((tool, index) => (
          <ToolCard
            key={index}
            icon={tool.icon}
            title={tool.title}
            description={tool.description}
            path={tool.path}
            tags={tool.tags}
          />
        ))}
      </div>

      {/* No Results */}
      {filteredTools.length === 0 && (
        <div className="text-center py-12">
          <p className="text-gray-500 dark:text-gray-400 text-lg">
            No tools found matching "{searchTerm}"
          </p>
        </div>
      )}

      {/* Features */}
      <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
        <div className="text-center">
          <div className="bg-primary-100 dark:bg-primary-900 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
            <RefreshCw className="h-8 w-8 text-primary-600" />
          </div>
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
            Lightning Fast
          </h3>
          <p className="text-gray-600 dark:text-gray-300">
            All processing happens locally in your browser for maximum speed and privacy
          </p>
        </div>
        
        <div className="text-center">
          <div className="bg-primary-100 dark:bg-primary-900 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
            <FileText className="h-8 w-8 text-primary-600" />
          </div>
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
            Handle Large Files
          </h3>
          <p className="text-gray-600 dark:text-gray-300">
            Process large text files and data with ease, no size limitations
          </p>
        </div>
        
        <div className="text-center">
          <div className="bg-primary-100 dark:bg-primary-900 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
            <Code className="h-8 w-8 text-primary-600" />
          </div>
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
            Developer Friendly
          </h3>
          <p className="text-gray-600 dark:text-gray-300">
            Clean interface with syntax highlighting and easy copy-paste functionality
          </p>
        </div>
      </div>
    </div>
  );
};

export default Home;