'use client'

import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { useAuth } from '@/contexts/AuthContext'
import Link from 'next/link'
import { 
  Building2,
  Shield,
  Users,
  TrendingUp,
  Package,
  CheckSquare,
  LogIn
} from 'lucide-react'

export default function Home() {
  const { isAuthenticated, isLoading } = useAuth()
  const router = useRouter()

  useEffect(() => {
    if (!isLoading && isAuthenticated) {
      router.push('/dashboard')
    }
  }, [isAuthenticated, isLoading, router])

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">جاري التحميل...</p>
        </div>
      </div>
    )
  }

  const features = [
    {
      icon: Users,
      title: 'إدارة جهات الاتصال',
      description: 'نظام شامل لإدارة العملاء والموردين وجهات الاتصال'
    },
    {
      icon: TrendingUp,
      title: 'إدارة المبيعات',
      description: 'تتبع الفرص التجارية والصفقات وخطوط المبيعات'
    },
    {
      icon: Package,
      title: 'المخزون والأصول',
      description: 'إدارة المنتجات والمخازن والأصول الثابتة'
    },
    {
      icon: CheckSquare,
      title: 'المشاريع والمهام',
      description: 'تخطيط وتنفيذ ومتابعة المشاريع والمهام'
    },
    {
      icon: Shield,
      title: 'أمان متقدم',
      description: 'نظام صلاحيات متقدم وتتبع كامل للعمليات'
    },
    {
      icon: Building2,
      title: 'إدارة متكاملة',
      description: 'حل شامل لجميع احتياجات المؤسسة في منصة واحدة'
    }
  ]

  return (
    <main className="min-h-screen bg-gradient-to-br from-primary-50 via-white to-primary-50">
      {/* Header */}
      <header className="bg-white/80 backdrop-blur-sm shadow-sm border-b sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="bg-primary-600 p-2 rounded-lg">
                <Building2 className="h-8 w-8 text-white" />
              </div>
              <div>
                <h1 className="text-2xl font-bold text-gray-900">ATMATA</h1>
                <p className="text-sm text-gray-600">نظام إدارة علاقات العملاء</p>
              </div>
            </div>
            <Link
              href="/login"
              className="flex items-center gap-2 px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
            >
              <LogIn className="h-5 w-5" />
              <span className="font-semibold">تسجيل الدخول</span>
            </Link>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="text-center mb-20">
          <div className="inline-block mb-6 px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-semibold">
            نظام CRM متكامل للمؤسسات
          </div>
          <h2 className="text-5xl font-bold text-gray-900 mb-6">
            حل شامل لإدارة أعمالك
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
            نظام متكامل يجمع إدارة العملاء، المبيعات، المخزون، المشاريع، الموارد البشرية، والتسويق في منصة واحدة آمنة وسهلة الاستخدام
          </p>
          <Link
            href="/login"
            className="inline-flex items-center gap-3 px-8 py-4 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 text-lg font-semibold"
          >
            <LogIn className="h-6 w-6" />
            <span>ابدأ الآن</span>
          </Link>
        </div>

        {/* Features Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
          {features.map((feature, index) => {
            const Icon = feature.icon
            return (
              <div
                key={index}
                className="bg-white rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 p-8 border border-gray-100 transform hover:-translate-y-1"
              >
                <div className="bg-primary-100 w-14 h-14 rounded-xl flex items-center justify-center mb-4">
                  <Icon className="h-7 w-7 text-primary-600" />
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-3">
                  {feature.title}
                </h3>
                <p className="text-gray-600 leading-relaxed">
                  {feature.description}
                </p>
              </div>
            )
          })}
        </div>

        {/* CTA Section */}
        <div className="bg-gradient-to-l from-primary-600 to-primary-700 rounded-3xl shadow-2xl p-12 text-center text-white">
          <h3 className="text-3xl font-bold mb-4">
            جاهز لتحويل إدارة أعمالك؟
          </h3>
          <p className="text-xl mb-8 text-primary-100">
            ابدأ باستخدام Atmata System اليوم وشاهد الفرق
          </p>
          <Link
            href="/login"
            className="inline-flex items-center gap-3 px-8 py-4 bg-white text-primary-600 rounded-xl hover:bg-gray-50 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 text-lg font-semibold"
          >
            <LogIn className="h-6 w-6" />
            <span>تسجيل الدخول الآن</span>
          </Link>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-white border-t mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="text-center">
            <div className="flex items-center justify-center gap-2 mb-3">
              <Building2 className="h-6 w-6 text-primary-600" />
              <span className="text-lg font-bold text-gray-900">Atmata System</span>
            </div>
            <p className="text-gray-600">
              © 2026 ATMATA جميع الحقوق محفوظة.
            </p>
          </div>
        </div>
      </footer>
    </main>
  )
}