"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import BottomNav from "@/components/BottomNav";
import AppHeader from "@/components/AppHeader";
import ImageSlider from "@/components/ImageSlider";
import {
  Clock,
  Newspaper,
  Heart,
  MapPin,
  BookOpen,
  Users,
  ChevronRight,
  Calendar,
} from "lucide-react";
import { sanitizeHtml } from "@/lib/sanitize";

interface Post {
  id: number;
  title: string;
  excerpt: string;
  image: string | null;
  date: string;
}

const sliderImages = [
  {
    src: "https://stenhagenmosken.se/wp-content/uploads/2026/06/Att-bygga-broar-genom-gemenskap-1170x658.jpeg",
    alt: "Öppet hus evenemang",
    title: "Välkommen till Stenhagen Moskén",
  },
  {
    src: "https://stenhagenmosken.se/wp-content/uploads/2026/05/Den-sista-Jumuah-1-1170x658.jpeg",
    alt: "Fredagsbön",
    title: "Jumu'ah - Fredagsbön",
  },
  {
    src: "https://stenhagenmosken.se/wp-content/uploads/2026/03/Stenhagen-Mosken.jpg",
    alt: "Stenhagen Moskén",
    title: "Islamic Center i Uppsala",
  },
  {
    src: "https://stenhagenmosken.se/wp-content/uploads/2026/03/Moske.jpg",
    alt: "Moskéns interiör",
    title: "En plats för bön och gemenskap",
  },
];

export default function HomePage() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/posts?per_page=3")
      .then((r) => r.json())
      .then((data) => setPosts(data.posts || []))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  return (
    <div className="pb-20">
      <AppHeader />

      {/* Image Slider */}
      <div className="px-4 mt-3">
        <ImageSlider images={sliderImages} autoPlay interval={5000} />
      </div>

      {/* Mawaqit Prayer Times iFrame */}
      <div className="px-4 mt-3">
        <div className="rounded-2xl overflow-hidden border border-gray-200 shadow-sm bg-white">
          <iframe
            src="//mawaqit.net/en/w/stenhagensmoske-uppsala-75266-sweden?showOnly5PrayerTimes=0"
            frameBorder="0"
            scrolling="no"
            className="w-full"
            style={{ height: "330px", border: "none" }}
            title="Mawaqit Bönetider — Stenhagens Moské"
          />
        </div>
      </div>

      {/* Quick Actions Grid */}
      <div className="px-4 mt-4">
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-4">
          <div className="grid grid-cols-5 gap-2">
            {[
              { href: "/prayer-times", icon: Clock, label: "Bönetider", color: "bg-emerald-50 text-emerald-mosque" },
              { href: "/news", icon: Newspaper, label: "Nyheter", color: "bg-blue-50 text-blue-600" },
              { href: "/donate", icon: Heart, label: "Donera", color: "bg-red-50 text-red-500" },
              { href: "/appointment", icon: Calendar, label: "Utnämning", color: "bg-purple-50 text-purple-600" },
              { href: "/about", icon: MapPin, label: "Om oss", color: "bg-amber-50 text-amber-600" },
            ].map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="flex flex-col items-center gap-1 py-2"
              >
                <div className={`w-11 h-11 rounded-xl flex items-center justify-center ${item.color}`}>
                  <item.icon size={20} />
                </div>
                <span className="text-[9px] font-semibold text-gray-700 text-center">{item.label}</span>
              </Link>
            ))}
          </div>
        </div>
      </div>

      {/* Services Section */}
      <section className="px-4 mt-5">
        <h2 className="text-lg font-bold text-gray-900 mb-3 flex items-center gap-2">
          <BookOpen size={18} className="text-emerald-mosque" />
          Våra tjänster
        </h2>
        <div className="grid grid-cols-2 gap-2">
          {[
            { icon: "💍", title: "Äktenskap", href: "/appointment" },
            { icon: "🕊️", title: "Begravning", href: "/appointment" },
            { icon: "☪️", title: "Shahada", href: "/appointment" },
            { icon: "📖", title: "Koranskola", href: "/about" },
          ].map((service, i) => (
            <Link
              key={i}
              href={service.href}
              className="flex items-center gap-3 p-3 bg-gray-50 rounded-xl hover:bg-emerald-mosque/5 transition-colors"
            >
              <span className="text-2xl">{service.icon}</span>
              <span className="font-semibold text-sm text-gray-900">{service.title}</span>
            </Link>
          ))}
        </div>
      </section>

      {/* Community Stats */}
      <section className="px-4 mt-5">
        <div className="bg-gradient-to-r from-emerald-mosque to-emerald-dark rounded-2xl p-4 text-white islamic-pattern">
          <h2 className="text-base font-bold mb-3 flex items-center gap-2">
            <Users size={16} />
            Vår gemenskap
          </h2>
          <div className="grid grid-cols-3 gap-2">
            <div className="text-center bg-white/10 rounded-xl p-2.5">
              <p className="text-xl font-bold">62+</p>
              <p className="text-[9px] text-white/80">Nationaliteter</p>
            </div>
            <div className="text-center bg-white/10 rounded-xl p-2.5">
              <p className="text-xl font-bold">1200+</p>
              <p className="text-[9px] text-white/80">Jumma</p>
            </div>
            <div className="text-center bg-white/10 rounded-xl p-2.5">
              <p className="text-xl font-bold">60%</p>
              <p className="text-[9px] text-white/80">Under 34</p>
            </div>
          </div>
        </div>
      </section>

      {/* Latest News */}
      <section className="px-4 mt-5">
        <div className="flex items-center justify-between mb-3">
          <h2 className="text-base font-bold text-gray-900 flex items-center gap-2">
            <Newspaper size={16} className="text-blue-500" />
            Senaste nyheter
          </h2>
          <Link href="/news" className="text-emerald-mosque text-sm font-semibold flex items-center gap-1">
            Alla <ChevronRight size={14} />
          </Link>
        </div>

        {loading ? (
          <div className="space-y-2">
            {[1, 2].map((i) => (
              <div key={i} className="flex gap-3 p-3 bg-white rounded-xl border border-gray-100">
                <div className="w-16 h-16 skeleton rounded-lg flex-shrink-0" />
                <div className="flex-1 space-y-2">
                  <div className="h-4 skeleton rounded w-full" />
                  <div className="h-3 skeleton rounded w-2/3" />
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="space-y-2">
            {posts.map((post) => (
              <Link
                key={post.id}
                href={`/news/${post.id}`}
                className="flex gap-3 p-3 bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow"
              >
                {post.image && (
                  <div className="w-16 h-16 rounded-lg overflow-hidden bg-gray-100 flex-shrink-0">
                    <img src={post.image} alt="" className="w-full h-full object-cover" />
                  </div>
                )}
                <div className="flex-1 min-w-0">
                  <h3
                    className="font-semibold text-sm text-gray-900 line-clamp-2"
                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(post.title) }}
                  />
                  <p className="text-[10px] text-gray-500 mt-1">
                    {new Date(post.date).toLocaleDateString("sv-SE")}
                  </p>
                </div>
              </Link>
            ))}
          </div>
        )}
      </section>

      {/* Donate CTA */}
      <section className="px-4 mt-5 mb-4">
        <Link href="/donate" className="block">
          <div className="bg-gradient-to-r from-gold-dark to-gold rounded-2xl p-4 text-white relative overflow-hidden">
            <div className="absolute inset-0 islamic-pattern opacity-20" />
            <div className="relative flex items-center justify-between">
              <div>
                <h3 className="text-base font-bold">Stöd oss 💛</h3>
                <p className="text-xs text-white/90 mt-0.5">Vi behöver din hjälp</p>
              </div>
              <div className="bg-white/20 px-4 py-2 rounded-xl text-sm font-semibold">
                Donera
              </div>
            </div>
          </div>
        </Link>
      </section>

      <BottomNav />
    </div>
  );
}