import React, { useState, useEffect } from 'react';
import { Calculator, User, LogOut, Settings, BarChart3, FileText, Users, Package, TrendingUp, DollarSign } from 'lucide-react';
import { localStorageService, UserData } from '../lib/localStorage';

interface DashboardProps {
  onLogout: () => void;
}

function Dashboard({ onLogout }: DashboardProps) {
  const [userProfile, setUserProfile] = useState<UserData | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    loadUserProfile();
  }, []);

  const loadUserProfile = async () => {
    try {
      const user = localStorageService.getCurrentUser();
      setUserProfile(user);
    } catch (error) {
      console.error('خطأ في تحميل ملف المستخدم:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleLogout = async () => {
    try {
      localStorageService.logoutUser();
      onLogout();
    } catch (error) {
      console.error('خطأ في تسجيل الخروج:', error);
    }
  };

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <Calculator className="h-8 w-8 text-blue-600 mr-3" />
              <span className="font-bold text-xl text-gray-900">AccountPro</span>
            </div>
            
            <div className="flex items-center space-x-4 space-x-reverse">
              <div className="flex items-center text-gray-700">
                <User className="h-5 w-5 mr-2" />
                <span className="text-sm">
                  {userProfile ? `${userProfile.firstName} ${userProfile.lastName}` : 'المستخدم'}
                </span>
              </div>
              <button
                onClick={handleLogout}
                className="flex items-center text-gray-600 hover:text-red-600 transition-colors"
              >
                <LogOut className="h-5 w-5 mr-1" />
                <span className="text-sm">خروج</span>
              </button>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Welcome Section */}
        <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-6 sm:p-8 text-white mb-8">
          <h1 className="text-2xl sm:text-3xl font-bold mb-2">
            مرحباً، {userProfile?.firstName || 'المستخدم'}!
          </h1>
          <p className="text-blue-100 mb-4">
            مرحباً بك في لوحة التحكم الخاصة بـ {userProfile?.companyName || 'منشأتك'}
          </p>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-center">
            <div>
              <div className="text-2xl font-bold">15</div>
              <div className="text-blue-200 text-sm">فاتورة هذا الشهر</div>
            </div>
            <div>
              <div className="text-2xl font-bold">85%</div>
              <div className="text-blue-200 text-sm">نسبة الإنجاز</div>
            </div>
            <div>
              <div className="text-2xl font-bold">12</div>
              <div className="text-blue-200 text-sm">عميل جديد</div>
            </div>
            <div>
              <div className="text-2xl font-bold">98%</div>
              <div className="text-blue-200 text-sm">رضا العملاء</div>
            </div>
          </div>
        </div>

        {/* Quick Actions */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <div className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow cursor-pointer">
            <div className="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
              <FileText className="h-6 w-6 text-blue-600" />
            </div>
            <h3 className="font-semibold text-gray-900 mb-2">إنشاء فاتورة</h3>
            <p className="text-gray-600 text-sm">إنشاء فاتورة جديدة للعملاء</p>
          </div>

          <div className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow cursor-pointer">
            <div className="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
              <Users className="h-6 w-6 text-green-600" />
            </div>
            <h3 className="font-semibold text-gray-900 mb-2">إدارة العملاء</h3>
            <p className="text-gray-600 text-sm">عرض وإدارة بيانات العملاء</p>
          </div>

          <div className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow cursor-pointer">
            <div className="bg-purple-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
              <Package className="h-6 w-6 text-purple-600" />
            </div>
            <h3 className="font-semibold text-gray-900 mb-2">إدارة المخزون</h3>
            <p className="text-gray-600 text-sm">متابعة المنتجات والمخزون</p>
          </div>

          <div className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow cursor-pointer">
            <div className="bg-orange-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
              <BarChart3 className="h-6 w-6 text-orange-600" />
            </div>
            <h3 className="font-semibold text-gray-900 mb-2">التقارير</h3>
            <p className="text-gray-600 text-sm">عرض التقارير والإحصائيات</p>
          </div>
        </div>

        {/* User Profile Info */}
        {userProfile && (
          <div className="bg-white rounded-xl shadow-sm p-6">
            <h2 className="text-xl font-semibold text-gray-900 mb-6">معلومات الحساب</h2>
            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">الاسم الكامل</label>
                <p className="text-gray-900">{userProfile.firstName} {userProfile.lastName}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني</label>
                <p className="text-gray-900">{userProfile.email}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">رقم الهاتف</label>
                <p className="text-gray-900">{userProfile.phone}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">اسم المنشأة</label>
                <p className="text-gray-900">{userProfile.companyName}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">الدور</label>
                <p className="text-gray-900">{userProfile.role}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">القطاع</label>
                <p className="text-gray-900">{userProfile.sector}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">حجم المنشأة</label>
                <p className="text-gray-900">{userProfile.companySize}</p>
              </div>
            </div>
          </div>
        )}
      </main>
    </div>
  );
}