"use client";

import { Suspense } from "react";
import Header from "@/components/header";
import Footer from "@/components/footer";
import TagFilter from "@/components/portfolio/tag-filter";
import {
  SchoolFilter,
  CourseFilter,
} from "@/components/portfolio/course-filter";
import AccordionFilter from "@/components/portfolio/accordion-filter";
import ActiveFilters from "@/components/portfolio/active-filters";
import PortfolioList from "@/components/portfolio/portfolio-list";
import ProjectList from "@/components/portfolio/project-list";
import PortfolioPagination from "@/components/portfolio/portfolio-pagination";
import SortButton from "@/components/portfolio/sort-button";
import TabNav from "@/components/portfolio/tab-nav";
import { PortfolioProvider, usePortfolio } from "@/contexts/portfolio-context";
import { portfolioPageContent } from "@/content/marketing-content";

// ---------------------------------------------------------------------------
// Loading skeleton (shown while Suspense resolves searchParams)
// ---------------------------------------------------------------------------
function PortfolioLoading() {
  return (
    <div className="h-full pt-12">
      <Header />
      <div className="bg-white py-24">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
            <p className="mt-4 text-gray-600">Loading portfolio...</p>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}

// ---------------------------------------------------------------------------
// PortfolioHero — title with tabs directly underneath, then tab description
// ---------------------------------------------------------------------------
function PortfolioHero() {
  const { state } = usePortfolio();
  const copy = portfolioPageContent[state.activeTab];

  return (
    <div className="bg-white pt-24 sm:pt-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl lg:mx-0">
          <h1 className="text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
            {portfolioPageContent.title}
          </h1>
        </div>
      </div>

      <div className="mt-4">
        <PortfolioTabs />
      </div>

      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl lg:mx-0">
          <p className="py-6 text-lg leading-8 text-gray-600">
            {copy.description}
          </p>
        </div>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// PortfolioContent — pure UI consumer of PortfolioContext
// ---------------------------------------------------------------------------
function PortfolioContent() {
  const { state, actions, meta } = usePortfolio();
  const {
    activeTab,
    essays,
    projects,
    selectedTags,
    selectedSchools,
    selectedCourses,
    currentPage,
    sortDateAsc,
    totalPages,
    totalEssays,
  } = state;
  const copy = portfolioPageContent[activeTab];

  return (
    <>
      <div className="bg-white py-4 border-b border-gray-200">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="flex items-center justify-between">
            <div className="text-sm text-gray-500">{copy.sortLabel}</div>
            <SortButton
              sortDateAsc={sortDateAsc}
              onSortToggle={actions.toggleSort}
            />
          </div>
        </div>
      </div>

      <ActiveFilters
        selectedTags={selectedTags}
        selectedSchools={selectedSchools}
        selectedCourses={selectedCourses}
        onRemoveTag={actions.removeTag}
        onRemoveSchool={actions.removeSchool}
        onRemoveCourse={actions.removeCourse}
        onClearAll={actions.clearAllFilters}
      />

      <div className="bg-white border-b border-gray-200">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <AccordionFilter title="Filter by Tags" defaultOpen={false}>
            <TagFilter
              availableTagSlugs={meta.availableTags}
              selectedTags={selectedTags}
              onTagToggle={actions.setTags}
            />
          </AccordionFilter>

          {activeTab === "academic" && (
            <>
              <AccordionFilter title="Filter by School" defaultOpen={false}>
                <SchoolFilter
                  availableSchools={meta.availableSchools}
                  selectedSchools={selectedSchools}
                  onSchoolToggle={actions.setSchools}
                />
              </AccordionFilter>

              <AccordionFilter title="Filter by Course" defaultOpen={false}>
                <CourseFilter
                  availableCourses={meta.availableCourses}
                  selectedCourses={selectedCourses}
                  onCourseToggle={actions.setCourses}
                />
              </AccordionFilter>
            </>
          )}
        </div>
      </div>

      <div className="bg-white">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-2xl lg:mx-0">
            <p className="mt-2 text-lg leading-8 text-gray-600">
              {totalEssays}{" "}
              {totalEssays === 1 ? copy.itemNounSingular : copy.itemNounPlural}{" "}
              found
            </p>
          </div>
        </div>
      </div>

      <div id="portfolio-panel" role="tabpanel">
        {activeTab === "academic" ? (
          <PortfolioList
            essays={essays}
            onTagClick={actions.toggleTag}
            selectedTags={selectedTags}
          />
        ) : (
          <ProjectList
            projects={projects}
            onTagClick={actions.toggleTag}
            selectedTags={selectedTags}
          />
        )}
      </div>

      <PortfolioPagination
        currentPage={currentPage}
        totalPages={totalPages}
        totalEssays={totalEssays}
        itemsPerPage={10}
        onPageChange={actions.changePage}
        itemNoun={copy.itemNounPlural}
      />
    </>
  );
}

// ---------------------------------------------------------------------------
// PortfolioTabs — tab bar wired to context
// ---------------------------------------------------------------------------
function PortfolioTabs() {
  const { state, actions } = usePortfolio();
  return (
    <TabNav
      activeTab={state.activeTab}
      onTabChange={actions.setTab}
      labels={portfolioPageContent.tabs}
    />
  );
}

// ---------------------------------------------------------------------------
// Page — wires provider around UI
// ---------------------------------------------------------------------------
export default function PortfolioPage() {
  return (
    <Suspense fallback={<PortfolioLoading />}>
      <PortfolioProvider>
        <div className="h-full pt-12">
          <Header />

          <PortfolioHero />

          <PortfolioContent />

          <Footer />
        </div>
      </PortfolioProvider>
    </Suspense>
  );
}
