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 { useAdmin } from '../admin/AdminContext';
import { LazyProjectsMapSingle } from '../map/LazyMaps';
import { createPlaceholderProject, findMapProjectByName } from '../data/mapProjects';
import { applySeo } from '../seo';

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

  // مختصات پروژه از فهرست سنجاق‌های شیت؛ نبودش → محل جایگزین تا نقشه خالی نماند
  const mapLocation = project
    ? (findMapProjectByName(project.title) ?? createPlaceholderProject(project.title, project.summary))
    : null
  const mapImages = project && Array.isArray(project.gallery) ? project.gallery.filter(Boolean) : []

  // عنوان تب، توضیح متا، OG و JSON-LD از خود پروژه — هم‌ارز نسخهٔ سمت سرور (seo_pages.py)
  useEffect(() => {
    if (!project) return;
    const absolute = (path: string) => new URL(path, window.location.origin).href;
    applySeo({
      title: `${project.title} | ${brand.name}`,
      description: project.summary,
      path: href(`/projects/${project.slug}`),
      image: project.image,
      lang,
      // alternate انگلیسی فقط با وجود ترجمهٔ واقعی
      hasEn: !!(project.title_en?.trim() || project.summary_en?.trim()),
      jsonLd: [
        {
          '@context': 'https://schema.org',
          '@type': 'WebPage',
          name: project.title,
          description: project.summary,
          image: project.image ? absolute(project.image) : undefined,
          inLanguage: lang,
        },
        {
          '@context': 'https://schema.org',
          '@type': 'BreadcrumbList',
          itemListElement: [
            { '@type': 'ListItem', position: 1, name: t('home'), item: absolute(href('/')) },
            { '@type': 'ListItem', position: 2, name: t('projects'), item: absolute(href('/projects')) },
            { '@type': 'ListItem', position: 3, name: project.title, item: absolute(href(`/projects/${project.slug}`)) },
          ],
        },
      ],
    });
  }, [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)

  /**
   * پیمایش پروژه‌ها — همان ترتیبی که فهرست پروژه‌ها دارد (position از API).
   * در ابتدا/انتهای فهرست، حلقه می‌زند تا کاوش هیچ‌وقت قطع نشود.
   */
  const currentIndex = projects.findIndex((p) => p.slug === project.slug)
  const total = projects.length
  const prevProject = total > 1 ? projects[(currentIndex + 1) % total] : undefined   // قدیمی‌تر
  const nextProject = total > 1 ? projects[(currentIndex - 1 + total) % total] : undefined   // تازه‌تر
  
  // مشخصات هر پروژه — همان فهرستی که تیم داده دارد:
  // وضعیت / سال / تعداد طبقات / واحدها / نوع پروژه / زیربنا / کاربری
  // ردیف‌های خالی نمایش داده نمی‌شوند.
  const facts = [
    { label: t('specStatus'), value: statusLabel },
    { label: t('specYear'), value: project.year },
    { label: t('specLandArea'), value: project.land_area },
    { label: t('specArea'), value: project.area },
    { label: t('specUsage'), value: project.usage },
    { label: t('specPilotFloors'), value: project.pilot_floors },
    { label: t('specFloors'), value: project.floors },
    { label: t('specUnitsResidential'), value: project.units_residential },
    { label: t('specUnitsCommercial'), value: project.units_commercial },
    { label: t('specUnitsOffice'), value: project.units_office },
  ].filter((f) => String(f.value ?? '').trim() !== '')

  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" fetchPriority="high" decoding="async" />
        <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>
          {/* ویرایش این پروژه — فقط برای ادمین واردشده؛ هرگز برای بازدیدکننده رندر نشود */}
          {canManageSite && (
            <div className="mt-5">
              <Link
                to={`/admin/projects/${project.id}`}
                data-admin-link
                className="inline-flex items-center gap-2 rounded-full border border-copper/50 bg-ink/90 px-4 py-2 text-xs font-light text-copper backdrop-blur-sm transition-colors duration-200 hover:bg-copper hover:text-char"
              >
                ویرایش این پروژه (عنوان، مشخصات، گالری، متن)
              </Link>
            </div>
          )}
        </div>
      </section>

      {/* نقشهٔ مختصات پروژه — بلافاصله زیر هیرو */}
      {mapLocation && (
        <section className="bg-char py-10 lg:py-14" aria-label={t('mapAria')}>
          <div className="mx-auto max-w-site px-6 lg:px-10">
            <div className="w-full max-w-full overflow-hidden rounded-2xl border border-white/10">
              <LazyProjectsMapSingle
                location={mapLocation}
                images={mapImages}
                className="h-[320px] md:h-[420px] w-full"
              />
            </div>
          </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-justify 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"
                loading="lazy"
                decoding="async"
              />
            </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"
                    loading="lazy"
                    decoding="async"
                  />
                </button>
              ))}
            </div>
          </Reveal>

        </div>
      </section>

      {/* پیمایش پروژه‌ها — رفتن به پروژهٔ قبلی/بعدی بدون بازگشت به فهرست */}
      {(prevProject || nextProject) && (
        <nav
          className="border-t border-ivory/10 bg-char py-10 lg:py-12"
          aria-label={t('projectNavAria')}
        >
          <div className="mx-auto flex max-w-site items-stretch justify-between gap-3 px-6 lg:px-10">
            {prevProject ? (
              <Link
                to={href(`/projects/${prevProject.slug}`)}
                className="group flex min-w-0 flex-1 items-center gap-3 rounded-2xl border border-ivory/12 bg-ink/40 px-4 py-3.5 transition-all duration-300 ease-lux hover:-translate-y-0.5 hover:border-copper/50 hover:bg-ink/70 md:max-w-[46%] md:px-6 md:py-5"
              >
                <ArrowLeftIcon className="h-4 w-4 shrink-0 text-copper" aria-hidden="true" />
                <span className="flex min-w-0 flex-col text-start">
                  <span className="text-[11px] font-light text-ivory/50">{t('prevProject')}</span>
                  <span className="mt-1 truncate text-sm font-bold text-ivory transition-colors duration-300 group-hover:text-copper md:text-base">
                    {prevProject.title}
                  </span>
                </span>
              </Link>
            ) : (
              <span className="flex-1" aria-hidden="true" />
            )}

            {nextProject && (
              <Link
                to={href(`/projects/${nextProject.slug}`)}
                className="group flex min-w-0 flex-1 items-center justify-end gap-3 rounded-2xl border border-ivory/12 bg-ink/40 px-4 py-3.5 text-end transition-all duration-300 ease-lux hover:-translate-y-0.5 hover:border-copper/50 hover:bg-ink/70 md:max-w-[46%] md:px-6 md:py-5"
              >
                <span className="flex min-w-0 flex-col text-end">
                  <span className="text-[11px] font-light text-ivory/50">{t('nextProject')}</span>
                  <span className="mt-1 truncate text-sm font-bold text-ivory transition-colors duration-300 group-hover:text-copper md:text-base">
                    {nextProject.title}
                  </span>
                </span>
                <ArrowLeftIcon className="h-4 w-4 shrink-0 -scale-x-100 text-copper" aria-hidden="true" />
              </Link>
            )}
          </div>
        </nav>
      )}

      <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 />
    </>
  )
}