import { useData } from '../context/DataContext';
import { useRef, useState, useMemo } from 'react';
import { ArrowRight, ChevronLeft, ChevronRight, ChevronDown, User, Tag, Calendar, ExternalLink, Filter, Search, X } from 'lucide-react';
import { type Project } from '../data';
import ProjectModal from './ProjectModal';
import { useLang } from '../context/LanguageContext';

const INITIAL_COUNT = 6;
const LOAD_MORE_COUNT = 3;



export default function ProjectCarousel() {
  const { t } = useLang();
  const { projects, loading, error, refetch } = useData();
  const scrollRef = useRef<HTMLDivElement>(null);
  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
  const [visibleCount, setVisibleCount] = useState(INITIAL_COUNT);

  // Filter state
  const [searchQuery, setSearchQuery] = useState('');
  const [filterCategory, setFilterCategory] = useState('');
  const [filterYear, setFilterYear] = useState('');

  const categories = useMemo(
    () => [...new Set(projects.flatMap((p) => p.category))].sort(),
    [projects]
  );
  
  const years = useMemo(
    () => [...new Set(projects.map((p) => p.year))].sort((a: number, b: number) => b - a),
    [projects]
  );

  // Filter + search logic
  const filtered = useMemo(() => {
    const q = searchQuery.toLowerCase().trim();
    return projects.filter((p) => {
      const matchSearch =
        !q ||
        p.title.toLowerCase().includes(q) ||
        p.studentName.toLowerCase().includes(q) ||
        p.category.join(' ').toLowerCase().includes(q) ||
        p.description.toLowerCase().includes(q);
      const matchCategory = !filterCategory || p.category.includes(filterCategory);
      const matchYear = !filterYear || String(p.year) === filterYear;
      return matchSearch && matchCategory && matchYear;
    });
  }, [searchQuery, filterCategory, filterYear, projects]);

  const visibleProjects = filtered.slice(0, visibleCount);
  const hasMore = visibleCount < filtered.length;
  const isFiltered = searchQuery || filterCategory || filterYear;

  const resetFilters = () => {
    setSearchQuery('');
    setFilterCategory('');
    setFilterYear('');
    setVisibleCount(INITIAL_COUNT);
  };

  const handleFilterChange = (setter: (v: string) => void) => (v: string) => {
    setter(v);
    setVisibleCount(INITIAL_COUNT);
  };

  const handleLoadMore = () => setVisibleCount((prev) => prev + LOAD_MORE_COUNT);

  const handleShowLess = () => {
    setVisibleCount(INITIAL_COUNT);
    document.getElementById('portofolio')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const scroll = (direction: 'left' | 'right') => {
    const container = scrollRef.current;
    if (!container) return;
    const cardWidth = container.firstElementChild
      ? (container.firstElementChild as HTMLElement).offsetWidth + 24
      : 400;
    container.scrollBy({ left: direction === 'right' ? cardWidth : -cardWidth, behavior: 'smooth' });
  };

  return (
    <>
      {/* Project Modal */}
      <ProjectModal project={selectedProject} onClose={() => setSelectedProject(null)} />

      <section id="portofolio" className="py-16 bg-white relative overflow-hidden border-t border-slate-100">
        <div className="max-w-7xl mx-auto px-4 lg:px-8">
          {/* Header row */}
          <div className="flex items-start justify-between mb-8 gap-4">
            <div>
              <h2 className="text-3xl md:text-4xl font-black font-display text-primary-navy mb-3">
                {t.project.sectionTitle}
              </h2>
              <p className="text-base text-slate-500 font-medium max-w-2xl">
                {t.project.sectionDesc}
              </p>
            </div>

            {/* Scroll control buttons */}
            <div className="flex items-center gap-2 shrink-0 mt-1">
              <button
                onClick={() => scroll('left')}
                aria-label="Geser kiri"
                className="w-10 h-10 rounded-full border-2 border-primary-navy/20 flex items-center justify-center text-primary-navy hover:bg-primary-navy hover:text-white hover:border-primary-navy transition-all duration-200 shadow-sm"
              >
                <ChevronLeft size={20} />
              </button>
              <button
                onClick={() => scroll('right')}
                aria-label="Geser kanan"
                className="w-10 h-10 rounded-full border-2 border-primary-navy/20 flex items-center justify-center text-primary-navy hover:bg-primary-navy hover:text-white hover:border-primary-navy transition-all duration-200 shadow-sm"
              >
                <ChevronRight size={20} />
              </button>
            </div>
          </div>


          {/* Filter + Search Section */}
          <div className="bg-white/80 backdrop-blur-md p-4 rounded-lg shadow-sm border-t-4 border-primary-gold mb-8 space-y-3">
            {/* Row 1: Label + Reset */}
            <div className="flex items-center justify-between">
              <div className="text-base font-bold font-display text-primary-navy flex items-center gap-2">
                <Filter className="text-primary-navy" size={18} />
                {t.project.filterTitle}
              </div>
              {isFiltered && (
                <button
                  onClick={resetFilters}
                  className="flex items-center gap-1 text-xs font-bold text-slate-500 hover:text-primary-navy transition-colors"
                >
                  <X size={13} />
                  {t.project.resetFilter}
                </button>
              )}
            </div>

            {/* Row 2: Search bar */}
            <div className="relative">
              <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
              <input
                id="search-project"
                type="text"
                value={searchQuery}
                onChange={(e) => { setSearchQuery(e.target.value); setVisibleCount(INITIAL_COUNT); }}
                placeholder={t.project.searchPlaceholder}
                className="w-full bg-slate-50 text-slate-700 text-sm rounded py-2 pl-9 pr-4 border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-gold"
              />
              {searchQuery && (
                <button
                  onClick={() => { setSearchQuery(''); setVisibleCount(INITIAL_COUNT); }}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
                  aria-label="Hapus pencarian"
                >
                  <X size={14} />
                </button>
              )}
            </div>

            {/* Row 3: Dropdowns */}
            <div className="flex flex-wrap gap-3">
              {/* Category Filter */}
              <div className="relative flex-1 min-w-[160px]">
                <select
                  id="filter-project-category"
                  value={filterCategory}
                  onChange={(e) => handleFilterChange(setFilterCategory)(e.target.value)}
                  className="w-full bg-slate-50 text-slate-700 font-bold text-sm rounded py-2 pl-4 pr-9 shadow-sm focus:ring-2 focus:ring-primary-gold appearance-none cursor-pointer border border-slate-200"
                >
                  <option value="">{t.project.allField}</option>
                  {categories.map((cat) => (
                    <option key={cat} value={cat}>{cat}</option>
                  ))}
                </select>
                <ChevronDown size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
              </div>

              {/* Year Filter */}
              <div className="relative flex-1 min-w-[120px]">
                <select
                  id="filter-project-year"
                  value={filterYear}
                  onChange={(e) => handleFilterChange(setFilterYear)(e.target.value)}
                  className="w-full bg-slate-50 text-slate-700 font-bold text-sm rounded py-2 pl-4 pr-9 shadow-sm focus:ring-2 focus:ring-primary-gold appearance-none cursor-pointer border border-slate-200"
                >
                  <option value="">{t.project.allYear}</option>
                  {years.map((yr) => (
                    <option key={yr} value={String(yr)}>{yr}</option>
                  ))}
                </select>
                <ChevronDown size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
              </div>
            </div>
          </div>

          {/* Results count */}
          {isFiltered && (
            <p className="text-sm text-slate-500 font-medium mb-6">
              {t.project.showing}{' '}
              <span className="font-bold text-primary-navy">{filtered.length}</span>{' '}
              {t.project.matching}
            </p>
          )}

          {/* Cards */}
          {loading ? (
            <div className="flex gap-6 overflow-x-auto pb-10 hide-scrollbar">
              {[1, 2, 3].map((n) => (
                <div
                  key={n}
                  className="snap-start shrink-0 proj-card bg-white rounded-lg border border-slate-200 overflow-hidden shadow-md animate-pulse flex flex-col"
                >
                  <div className="h-52 bg-slate-200 w-full" />
                  <div className="p-5 space-y-4 flex-grow flex flex-col justify-between">
                    <div className="space-y-2">
                      <div className="h-4 bg-slate-200 rounded w-1/4" />
                      <div className="h-5 bg-slate-200 rounded w-3/4" />
                      <div className="h-4 bg-slate-200 rounded w-5/6" />
                      <div className="h-4 bg-slate-200 rounded w-2/3" />
                    </div>
                    <div className="h-10 bg-slate-200 rounded w-1/3 mt-4" />
                  </div>
                </div>
              ))}
            </div>
          ) : error ? (
            <div className="text-center py-10 text-red-500 w-full">
              <p className="text-lg font-semibold">Gagal memuat portofolio</p>
              <p className="text-sm mt-1">{error}</p>
              <button
                onClick={refetch}
                className="mt-4 px-4 py-2 bg-primary-navy text-white font-bold rounded hover:bg-opacity-95 transition-all text-sm"
              >
                Coba Lagi
              </button>
            </div>
          ) : visibleProjects.length === 0 ? (
            <div className="text-center py-20 text-slate-400">
              <p className="text-lg font-semibold">{t.project.noData}</p>
              <p className="text-sm mt-1">{t.project.noDataSub}</p>
            </div>
          ) : (
            <>
              {/* Scrollable cards */}
              <div
                ref={scrollRef}
                className="flex gap-6 overflow-x-auto pb-10 hide-scrollbar snap-x snap-mandatory"
                style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
              >
                {visibleProjects.map((project) => (
                  <div
                    key={project.id}
                    className="snap-start shrink-0 proj-card bg-white rounded-lg overflow-hidden shadow-md border border-slate-200 group flex flex-col relative"
                  >
                    <div className="absolute top-0 left-0 w-1 h-full bg-primary-gold z-10 transition-transform origin-bottom group-hover:scale-y-110" />

                    {/* Image */}
                    <div className="h-52 overflow-hidden relative">
                      <img
                        src={project.image}
                        alt={project.title}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                        referrerPolicy="no-referrer"
                        onError={(e) => {
                          (e.target as HTMLImageElement).src = 'https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN';
                        }}
                      />
                      
                      {/* Tag at top-left, raised like achievements, max 2 tags then (..) */}
                      {project.category && project.category.length > 0 && (
                        <div className="absolute top-3 left-3 flex flex-wrap gap-1.5 z-20">
                          {project.category.slice(0, 2).map((cat, i) => (
                            <span
                              key={i}
                              className="bg-white/95 backdrop-blur text-primary-navy font-bold px-2.5 py-1 rounded shadow-sm flex items-center gap-1 text-[10px] uppercase tracking-wider"
                            >
                              <Tag size={10} className="text-primary-gold" />
                              {cat}
                            </span>
                          ))}
                          {project.category.length > 2 && (
                            <span className="bg-white/95 backdrop-blur text-primary-navy font-bold px-2 py-1 rounded shadow-sm flex items-center gap-1 text-[10px]">
                              (..)
                            </span>
                          )}
                        </div>
                      )}

                      {/* Title block — inline background follows text width */}
                      <div className="absolute bottom-3 left-3 z-20 max-w-[85%]">
                        <h4
                          className="text-sm font-bold font-display text-slate-900 leading-snug"
                          style={{ display: 'inline' }}
                        >
                          <span
                            className="bg-white/55 backdrop-blur-sm px-2 py-0.5 rounded"
                            style={{
                              boxDecorationBreak: 'clone',
                              WebkitBoxDecorationBreak: 'clone',
                              lineHeight: '1.9',
                              textShadow: '0 0 8px rgba(255,255,255,0.8)',
                            }}
                          >
                            {project.title}
                          </span>
                        </h4>
                      </div>
                    </div>

                    {/* Body */}
                    <div className="p-5 flex flex-col flex-grow">
                      {/* Meta row */}
                      <div className="flex flex-wrap items-center gap-3 mb-3 text-xs text-slate-500 font-medium">
                        {project.studentName && (
                          <span className="flex items-center gap-1">
                            <User size={11} className="text-slate-400" />
                            {project.studentName}
                          </span>
                        )}
                        {project.year && (
                          <span className="flex items-center gap-1">
                            <Calendar size={11} className="text-slate-400" />
                            {project.year}
                          </span>
                        )}
                      </div>

                      <p className="text-slate-600 text-sm leading-relaxed mb-5 flex-grow line-clamp-3">
                        {project.description}
                      </p>

                      {/* Actions */}
                      <div className="flex items-center gap-3 mt-auto">
                        <button
                          onClick={() => setSelectedProject(project)}
                          className="text-primary-navy font-bold text-sm tracking-wide hover:text-untan-blue flex items-center gap-2 group/btn"
                          style={{ minHeight: '44px' }}
                        >
                          {t.project.readMore}
                          <ArrowRight size={15} className="group-hover/btn:translate-x-1 transition-transform" />
                        </button>

                        {project.link && (
                          <a
                            href={project.link}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="ml-auto flex items-center gap-1.5 text-xs font-bold text-slate-500 hover:text-primary-navy transition-colors border border-slate-200 hover:border-primary-navy/30 rounded px-3 py-2"
                            style={{ minHeight: '44px' }}
                          >
                            <ExternalLink size={13} />
                            {t.project.visitLink}
                          </a>
                        )}
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              {/* Scroll hint */}
              <p className="text-center text-xs text-slate-400 font-medium mt-2 select-none">
                {t.project.scrollHint}
              </p>

              {/* Load More / Show Less */}
              <div className="mt-10 flex flex-wrap items-center justify-center gap-6">
                {hasMore && (
                  <button
                    id="load-more-project"
                    onClick={handleLoadMore}
                    className="text-primary-navy font-black text-base underline underline-offset-[10px] decoration-primary-gold decoration-4 hover:text-primary-gold transition-colors flex items-center gap-2"
                  >
                    {t.project.loadMore}
                    <ChevronDown size={18} />
                  </button>
                )}

                {!hasMore && visibleProjects.length > 0 && filtered.length > INITIAL_COUNT && (
                  <p className="text-slate-400 text-sm font-medium">
                    {t.project.showing} {filtered.length} {t.project.allShown}
                  </p>
                )}

                {visibleCount > INITIAL_COUNT && visibleProjects.length > 0 && (
                  <button
                    onClick={handleShowLess}
                    className="text-slate-400 font-bold text-sm underline underline-offset-4 decoration-slate-300 decoration-2 hover:text-slate-600 transition-colors flex items-center gap-1.5"
                  >
                    <ChevronDown size={16} className="rotate-180" />
                    {t.project.showLess}
                  </button>
                )}
              </div>
            </>
          )}
        </div>
      </section>
    </>
  );
}