"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">
                  Discover how we help enterprises solve complex challenges with
                  secure, scalable solutions. Our case studies highlight real
                  business outcomes accelerated delivery, reduced costs,
                  improved reliability, and data-driven growth powered by modern
                  cloud, AI, and platform engineering.
                </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;