"use client";
import { useState, useRef } from "react";
import { useRouter } from "next/navigation";
import { FiArrowRight, FiStar, FiUsers, FiSearch } from "react-icons/fi";
import { Dropdown } from "@/components/ui/Dropdown";
import { HeroSection } from "@/components/buyer/HeroSection";
import { CourseCard } from "@/components/buyer/CourseCard";
import { FeaturesBanner } from "@/components/buyer/FeaturesBanner";
import { useTheme } from "@/context/ThemeContext";
import {
  mockCourses,
  mockInstructors,
  mockCategories,
} from "@/data/mockCourses";
import LayoutBase from "@/components/layout/LayoutBase";

export default function HomeContent() {
  const { isDark } = useTheme();
  const router = useRouter();
  const catalogRef = useRef<HTMLDivElement>(null);

  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
  const [searchQuery, setSearchQuery] = useState("");

  const filteredCourses = mockCourses.filter((c) => {
    const matchesCategory =
      selectedCategories.length === 0 ||
      selectedCategories.includes(c.category);
    const matchesSearch =
      searchQuery === "" ||
      c.title.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesCategory && matchesSearch;
  });

  const scrollToCatalog = () => {
    catalogRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  const instructors = Object.values(mockInstructors);

  return (
    <>
      <LayoutBase>
        {/* Hero — ocupa ancho completo */}
        <div className="-mx-4 sm:-mx-6 lg:-mx-8 -mt-8">
          <HeroSection
            onExploreClick={scrollToCatalog}
            onOpenPreview={(id) => router.push(`/course/${id}`)}
          />
        </div>

        {/* ── Catálogo ── */}
        <section ref={catalogRef} className="pt-16 pb-8">
          <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-6">
            <div>
              <p
                className={`text-xs font-bold uppercase tracking-widest mb-1 ${isDark ? "text-violet-400" : "text-violet-600"}`}
              >
                Catálogo
              </p>
              <h2
                className={`text-2xl font-bold ${isDark ? "text-white" : "text-slate-900"}`}
              >
                Cursos Populares
              </h2>
            </div>
            <button
              onClick={() => router.push("/catalogo")}
              className={`flex items-center gap-1.5 text-sm font-semibold transition ${isDark ? "text-violet-400 hover:text-violet-300" : "text-violet-600 hover:text-violet-500"}`}
            >
              Ver todo el catálogo <FiArrowRight />
            </button>
          </div>

          {/* Filter bar */}
          <div
            className={`flex flex-col sm:flex-row sm:items-start gap-3 p-1 rounded-2xl border ${isDark ? "bg-slate-900/60 border-slate-800" : "bg-slate-50 border-slate-200"}`}
          >
            {/* Search */}
            <div className="relative flex-1">
              <FiSearch
                className={`absolute left-3.5 top-1/2 -translate-y-1/2 text-sm pointer-events-none ${isDark ? "text-slate-500" : "text-slate-400"}`}
              />
              <input
                type="text"
                placeholder="Buscar cursos..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className={`w-full pl-9 pr-4 py-2.5 text-sm rounded-xl bg-transparent outline-none ${isDark ? "text-white" : "text-slate-800"}`}
              />
            </div>

            {/* Divider */}
            <div
              className={`hidden sm:block w-px h-10 my-0.5 ${isDark ? "bg-slate-800" : "bg-slate-200"}`}
            />

            {/* Category dropdown */}
            <Dropdown
              value={selectedCategories}
              onChange={setSelectedCategories}
              placeholder="Todas las categorías"
              className="w-56 shrink-0"
              options={mockCategories
                .filter((cat) => cat.id !== "all")
                .map((cat) => ({
                  value: cat.name,
                  label: cat.name,
                  count: cat.count,
                }))}
            />
          </div>

          <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {filteredCourses.map((course) => (
              <CourseCard key={course.id} course={course} />
            ))}
            {filteredCourses.length === 0 && (
              <p
                className={`col-span-3 text-center py-16 text-sm ${isDark ? "text-slate-500" : "text-slate-400"}`}
              >
                No hay cursos en esta categoría todavía.
              </p>
            )}
          </div>
        </section>

        {/* ── Features Banner ── */}
        <div className="-mx-4 sm:-mx-6 lg:-mx-8">
          <FeaturesBanner />
        </div>

        {/* ── Instructores ── */}
        <section className="py-16">
          <div className="text-center mb-10">
            <p
              className={`text-xs font-bold uppercase tracking-widest mb-1 ${isDark ? "text-violet-400" : "text-violet-600"}`}
            >
              Aprende de los mejores
            </p>
            <h2
              className={`text-2xl font-bold ${isDark ? "text-white" : "text-slate-900"}`}
            >
              Instructores Destacados
            </h2>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {instructors.map((inst) => (
              <div
                key={inst.id}
                className={`flex items-center gap-4 p-4 rounded-2xl border transition-all hover:-translate-y-0.5 ${
                  isDark
                    ? "bg-slate-900 border-slate-800 hover:border-slate-700"
                    : "bg-white border-slate-200 hover:border-slate-300 shadow-sm"
                }`}
              >
                <img
                  src={inst.avatar}
                  alt={inst.name}
                  className="w-14 h-14 rounded-xl object-cover shrink-0"
                />
                <div className="min-w-0">
                  <p
                    className={`text-sm font-bold truncate ${isDark ? "text-white" : "text-slate-900"}`}
                  >
                    {inst.name}
                  </p>
                  <p
                    className={`text-xs truncate mb-2 ${isDark ? "text-slate-400" : "text-slate-500"}`}
                  >
                    {inst.role}
                  </p>
                  <div className="flex items-center gap-3 text-xs">
                    <span className="flex items-center gap-1 text-amber-400 font-semibold">
                      <FiStar className="fill-amber-400" /> {inst.rating}
                    </span>
                    <span
                      className={`flex items-center gap-1 ${isDark ? "text-slate-400" : "text-slate-500"}`}
                    >
                      <FiUsers className="text-violet-400" />
                      {inst.totalStudents.toString()} alumnos
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* ── CTA Banner ── */}
        <div className="-mx-4 sm:-mx-6 lg:-mx-8 -mb-8">
          <div
            className={`relative px-8 py-16 text-center transition-colors duration-300 `}
          >
            <div className="relative z-10 max-w-xl mx-auto">
              <p
                className={`text-xs font-bold uppercase tracking-widest mb-3 ${isDark ? "text-violet-400" : "text-violet-600"}`}
              >
                Para instructores
              </p>
              <h2
                className={`text-2xl sm:text-3xl font-extrabold mb-3 ${isDark ? "text-white" : "text-slate-900"}`}
              >
                ¿Tienes conocimiento que compartir?
              </h2>
              <p
                className={`text-sm mb-8 ${isDark ? "text-slate-400" : "text-slate-500"}`}
              >
                Únete a nuestra comunidad de instructores y convierte tu
                experiencia en ingresos recurrentes.
              </p>
              <button
                onClick={() => router.push("/login")}
                className={`inline-flex items-center gap-2 px-7 py-3 rounded-xl font-bold text-sm transition-all shadow-lg hover:-translate-y-0.5 ${
                  isDark
                    ? "bg-violet-600 hover:bg-violet-500 text-white shadow-violet-900/50"
                    : "bg-violet-600 hover:bg-violet-500 text-white shadow-violet-600/25"
                }`}
              >
                Comenzar a enseñar <FiArrowRight />
              </button>
            </div>
          </div>
        </div>
      </LayoutBase>
    </>
  );
};