import { Settings } from 'lucide-react';
import ServiceCard from '../components/ServiceCard';
import { useServices } from '../hooks/useServices';
import { useSettings } from '../hooks/useSettings';

interface HomePageProps {
  onAdminClick: () => void;
  isAdmin: boolean;
}

function HomePage({ onAdminClick, isAdmin }: HomePageProps) {
  const { services, loading: servicesLoading } = useServices();
  const { logo, loading: logoLoading } = useSettings();

  if (servicesLoading || logoLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-muted-foreground">جاري التحميل...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gov-sand via-white to-muted">
      {/* Header */}
      <header className="bg-gradient-to-l from-primary to-primary/90 text-white shadow-lg">
        <div className="container mx-auto px-4 py-6">
          <div className="flex items-center justify-between">
            {/* Logo */}
            <div className="flex items-center gap-4">
              <img 
                src={logo} 
                alt="شعار وزارة التعليم" 
                className="w-16 h-16 object-contain bg-white rounded-lg p-2 shadow-md"
              />
            </div>

            {/* Title */}
            <div className="flex-1 text-center">
              <h1 className="text-2xl md:text-3xl font-bold mb-1">
                قسم النشاط الطلابي
              </h1>
              <p className="text-sm md:text-base text-white/90">
                إدارة التعليم بالمنطقة الشرقية
              </p>
            </div>

            {/* Admin Button */}
            <div className="flex items-center gap-4">
              {isAdmin && (
                <button
                  onClick={onAdminClick}
                  className="p-3 rounded-lg bg-white/10 hover:bg-white/20 transition-all duration-300 hover:scale-105"
                  aria-label="لوحة التحكم"
                >
                  <Settings className="w-6 h-6" />
                </button>
              )}
              {!isAdmin && (
                <button
                  onClick={onAdminClick}
                  className="text-sm px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 transition-all duration-300"
                >
                  تسجيل الدخول
                </button>
              )}
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-12 md:py-16">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-12">
            <div className="inline-block mb-6">
              <div className="w-20 h-1 bg-gradient-to-r from-primary to-accent mx-auto rounded-full"></div>
            </div>
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
              الخدمات الإلكترونية
            </h2>
            <p className="text-lg text-muted-foreground">
              منصة متكاملة لجميع الخدمات والأنشطة الطلابية
            </p>
          </div>

          {/* Services Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
            {services.map((service) => (
              <ServiceCard key={service.id} service={service} />
            ))}
          </div>

          {services.length === 0 && (
            <div className="text-center py-12">
              <p className="text-muted-foreground text-lg">
                لا توجد خدمات متاحة حالياً
              </p>
            </div>
          )}
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-primary/5 border-t border-primary/10 mt-auto py-8">
        <div className="container mx-auto px-4 text-center">
          <p className="text-muted-foreground">
            © 2026 قسم النشاط الطلابي - إدارة التعليم بالمنطقة الشرقية
          </p>
          <p className="text-sm text-muted-foreground mt-2">
            جميع الحقوق محفوظة
          </p>
        </div>
      </footer>
    </div>
  );
}

export default HomePage;