'use client';

import { useState, useEffect, use } from 'react';
import { ResourceCard } from '@/components/ResourceCard';
import { getLessons } from '@/lib/actions/lessonActions';
import { getCategories } from '@/lib/actions/categoryActions';
import { Search, Code2, SlidersHorizontal, Loader2 } from 'lucide-react';

export default function LessonsPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = use(params);
  const [search, setSearch] = useState('');
  const [selectedCat, setSelectedCat] = useState<string | null>(null);
  const [lessons, setLessons] = useState<any[]>([]);
  const [categories, setCategories] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getCategories().then(setCategories);
  }, []);

  useEffect(() => {
    async function loadData() {
      setLoading(true);
      const res = await getLessons({ query: search, category: selectedCat || undefined });
      setLessons(res);
      setLoading(false);
    }
    loadData();
  }, [search, selectedCat]);

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-8 flex-1 w-full">
      
      {/* Header */}
      <div className="space-y-3">
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 text-red-400 text-xs font-bold border border-red-500/20">
          <Code2 className="w-4 h-4" />
          <span>YouTube Content & Code Library</span>
        </div>
        <h1 className="text-3xl sm:text-5xl font-black text-white tracking-tight">
          All Video Tutorials & Code Resources
        </h1>
        <p className="text-sm text-slate-400 max-w-2xl">
          Browse, filter, and inspect all source code snippets, lesson notes, starter zip packages, and multi-file project structures.
        </p>
      </div>

      {/* Filter Bar */}
      <div className="flex flex-col md:flex-row items-center justify-between gap-4 bg-slate-900/80 p-4 rounded-2xl border border-slate-800">
        
        {/* Search Input */}
        <div className="relative w-full md:w-96">
          <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
          <input
            type="text"
            placeholder="Search tutorial title or code..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full bg-slate-950 border border-slate-800 rounded-xl pl-10 pr-4 py-2 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-red-500/50"
          />
        </div>

        {/* Category Pills */}
        <div className="flex items-center gap-2 overflow-x-auto w-full md:w-auto py-1 scrollbar-none">
          <SlidersHorizontal className="w-4 h-4 text-slate-500 mr-1 flex-shrink-0" />
          <button
            onClick={() => setSelectedCat(null)}
            className={`px-3 py-1.5 rounded-xl text-xs font-bold whitespace-nowrap transition-all ${
              selectedCat === null
                ? 'bg-red-600 text-white shadow-md shadow-red-600/30'
                : 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
            }`}
          >
            All
          </button>
          {categories.map((cat) => (
            <button
              key={cat.id || cat.name}
              onClick={() => setSelectedCat(selectedCat === cat.name ? null : cat.name)}
              className={`px-3 py-1.5 rounded-xl text-xs font-bold whitespace-nowrap transition-all ${
                selectedCat === cat.name
                  ? 'bg-red-600 text-white shadow-md shadow-red-600/30'
                  : 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
              }`}
            >
              {cat.name}
            </button>
          ))}
        </div>

      </div>

      {/* Grid */}
      {loading ? (
        <div className="p-12 text-center text-slate-400 flex items-center justify-center gap-2">
          <Loader2 className="w-5 h-5 animate-spin text-red-500" />
          <span>Loading tutorials...</span>
        </div>
      ) : lessons.length > 0 ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {lessons.map((item) => (
            <ResourceCard key={item.id} lesson={item} locale={locale} />
          ))}
        </div>
      ) : (
        <div className="p-12 text-center bg-slate-900/40 rounded-2xl border border-slate-800 text-slate-400 text-xs">
          No YouTube tutorials match your search filters.
        </div>
      )}

    </div>
  );
}