"use client";

import Link from 'next/link';
import { SolutionGuard } from '@/components/auth/SolutionGuard';
import {
    UsersIcon,
    CurrencyDollarIcon,
    ChartPieIcon,
    ArrowTrendingUpIcon,
    ListBulletIcon,
    ArrowRightIcon,
} from '@heroicons/react/24/outline';

export default function CRMPage() {
    const stats = [
        { name: 'Leads Totais', value: '124', icon: UsersIcon, color: 'blue' },
        { name: 'Oportunidades', value: 'R$ 450k', icon: CurrencyDollarIcon, color: 'green' },
        { name: 'Taxa de Conversão', value: '24%', icon: ChartPieIcon, color: 'purple' },
        { name: 'Crescimento', value: '+12%', icon: ArrowTrendingUpIcon, color: 'orange' },
    ];

    const quickLinks = [
        {
            name: 'Clientes',
            description: 'Gerencie seus contatos e clientes',
            icon: UsersIcon,
            href: '/crm/clientes',
            color: 'blue',
        },
        {
            name: 'Listas',
            description: 'Organize clientes em listas',
            icon: ListBulletIcon,
            href: '/crm/listas',
            color: 'purple',
        },
    ];

    return (
        <SolutionGuard requiredSolution="crm">
            <div className="p-6 h-full overflow-auto">
                <div className="space-y-6">
                    <div>
                        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
                            CRM
                        </h1>
                        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
                            Visão geral do relacionamento com clientes
                        </p>
                    </div>

                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                        {stats.map((stat) => {
                            const Icon = stat.icon;
                            return (
                                <div
                                    key={stat.name}
                                    className="group relative overflow-hidden rounded-xl bg-white dark:bg-gray-900 p-4 border border-gray-200 dark:border-gray-800 transition-all"
                                >
                                    <div className="flex items-center justify-between">
                                        <div>
                                            <p className="text-xs font-medium text-gray-600 dark:text-gray-400">
                                                {stat.name}
                                            </p>
                                            <p className="mt-1 text-2xl font-bold text-gray-900 dark:text-white">
                                                {stat.value}
                                            </p>
                                        </div>
                                        <div
                                            className={`rounded-lg p-2 bg-${stat.color}-100 dark:bg-${stat.color}-900/20`}
                                        >
                                            <Icon
                                                className={`h-5 w-5 text-${stat.color}-600 dark:text-${stat.color}-400`}
                                            />
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>

                    {/* Quick Links */}
                    <div className="mb-6">
                        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                            Acesso Rápido
                        </h2>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            {quickLinks.map((link) => {
                                const Icon = link.icon;
                                return (
                                    <Link
                                        key={link.name}
                                        href={link.href}
                                        className="group relative overflow-hidden rounded-xl bg-white dark:bg-gray-900 p-6 border border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-700 transition-all hover:shadow-lg"
                                    >
                                        <div className="flex items-start justify-between">
                                            <div className="flex items-start gap-4">
                                                <div
                                                    className={`rounded-lg p-3 bg-${link.color}-100 dark:bg-${link.color}-900/20`}
                                                >
                                                    <Icon
                                                        className={`h-6 w-6 text-${link.color}-600 dark:text-${link.color}-400`}
                                                    />
                                                </div>
                                                <div>
                                                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
                                                        {link.name}
                                                    </h3>
                                                    <p className="text-sm text-gray-600 dark:text-gray-400">
                                                        {link.description}
                                                    </p>
                                                </div>
                                            </div>
                                            <ArrowRightIcon className="w-5 h-5 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 group-hover:translate-x-1 transition-all" />
                                        </div>
                                    </Link>
                                );
                            })}
                        </div>
                    </div>

                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div className="rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-6 h-64 flex items-center justify-center">
                            <p className="text-gray-500">Funil de Vendas (Em breve)</p>
                        </div>
                        <div className="rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-6 h-64 flex items-center justify-center">
                            <p className="text-gray-500">Atividades Recentes (Em breve)</p>
                        </div>
                    </div>
                </div>
            </div>
        </SolutionGuard>
    );
}