"use client";
import { useState, useEffect } from "react";
import Image from "next/legacy/image";
import Link from "next/link";
import { useCaseStudies, useClients } from "@/lib/hooks/useCaseStudy";
import { getImageUrl } from "@/lib/imageUtils";
import one from "@/public/images/case/one.png";

const CaseItems = () => {
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const { caseStudies, loading: casesLoading } = useCaseStudies();
  const { clients, loading: clientsLoading } = useClients();

  const handleTabClick = (index: number) => {
    setActiveTabIndex(index);
  };
  
  // Filter case studies by category
  const caseStudiesData = caseStudies.filter((cs) => !cs.client);
  const clientCaseStudies = caseStudies.filter((cs) => cs.client);
  
  if (casesLoading || clientsLoading) {
    return (
      <section className="fix-top pb-120 c-study">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <p className="text-center">Loading case studies...</p>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="fix-top pb-120 c-study">
      <div className="container">
        <div className="row">
          <div className="col-12">
            <div className="c-study-banner pb-120">
              <div className="row">
                <div className="col-12 col-lg-9">
                  <h2 className="mt-8 title-anim fw-7 text-secondary mb-24">
                    Case Studies
                  </h2>
                  <p className="cur-lg">
                    Lorem ipsum dolor sit amet consectetur. Morbi in non nibh
                    netus tortor. Non vitae ut consectetur sit quam egestas
                    praesent. Enim augue cras donec sed pellentesque tortor
                    maecenas. Tellus duis sit justo neque. Est elit diam quam
                    venenatis sit morbi sed dignissim eros.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-12">
            <div className="c-study-inner pt-120 mb-60">
              <div className="c-study-btns">
                <button
                  className={`study-btn ${
                    activeTabIndex === 0 ? "study-btn-active" : ""
                  }`}
                  onClick={() => handleTabClick(0)}
                >
                  Case Study
                </button>
                <span></span>
                <button
                  className={`study-btn ${
                    activeTabIndex === 1 ? "study-btn-active" : ""
                  }`}
                  onClick={() => handleTabClick(1)}
                >
                  Client
                </button>
              </div>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-12">
            <div className="c-content-wrapper mt-60">
              <div
                className={`c-tab-single ${
                  activeTabIndex === 0 ? "active-tab" : ""
                }`}
              >
                <div className="row vertical-column-gap-lg">
                  {caseStudiesData.map((caseStudy) => (
                    <div key={caseStudy.id} className="col-12 col-lg-6">
                      <div className="c-study-single">
                        <div className="thumb mb-24">
                          <Link href={`/case-study/${caseStudy.slug}`} className="w-100">
                            <Image
                              src={caseStudy.thumbnail ? getImageUrl(caseStudy.thumbnail) : one}
                              className="w-100 mh-300"
                              alt={caseStudy.title}
                              width={600}
                              height={400}
                            />
                          </Link>
                        </div>
                        <div className="content">
                          <Link href={`/case-study/${caseStudy.slug}`} className="mb-30 fw-6">
                            {caseStudy.category_name || 'Case Study'}
                          </Link>
                          <h4 className="fw-6 mt-8 text-secondary">
                            <Link href={`/case-study/${caseStudy.slug}`}>
                              {caseStudy.title}
                            </Link>
                          </h4>
                        </div>
                      </div>
                    </div>
                  ))}
                  {caseStudiesData.length === 0 && (
                    <div className="col-12">
                      <p className="text-center">No case studies found.</p>
                    </div>
                  )}
                </div>
              </div>
              <div
                className={`c-tab-single ${
                  activeTabIndex === 1 ? "active-tab" : ""
                }`}
              >
                <div className="row vertical-column-gap-lg">
                  {clientCaseStudies.map((caseStudy, index) => (
                    <div key={caseStudy.id} className="col-12">
                      <div className={`row vertical-column-gap-md align-items-center ${index % 2 === 1 ? 'flex-row-reverse' : ''}`}>
                        <div className="col-12 col-lg-6">
                          <div className="c-tab__client">
                            <h2 className="mt-8 fw-7 title-anim text-secondary mb-24">
                              {caseStudy.client?.name || caseStudy.title}
                            </h2>
                            <p className="cur-lg">
                              {caseStudy.excerpt || caseStudy.client?.description}
                            </p>
                            <div className="mt-40">
                              <Link
                                href={`/case-study/${caseStudy.slug}`}
                                className="btn-anim btn-anim-light"
                              >
                                Read More
                                <i className="fa-solid fa-arrow-trend-up"></i>
                                <span></span>
                              </Link>
                            </div>
                          </div>
                        </div>
                        <div className={`col-12 col-lg-6 col-xxl-5 ${index % 2 === 0 ? 'offset-xxl-1' : ''}`}>
                          <div className="c-tab__thumb">
                            <Image
                              src={caseStudy.thumbnail ? getImageUrl(caseStudy.thumbnail) : one}
                              className="w-100 mh-300"
                              alt={caseStudy.client?.name || caseStudy.title}
                              width={600}
                              height={400}
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                  {clientCaseStudies.length === 0 && (
                    <div className="col-12">
                      <p className="text-center">No client case studies found.</p>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default CaseItems;