import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { 
  Building2, 
  Users, 
  Award, 
  Clock, 
  CheckCircle, 
  Phone, 
  Mail,
  MapPin,
  Star,
  Shield,
  Zap,
  Wrench,
  Globe
} from "lucide-react";
import Link from "next/link";
import Image from "next/image";
import SliderComponent from "@/components/SliderComponent";
import ProductImageSlider from "@/components/ProductImageSlider";
import TestimonialSlider from "@/components/TestimonialSlider";
import { 
  companyStore, 
  productStore, 
  featureStore, 
  testimonialStore,
  sliderStore,
  initializeDefaultData 
} from "@/lib/data-store";

// Icon mapping for features
const iconMap = {
  Award: Award,
  Zap: Zap,
  Wrench: Wrench,
  Users: Users,
  Globe: Globe,
  Shield: Shield,
  Building2: Building2,
  Clock: Clock,
  CheckCircle: CheckCircle
};

const IconComponent = ({ iconName }: { iconName: string }) => {
  const Icon = iconMap[iconName as keyof typeof iconMap] || Building2;
  return <Icon className="h-8 w-8" />;
};

export default async function AdminHomePage() {
  // Initialize default data and fetch from admin store
  await initializeDefaultData();
  
  const companies = await companyStore.getAll();
  const products = await productStore.getAll();
  const features = await featureStore.getAll();
  const testimonials = await testimonialStore.getAll();
  const sliders = await sliderStore.getAll();
  
  const companyInfo = companies[0];
  const activeProducts = products.filter(p => p.isActive).sort((a, b) => a.order - b.order);
  const activeFeatures = features.filter(f => f.isActive).sort((a, b) => a.order - b.order);
  const activeTestimonials = testimonials.filter(t => t.isActive).sort((a, b) => a.order - b.order);
  const heroSlider = sliders.find(s => s.type === 'hero' && s.isActive);

  return (
    <div className="min-h-screen">
      {/* Hero Slider Section */}
      {heroSlider ? (
        <SliderComponent slider={heroSlider} />
      ) : (
        /* Fallback Hero Section */
        <section className="relative py-20 bg-gradient-to-r from-blue-900/90 to-slate-900/90">
          <div className="absolute inset-0 bg-black/40"></div>
          {!companyInfo?.heroImage && (
            <div className="absolute inset-0">
              <div className="w-full h-full bg-gradient-to-br from-blue-800 via-slate-800 to-gray-800"></div>
            </div>
          )}
          {companyInfo?.heroImage && (
            <div className="absolute inset-0">
              <Image
                src={companyInfo.heroImage}
                alt="SAAM Cabins"
                fill
                className="object-cover"
                priority
              />
            </div>
          )}
          
          <div className="relative z-20 container mx-auto px-4 text-center text-white">
            <h1 className="text-4xl md:text-6xl font-bold mb-6">
              {companyInfo?.tagline || "PORTA CABIN SOLUTIONS!"}
            </h1>
            <p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
              {companyInfo?.description || "Leading manufacturer and supplier of high-quality porta cabins, security cabins, and containers across the United Arab Emirates."}
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white px-8">
                <Phone className="mr-2 h-5 w-5" />
                Call: {companyInfo?.phoneNumber || "+971 58 201 2073"}
              </Button>
              <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10 px-8" asChild>
                <Link href="/contact">
                  <Mail className="mr-2 h-5 w-5" />
                  Get Quote
                </Link>
              </Button>
            </div>
          </div>
        </section>
      )}

      {/* Company Stats */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <div>
              <h3 className="text-3xl font-bold text-blue-600 mb-2">500+</h3>
              <p className="text-gray-600">Projects Completed</p>
            </div>
            <div>
              <h3 className="text-3xl font-bold text-blue-600 mb-2">50+</h3>
              <p className="text-gray-600">Happy Clients</p>
            </div>
            <div>
              <h3 className="text-3xl font-bold text-blue-600 mb-2">10+</h3>
              <p className="text-gray-600">Years Experience</p>
            </div>
            <div>
              <h3 className="text-3xl font-bold text-blue-600 mb-2">24/7</h3>
              <p className="text-gray-600">Support Available</p>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
              Why Choose {companyInfo?.companyName || "SAAM Cabins"}?
            </h2>
            <p className="text-lg text-gray-700 max-w-3xl mx-auto">
              We provide comprehensive porta cabin solutions with unmatched quality and service across the UAE.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {activeFeatures.map((feature, index) => (
              <Card key={feature.id} className="text-center hover:shadow-lg transition-shadow">
                <CardHeader>
                  <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                    <div className="text-blue-600">
                      <IconComponent iconName={feature.icon} />
                    </div>
                  </div>
                  <CardTitle className="text-xl font-bold">{feature.title}</CardTitle>
                  <CardDescription>{feature.description}</CardDescription>
                </CardHeader>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Products Showcase */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
              Our Product Range
            </h2>
            <p className="text-lg text-gray-700 max-w-3xl mx-auto">
              Explore our comprehensive range of porta cabins designed for various applications and industries.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
            {activeProducts.slice(0, 3).map((product, index) => (
              <Card key={product.id} className="overflow-hidden hover:shadow-lg transition-shadow">
                <div className="relative">
                  <ProductImageSlider 
                    images={product.images || []} 
                    productName={product.name} 
                    className="h-48"
                  />
                  <Badge className="absolute top-4 left-4 bg-blue-600 z-10">
                    {product.category}
                  </Badge>
                </div>
                
                <CardHeader>
                  <CardTitle className="text-xl font-bold">{product.name}</CardTitle>
                  <CardDescription>{product.shortDescription}</CardDescription>
                </CardHeader>
                
                <CardContent>
                  <div className="space-y-2 mb-4">
                    {product.features.slice(0, 3).map((feature, idx) => (
                      <div key={idx} className="flex items-center text-sm text-gray-600">
                        <CheckCircle className="h-3 w-3 mr-2 text-blue-600" />
                        <span>{feature}</span>
                      </div>
                    ))}
                  </div>
                  
                  <Button className="w-full bg-blue-600 hover:bg-blue-700" asChild>
                    <Link href={`/products/${product.slug}`}>
                      Learn More
                    </Link>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>

          <div className="text-center">
            <Button size="lg" variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-50" asChild>
              <Link href="/products">View All Products</Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      {/* Client Testimonials Slider */}
      {activeTestimonials.length > 0 && (
        <section className="py-16 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
                Client Testimonials
              </h2>
              <p className="text-lg text-gray-700">
                What our satisfied customers say about our porta cabin solutions
              </p>
            </div>

            <TestimonialSlider 
              testimonials={activeTestimonials}
              autoPlay={true}
              autoPlayDelay={5000}
              showArrows={true}
              showDots={true}
            />
          </div>
        </section>
      )}

      {/* Call to Action */}
      <section className="py-16 bg-blue-800 text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">
            Ready to Get Started?
          </h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Contact us today for a free consultation and quote for your porta cabin requirements.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-white text-blue-800 hover:bg-gray-100 px-8">
              <Phone className="mr-2 h-5 w-5" />
              Call: {companyInfo?.phoneNumber || "+971 58 201 2073"}
            </Button>
            <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10 px-8" asChild>
              <Link href="/contact">
                <Mail className="mr-2 h-5 w-5" />
                Get Free Quote
              </Link>
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}