import { useState } from '@wordpress/element';
import { 
    ChartBarIcon, 
    TrashIcon, 
    DocumentMagnifyingGlassIcon, 
    ArrowPathIcon, 
    DocumentTextIcon,
    CodeBracketIcon,
    PhotoIcon,
    CpuChipIcon,
    LightBulbIcon
} from '@heroicons/react/24/outline';
import Layout from '../layout/Layout';

const Dashboard = () => {
    const [activeCategory, setActiveCategory] = useState('all');
    
    const categories = [
        { id: 'all', name: 'All Features' },
        { id: 'optimization', name: 'Optimization' },
        { id: 'security', name: 'Security' },
        { id: 'seo', name: 'SEO' },
        { id: 'management', name: 'Management' }
    ];
    
    const features = [
        {
            id: 1,
            name: 'Site Analyzer',
            description: 'Get a complete breakdown of your WordPress site\'s disk usage with detailed size information for uploads, plugins, themes, database, and more.',
            icon: ChartBarIcon,
            href: '/site-analyzer',
            categories: ['optimization', 'management'],
            color: 'bg-blue-500'
        },
        {
            id: 2,
            name: 'Plugins & Themes Cleaner',
            description: 'Identify and safely remove deactivated plugins and unused themes with detailed information including size, version, and dependencies.',
            icon: TrashIcon,
            href: '/plugins-themes-cleaner',
            categories: ['optimization', 'security'],
            color: 'bg-purple-500'
        },
        {
            id: 3,
            name: 'Dummy Content Remover',
            description: 'Scan for and remove placeholder content like "Hello World" posts and sample pages. Filter by post type, word count, and creation date.',
            icon: DocumentMagnifyingGlassIcon,
            href: '/plugins-themes-cleaner',
            categories: ['optimization', 'management'],
            color: 'bg-amber-500'
        },
        {
            id: 4,
            name: 'Broken Links Redirector',
            description: 'Automatically detect and handle 404 errors to improve user experience and SEO. Create custom redirect rules for specific URLs.',
            icon: ArrowPathIcon,
            href: '/broken-links-redirector',
            categories: ['seo', 'management'],
            color: 'bg-green-500'
        },
        {
            id: 5,
            name: 'Fast .htaccess & Robots.txt Tweaker',
            description: 'Safely edit critical files with smart suggestions for optimizations and security improvements. Automatic backups and one-click restore.',
            icon: CodeBracketIcon,
            href: '/file-tweaker',
            categories: ['security', 'seo', 'optimization'],
            color: 'bg-red-500'
        },
        {
            id: 6,
            name: 'Image Optimization',
            description: 'Scan your media library for optimization opportunities. Identify uncompressed images, oversized files, and non-web-friendly formats.',
            icon: PhotoIcon,
            href: '/image-optimization',
            categories: ['optimization'],
            color: 'bg-indigo-500',
            comingSoon: true
        },
        {
            id: 7,
            name: 'Performance Monitor',
            description: 'Track your site\'s performance metrics over time. Get alerts for unusual patterns and identify potential issues before they become critical.',
            icon: CpuChipIcon,
            href: '/performance-monitor',
            categories: ['optimization', 'management'],
            color: 'bg-cyan-500',
            comingSoon: true
        },
        {
            id: 8,
            name: 'Smart Suggestions',
            description: 'Receive intelligent, data-driven recommendations based on your site\'s analysis. Prioritized suggestions to focus on what matters most.',
            icon: LightBulbIcon,
            href: '/smart-suggestions',
            categories: ['optimization', 'security', 'seo'],
            color: 'bg-orange-500',
            comingSoon: true
        }
    ];
    
    // Filter features based on active category
    const filteredFeatures = activeCategory === 'all' 
        ? features 
        : features.filter(feature => feature.categories.includes(activeCategory));
    
    return (
        <Layout>
            <div className="bg-white rounded-lg shadow overflow-hidden">
                {/* Header */}
                <div className="bg-gradient-to-r from-blue-600 to-indigo-700 px-6 py-8 md:py-12">
                    <div className="max-w-4xl mx-auto">
                        <h1 className="text-3xl font-bold text-white">Welcome to CleanX</h1>
                        <p className="mt-2 text-blue-100 text-lg">
                            Your all-in-one WordPress optimization and management toolkit.
                        </p>
                    </div>
                </div>
                
                {/* Category Tabs */}
                <div className="border-b border-gray-200">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <nav className="-mb-px flex space-x-8 overflow-x-auto" aria-label="Categories">
                            {categories.map((category) => (
                                <button
                                    key={category.id}
                                    onClick={() => setActiveCategory(category.id)}
                                    className={`${
                                        activeCategory === category.id
                                            ? 'border-blue-500 text-blue-600'
                                            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                                    } whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm`}
                                >
                                    {category.name}
                                </button>
                            ))}
                        </nav>
                    </div>
                </div>
                
                {/* Feature Grid */}
                <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
                    <div className="px-4 py-6 sm:px-0">
                        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                            {filteredFeatures.map((feature) => (
                                <div
                                    key={feature.id}
                                    className={`relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-all duration-200 hover:shadow-md ${feature.comingSoon ? 'opacity-70' : ''}`}
                                >
                                    <div className="flex items-center">
                                        <div className={`flex h-12 w-12 items-center justify-center rounded-md ${feature.color} text-white`}>
                                            <feature.icon className="h-6 w-6" aria-hidden="true" />
                                        </div>
                                        <div className="ml-4">
                                            <h3 className="text-lg font-medium text-gray-900">
                                                {feature.name}
                                            </h3>
                                        </div>
                                    </div>
                                    
                                    <p className="mt-3 text-sm text-gray-500">
                                        {feature.description}
                                    </p>
                                    
                                    <div className="mt-5 flex items-center justify-between">
                                        <div className="flex flex-wrap gap-2">
                                            {feature.categories.map((category) => (
                                                <span
                                                    key={category}
                                                    className="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800"
                                                >
                                                    {categories.find(c => c.id === category)?.name}
                                                </span>
                                            ))}
                                        </div>
                                        
                                        {feature.comingSoon ? (
                                            <span className="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-800">
                                                Coming Soon
                                            </span>
                                        ) : (
                                            <a
                                                href={`admin.php?page=clenex#${feature.href}`}
                                                className="text-sm font-medium text-blue-600 hover:text-blue-500"
                                            >
                                                Open <span aria-hidden="true">&rarr;</span>
                                            </a>
                                        )}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
                
                {/* Stats Section */}
                <div className="bg-gray-50 border-t border-gray-200">
                    <div className="mx-auto max-w-7xl py-12 px-6 lg:px-8">
                        <div className="mx-auto max-w-4xl text-center">
                            <h2 className="text-2xl font-semibold leading-8 text-gray-900">
                                Trusted by WordPress administrators worldwide
                            </h2>
                            <p className="mt-2 text-lg leading-8 text-gray-600">
                                CleanX helps you optimize and manage your WordPress site with ease.
                            </p>
                        </div>
                        <div className="mx-auto mt-10 max-w-lg grid grid-cols-2 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-3 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-4">
                            <div className="text-center">
                                <div className="text-4xl font-bold text-blue-600">100+</div>
                                <div className="mt-1 text-sm text-gray-500">Optimization Tools</div>
                            </div>
                            <div className="text-center">
                                <div className="text-4xl font-bold text-blue-600">50%</div>
                                <div className="mt-1 text-sm text-gray-500">Average Space Saved</div>
                            </div>
                            <div className="text-center">
                                <div className="text-4xl font-bold text-blue-600">24/7</div>
                                <div className="mt-1 text-sm text-gray-500">Monitoring</div>
                            </div>
                            <div className="text-center">
                                <div className="text-4xl font-bold text-blue-600">5★</div>
                                <div className="mt-1 text-sm text-gray-500">User Rating</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                {/* Getting Started */}
                <div className="bg-white border-t border-gray-200">
                    <div className="mx-auto max-w-7xl py-12 px-6 lg:px-8">
                        <div className="mx-auto max-w-4xl text-center">
                            <h2 className="text-2xl font-semibold leading-8 text-gray-900">
                                Getting Started
                            </h2>
                            <p className="mt-2 text-lg leading-8 text-gray-600">
                                Follow these steps to optimize your WordPress site.
                            </p>
                        </div>
                        <div className="mt-10 max-w-2xl mx-auto">
                            <ol className="space-y-6">
                                <li className="relative flex gap-x-4">
                                    <div className="absolute left-0 top-0 flex w-6 h-6 items-center justify-center rounded-full bg-blue-600 text-white text-sm font-medium">
                                        1
                                    </div>
                                    <div className="ml-10">
                                        <h3 className="text-lg font-semibold text-gray-900">Run Site Analyzer</h3>
                                        <p className="mt-1 text-sm text-gray-600">
                                            Get a complete breakdown of your site's disk usage to identify optimization opportunities.
                                        </p>
                                    </div>
                                </li>
                                <li className="relative flex gap-x-4">
                                    <div className="absolute left-0 top-0 flex w-6 h-6 items-center justify-center rounded-full bg-blue-600 text-white text-sm font-medium">
                                        2
                                    </div>
                                    <div className="ml-10">
                                        <h3 className="text-lg font-semibold text-gray-900">Clean Unused Plugins & Themes</h3>
                                        <p className="mt-1 text-sm text-gray-600">
                                            Remove deactivated plugins and unused themes to reduce security risks and save space.
                                        </p>
                                    </div>
                                </li>
                                <li className="relative flex gap-x-4">
                                    <div className="absolute left-0 top-0 flex w-6 h-6 items-center justify-center rounded-full bg-blue-600 text-white text-sm font-medium">
                                        3
                                    </div>
                                    <div className="ml-10">
                                        <h3 className="text-lg font-semibold text-gray-900">Optimize .htaccess & robots.txt</h3>
                                        <p className="mt-1 text-sm text-gray-600">
                                            Apply recommended configurations to improve security, SEO, and performance.
                                        </p>
                                    </div>
                                </li>
                                <li className="relative flex gap-x-4">
                                    <div className="absolute left-0 top-0 flex w-6 h-6 items-center justify-center rounded-full bg-blue-600 text-white text-sm font-medium">
                                        4
                                    </div>
                                    <div className="ml-10">
                                        <h3 className="text-lg font-semibold text-gray-900">Set Up Broken Links Redirector</h3>
                                        <p className="mt-1 text-sm text-gray-600">
                                            Automatically handle 404 errors to improve user experience and SEO.
                                        </p>
                                    </div>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </Layout>
    );
};

export default Dashboard;