"use client";
import { use } from 'react';
import Image from "next/legacy/image";
import { useCaseStudy } from "@/lib/hooks/useCaseStudy";
import { getImageUrl } from "@/lib/imageUtils";
import poster from "@/public/images/case/poster.png";
import project from "@/public/images/case/project.png";
import nine from "@/public/images/case/nine.png";

interface CaseSingleProps {
  slug: string;
}

const CaseSingle = ({ slug }: CaseSingleProps) => {
  const { caseStudy, loading, error } = useCaseStudy(slug);

  if (loading) {
    return (
      <section className="c-details fix-top pb-120">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <p className="text-center">Loading case study...</p>
            </div>
          </div>
        </div>
      </section>
    );
  }

  if (error || !caseStudy) {
    return (
      <section className="c-details fix-top pb-120">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <p className="text-center text-danger">Case study not found.</p>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="c-details fix-top pb-120">
      <div className="container">
        <div className="row">
          <div className="col-12">
            <div className="c-details-intro">
              <h2 className="mt-8 text-secondary title-anim fw-7">
                {caseStudy.title}
              </h2>
              {caseStudy.subtitle && (
                <h4 className="mt-4 text-secondary">{caseStudy.subtitle}</h4>
              )}
              <div className="poster mt-60 fade-top">
                <div className="parallax-image-wrap">
                  <div className="parallax-image-inner">
                    <Image
                      src={caseStudy.poster_image ? getImageUrl(caseStudy.poster_image) : poster}
                      className="w-100 parallax-image mh-300"
                      alt={caseStudy.title}
                      width={1200}
                      height={600}
                    />
                  </div>
                </div>
              </div>
              <div className="row vertical-column-gap align-items-center pt-120 pb-120">
                <div className="col-12 col-lg-6">
                  <div className="c-details-content">
                    <h2 className="mt-8 fw-7 text-secondary title-anim mb-24">
                      Project
                    </h2>
                    {caseStudy.project_overview ? (
                      <p className="cur-lg">{caseStudy.project_overview}</p>
                    ) : (
                      <div 
                        className="cur-lg" 
                        dangerouslySetInnerHTML={{ __html: caseStudy.description || '' }}
                      />
                    )}
                  </div>
                </div>
                <div className="col-12 col-lg-6 col-xxl-5 offset-xxl-1 fade-wrapper">
                  <div className="c-details-thumb fade-top">
                    <div className="parallax-image-wrap">
                      <div className="parallax-image-inner">
                        <Image
                          src={caseStudy.project_image ? getImageUrl(caseStudy.project_image) : project}
                          className="w-100 parallax-image mh-260"
                          alt={`${caseStudy.title} - Project`}
                          width={600}
                          height={500}
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {caseStudy.site_map_content && (
                <div className="row">
                  <div className="col-12">
                    <div className="road-map__content">
                      <h2 className="mt-8 fw-7 text-secondary title-anim mb-24">
                        Site Map
                      </h2>
                      <p className="cur-lg">{caseStudy.site_map_content}</p>
                    </div>
                  </div>
                </div>
              )}
              {caseStudy.gallery_images && caseStudy.gallery_images.length > 0 && (
                <div className="row vertical-column-gap mt-60 fade-wrapper">
                  {caseStudy.gallery_images.map((image) => (
                    <div key={image.id} className="col-12 col-sm-6 col-xl-3">
                      <div className="c-details-thumb fade-top">
                        <div className="parallax-image-wrap">
                          <div className="parallax-image-inner">
                            <Image
                              src={getImageUrl(image.image) || nine}
                              className="w-100 mh-300 parallax-image"
                              alt={image.caption || caseStudy.title}
                              width={300}
                              height={300}
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default CaseSingle;