'use client';
import { useState } from 'react';
import Link from 'next/link';
import styles from './crm.module.css';
import { useToast } from '@/context/ToastContext';

export default function CRMDashboard() {
    const { showToast } = useToast();

    const stats = [
        { label: 'Total Leads', value: '247', change: '+12%', positive: true, icon: '👥' },
        { label: 'Open Opportunities', value: '34', change: '+5%', positive: true, icon: '🎯' },
        { label: 'Quotes Pending', value: '12', change: '-3%', positive: false, icon: '📄' },
        { label: 'Revenue (MTD)', value: '₹8.4L', change: '+18%', positive: true, icon: '💰' }
    ];

    const recentActivities = [
        { type: 'lead', title: 'New lead from website', time: '5 mins ago', icon: '🆕' },
        { type: 'opportunity', title: 'Deal moved to Proposal stage', time: '1 hour ago', icon: '📈' },
        { type: 'quote', title: 'Quote sent to Acme Corp', time: '2 hours ago', icon: '📧' },
        { type: 'won', title: 'Deal won - TechFlow Solutions', time: '3 hours ago', icon: '🎉' }
    ];

    return (
        <div className={styles.crmContainer}>
            <div className={styles.sectionHeader}>
                <div>
                    <h1 className={styles.pageTitle}>CRM Dashboard</h1>
                    <p className={styles.pageSubtitle}>Manage leads, opportunities, and customer relationships</p>
                </div>
                <Link href="/dashboard/crm/leads">
                    <button className={styles.btnPrimary}>View Leads</button>
                </Link>
            </div>

            {/* Stats Grid */}
            <div className={styles.statsGrid}>
                {stats.map((stat, index) => (
                    <div key={index} className={styles.statCard}>
                        <div className={styles.statLabel}>
                            <span style={{ marginRight: '0.5rem' }}>{stat.icon}</span>
                            {stat.label}
                        </div>
                        <div className={styles.statValue}>{stat.value}</div>
                        <div className={`${styles.statChange} ${stat.positive ? styles.positive : styles.negative}`}>
                            <span>{stat.positive ? '↑' : '↓'}</span>
                            <span>{stat.change} from last month</span>
                        </div>
                    </div>
                ))}
            </div>

            {/* Quick Actions & Recent Activity */}
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '2rem' }}>
                {/* Quick Actions */}
                <div className={styles.section}>
                    <h2 className={styles.sectionTitle}>⚡ Quick Actions</h2>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1rem' }}>
                        <Link href="/dashboard/crm/leads">
                            <div style={{
                                background: 'rgba(255,215,0,0.1)',
                                border: '1px solid rgba(255,215,0,0.2)',
                                borderRadius: '8px',
                                padding: '1.5rem',
                                cursor: 'pointer',
                                transition: 'all 0.3s ease'
                            }}
                                onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-4px)'}
                                onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
                            >
                                <div style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>👥</div>
                                <div style={{ fontWeight: 600, color: '#fff', marginBottom: '0.3rem' }}>Manage Leads</div>
                                <div style={{ fontSize: '0.85rem', color: '#888' }}>View and manage all leads</div>
                            </div>
                        </Link>

                        <Link href="/dashboard/crm/opportunities">
                            <div style={{
                                background: 'rgba(0,255,157,0.1)',
                                border: '1px solid rgba(0,255,157,0.2)',
                                borderRadius: '8px',
                                padding: '1.5rem',
                                cursor: 'pointer',
                                transition: 'all 0.3s ease'
                            }}
                                onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-4px)'}
                                onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
                            >
                                <div style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>🎯</div>
                                <div style={{ fontWeight: 600, color: '#fff', marginBottom: '0.3rem' }}>Pipeline</div>
                                <div style={{ fontSize: '0.85rem', color: '#888' }}>Track opportunities</div>
                            </div>
                        </Link>

                        <Link href="/dashboard/crm/quotes">
                            <div style={{
                                background: 'rgba(88,166,255,0.1)',
                                border: '1px solid rgba(88,166,255,0.2)',
                                borderRadius: '8px',
                                padding: '1.5rem',
                                cursor: 'pointer',
                                transition: 'all 0.3s ease'
                            }}
                                onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-4px)'}
                                onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
                            >
                                <div style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>📄</div>
                                <div style={{ fontWeight: 600, color: '#fff', marginBottom: '0.3rem' }}>Quotes</div>
                                <div style={{ fontSize: '0.85rem', color: '#888' }}>Create and send quotes</div>
                            </div>
                        </Link>

                        <Link href="/dashboard/crm/analytics">
                            <div style={{
                                background: 'rgba(255,68,68,0.1)',
                                border: '1px solid rgba(255,68,68,0.2)',
                                borderRadius: '8px',
                                padding: '1.5rem',
                                cursor: 'pointer',
                                transition: 'all 0.3s ease'
                            }}
                                onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-4px)'}
                                onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
                            >
                                <div style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>📊</div>
                                <div style={{ fontWeight: 600, color: '#fff', marginBottom: '0.3rem' }}>Analytics</div>
                                <div style={{ fontSize: '0.85rem', color: '#888' }}>View reports and insights</div>
                            </div>
                        </Link>
                    </div>
                </div>

                {/* Recent Activity */}
                <div className={styles.section}>
                    <h2 className={styles.sectionTitle}>🔔 Recent Activity</h2>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                        {recentActivities.map((activity, index) => (
                            <div key={index} style={{
                                padding: '1rem',
                                background: 'rgba(255,255,255,0.03)',
                                borderRadius: '8px',
                                borderLeft: '3px solid #ffd700'
                            }}>
                                <div style={{ display: 'flex', alignItems: 'start', gap: '0.75rem' }}>
                                    <span style={{ fontSize: '1.5rem' }}>{activity.icon}</span>
                                    <div style={{ flex: 1 }}>
                                        <div style={{ color: '#fff', fontWeight: 500, marginBottom: '0.25rem' }}>
                                            {activity.title}
                                        </div>
                                        <div style={{ fontSize: '0.8rem', color: '#888' }}>
                                            {activity.time}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}