import React, { useState } from 'react'
import { Link, useParams } from 'react-router-dom'
import { ArrowLeftIcon, ChevronLeftIcon } from 'lucide-react'
import { Reveal } from '../components/Reveal'
import { ButtonLink } from '../components/Button'
import { ProjectCard } from '../components/ProjectCard'
import { ContactSection } from '../components/ContactSection'
import { Lightbox } from '../components/Lightbox'
import { useEffect } from 'react';
import { useSite, useStatusLabel } from '../api';
import { useLang } from '../i18n/lang';
import { applySeo } from '../seo';

export function ProjectDetail() {
  const { slug } = useParams<{ slug: string }>()
  const { projects, brand } = useSite()
  const { t, href, lang } = useLang()
  const project = projects.find((p) => p.slug === slug)
  const statusLabel = useStatusLabel(project?.status ?? '')
  const [lightbox, setLightbox] = useState<number | null>(null)

  // عنوان تب، توضیح متا و OG از خود پروژه
  useEffect(() => {
    if (!project) return;
    applySeo({
      title: `${project.title} | ${brand.name}`,
      description: project.summary,
      path: href(`/projects/${project.slug}`),
      image: project.image,
      lang,
    });
  }, [project?.id, lang, href]);

  if (!project) {
    return (
      <section className="flex min-h-[70vh] flex-col items-center justify-center px-6 text-center">
        <h1 className="text-section font-bold text-ivory">{t('projectNotFound')}</h1>
        <p className="mt-4 text-sm font-light text-ivory/60">
          {t('projectNotFoundText')}
        </p>
        <ButtonLink to={href('/projects')} variant="copper" className="mt-8">
          {t('backToProjects')}
          <ArrowLeftIcon className="h-4 w-4 ltr:-scale-x-100" />
        </ButtonLink>
      </section>
    )
  }

  const related = projects.filter((p) => p.slug !== project.slug).slice(0, 3)
  
  const facts = [
    { label: t('specLocation'), value: project.location },
    { label: t('specYear'), value: project.year },
    { label: t('specArea'), value: project.area },
    { label: t('specFloors'), value: project.floors },
    { label: t('specUnits'), value: project.units },
    { label: t('specClient'), value: project.client },
  ]

  return (
    <>
      <section className="relative flex h-[62vh] min-h-[440px] items-end overflow-hidden">
        <img src={project.image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />
        <div className="absolute inset-0 bg-ink/72" aria-hidden="true" />
        <div
          className="absolute inset-0"
          style={{ background: 'linear-gradient(to top, #27221c 6%, rgba(39,34,28,0.15) 70%)' }}
          aria-hidden="true"
        />
        <div className="relative mx-auto w-full max-w-site px-6 pb-16 lg:px-10">
          <nav aria-label={t('breadcrumbAria')} className="flex items-center gap-2 text-xs font-light text-ivory/50">
            <Link to={href('/')} className="transition-colors hover:text-copper">
              {t('home')}
            </Link>
            <ChevronLeftIcon className="h-3.5 w-3.5 ltr:rotate-180" />
            <Link to={href('/projects')} className="transition-colors hover:text-copper">
              {t('projects')}
            </Link>
            <ChevronLeftIcon className="h-3.5 w-3.5 ltr:rotate-180" />
            <span className="text-copper">{project.title}</span>
          </nav>
          <h1 className="mt-5 max-w-[700px] text-hero font-bold text-ivory">{project.title}</h1>
          <p className="mt-5 max-w-2xl text-base font-light leading-9 text-ivory/70">{project.summary}</p>
        </div>
      </section>

      <section className="bg-char py-20 lg:py-28" aria-label={t('projectDetailsAria')}>
        <div className="mx-auto grid max-w-site items-start gap-12 px-6 lg:grid-cols-2 lg:gap-16 lg:px-10">
          
          <Reveal className="order-1">
            <span className="flex items-center gap-3 text-sm font-light text-copper">
              <span aria-hidden="true" className="h-px w-8 bg-copper" />
              {statusLabel}
            </span>
            <h2 className="mt-4 text-3xl font-bold text-ivory">{t('aboutProject')}</h2>
            
            {project.body.map((para) => (
              <p key={para} className="mt-5 text-base font-light leading-9 text-ivory/70">
                {para}
              </p>
            ))}

            <dl className="mt-10 grid grid-cols-2 gap-px border border-ivory/10 bg-ivory/10">
              {facts.map((f) => (
                <div key={f.label} className="bg-ink p-6 md:p-8 ltr:text-left rtl:text-right">
                  <dt className="text-xs font-light text-ivory/50">{f.label}</dt>
                  <dd className="mt-3 text-sm font-bold text-ivory">{f.value}</dd>
                </div>
              ))}
            </dl>

            <div className="mt-10">
              <ButtonLink to={href('/contact')} variant="outline" className="font-light">
                {t('similarProjectCta')}
              </ButtonLink>
            </div>
          </Reveal>

          <Reveal delay={0.1} className="order-2">
            <button
              type="button"
              onClick={() => setLightbox(0)}
              className="group block w-full overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
            >
              <img
                src={project.gallery[0] || project.image}
                alt=""
                className="aspect-[4/3] w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
              />
            </button>
            <div className="mt-4 grid grid-cols-3 gap-4">
              {project.gallery.slice(1).map((img, i) => (
                <button
                  key={img}
                  type="button"
                  onClick={() => setLightbox(i + 1)}
                  className="group block overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
                >
                  <img
                    src={img}
                    alt=""
                    className="aspect-square w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
                  />
                </button>
              ))}
            </div>
          </Reveal>

        </div>
      </section>

      <section className="bg-ink py-20 lg:py-28" aria-label={t('relatedProjectsAria')}>
        <div className="mx-auto max-w-site px-6 lg:px-10">
          <h2 className="text-section font-bold text-ivory">{t('otherProjects')}</h2>
          <div className="mt-6 h-px w-24 bg-copper/70" />
          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {related.map((item, i) => (
              <Reveal key={item.slug} delay={0.06 * i} className="h-full">
                <ProjectCard project={item} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <Lightbox
        images={project.gallery}
        index={lightbox}
        onClose={() => setLightbox(null)}
        onChange={setLightbox}
      />
      
      <ContactSection />
    </>
  )
}