import React from 'react'
import { motion, useScroll, useTransform } from 'framer-motion'
import { ArrowLeftIcon, ChevronDownIcon } from 'lucide-react'
import { ButtonLink } from '../Button'
import { useSite } from '../../api'
import { useLang } from '../../i18n/lang'
import { useFieldSaver } from '../../admin/AdminContext'
import { InlineEdit } from '../admin/InlineEdit'
import { SingletonPill } from '../../admin/Editable'

export function Hero() {
  const { brand, hero } = useSite()
  const { t, href } = useLang()
  const save = useFieldSaver()
  const { scrollY } = useScroll()
  const imageY = useTransform(scrollY, [0, 700], [0, 110])
  const contentY = useTransform(scrollY, [0, 700], [0, -55])
  const overlay = useTransform(scrollY, [0, 600], [0.5, 0.78])

  const saveHero = (field: string, value: unknown) =>
    save('hero', hero.id, { [field]: value }, (d) => {
      ;(d.hero as unknown as Record<string, unknown>)[field] = value
    })

  return (
    <section className="relative h-screen min-h-[640px] w-full overflow-hidden" aria-label={t('heroAria')}>
      {/* تصویر پس‌زمینه */}
      <motion.img
        src={brand.hero}
        alt={t('heroImageAlt')}
        style={{ y: imageY }}
        className="absolute inset-0 h-[114%] w-full object-cover"
      />
      <motion.div className="absolute inset-0 bg-ink" style={{ opacity: overlay }} aria-hidden="true" />
      <div
        className="absolute inset-0"
        style={{
          background:
            'linear-gradient(to top, #27221c 5%, rgba(39,34,28,0.2) 60%, rgba(39,34,28,0.6) 100%)',
        }}
        aria-hidden="true"
      />

      {/* محتوای اصلی هیرو */}
      <motion.div
        style={{ y: contentY }}
        className="relative mx-auto flex h-full max-w-site flex-col justify-center px-6 lg:px-10"
      >
        <div className="w-full max-w-[700px] lg:max-w-[58%]">
          {/* کیکر بالای تیتر */}
          <motion.p
            initial={{ opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 2.1, ease: [0.23, 1, 0.32, 1] }}
            className="text-sm font-light text-copper tracking-wide"
          >
            <InlineEdit value={hero.kicker} onSave={(v) => saveHero('kicker', v)} />
          </motion.p>

          {/* تیتر اصلی */}
          <motion.h1
            initial={{ opacity: 0, y: 28 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.85, delay: 2.2, ease: [0.23, 1, 0.32, 1] }}
            className="mt-6 text-hero font-bold text-ivory leading-[1.3]"
          >
            <InlineEdit value={hero.title} onSave={(v) => saveHero('title', v)} aria-label={t('heroTitleAria')} />
          </motion.h1>

          {/* زیرتیتر */}
          <motion.p
            initial={{ opacity: 0, y: 22 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.85, delay: 2.32, ease: [0.23, 1, 0.32, 1] }}
            className="mt-7 max-w-xl text-base font-light leading-9 text-ivory/75"
          >
            <InlineEdit multiline value={hero.subtitle} onSave={(v) => saveHero('subtitle', v)} />
          </motion.p>

          {/* داک دکمه‌ها: استایل کپسولی، شیشه‌ای و دایره‌ای */}
          <motion.div
            initial={{ opacity: 0, y: 22 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.85, delay: 2.44, ease: [0.23, 1, 0.32, 1] }}
            className="mt-10 flex flex-wrap items-center gap-4"
          >
            {/* دکمه اصلی: کپسولی شیشه‌ای دودی با دایره کهربایی اختصاصی برای آیکون */}
            <ButtonLink
              to={href(hero.cta_primary_href)}
              variant="copper"
              className="!p-1.5 !pr-7 !rounded-full shadow-lg shadow-black/40 hover:shadow-copper/25 transition-all duration-300"
            >
              <span className="text-sm font-medium tracking-wide text-ivory">
                <InlineEdit value={hero.cta_primary_label} onSave={(v) => saveHero('cta_primary_label', v)} />
              </span>
              <span className="flex h-9 w-9 items-center justify-center rounded-full bg-copper text-char shadow-md transition-all duration-300 group-hover:scale-110 rtl:group-hover:-translate-x-1 ltr:group-hover:translate-x-1">
                <ArrowLeftIcon className="h-4 w-4 stroke-[2.5] ltr:-scale-x-100" />
              </span>
            </ButtonLink>

            {/* دکمه ثانویه: شیشه دودی مات (Smoked Glass) با کادر ظریف */}
            <ButtonLink
              to={href(hero.cta_secondary_href)}
              variant="outline"
              className="!rounded-full !px-8 !py-3.5 bg-char/40 backdrop-blur-md border border-ivory/20 text-ivory hover:border-copper/70 hover:text-copper transition-all duration-300 shadow-sm"
            >
              <InlineEdit value={hero.cta_secondary_label} onSave={(v) => saveHero('cta_secondary_label', v)} />
            </ButtonLink>
          </motion.div>
        </div>

        {/* کادر آمار شناور (گوشه پایین چپ): شیشه‌ای با لبه‌های گرد مدرن */}
        <motion.div
          initial={{ opacity: 0, x: -24 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.9, delay: 2.6, ease: [0.23, 1, 0.32, 1] }}
          className="absolute bottom-28 ltr:right-6 rtl:left-6 hidden w-64 rounded-2xl border border-ivory/15 bg-char/70 p-6 backdrop-blur-xl shadow-2xl shadow-black/40 lg:block lg:ltr:right-10 lg:rtl:left-10"
        >
          <p className="text-3xl font-bold text-copper font-mono">
            <InlineEdit value={hero.badge_value} onSave={(v) => saveHero('badge_value', v)} />
          </p>
          <p className="mt-2 text-sm font-light leading-7 text-ivory/70">
            <InlineEdit multiline value={hero.badge_label} onSave={(v) => saveHero('badge_label', v)} />
          </p>
        </motion.div>
      </motion.div>

      {/* دکمه اسکرول پایین: تبدیل‌شده به یک گوی شیشه‌ای دایره‌ای */}
      <a
        href="#story"
        aria-label={t('scrollDown')}
        className="group absolute bottom-7 right-1/2 z-10 flex translate-x-1/2 flex-col items-center gap-2 text-ivory/60 transition-colors duration-300 hover:text-copper"
      >
        <span className="text-[11px] font-light tracking-widest opacity-80 group-hover:opacity-100">
          <InlineEdit value={hero.scroll_label} onSave={(v) => saveHero('scroll_label', v)} />
        </span>
        <div className="flex h-10 w-10 items-center justify-center rounded-full border border-ivory/20 bg-char/40 backdrop-blur-md transition-all duration-300 group-hover:border-copper group-hover:bg-char/70 group-hover:shadow-lg group-hover:shadow-copper/20">
          <ChevronDownIcon className="h-4 w-4 animate-bounce text-ivory group-hover:text-copper" />
        </div>
      </a>

      {/* کنترل‌های ادمین */}
      <div className="absolute left-6 top-24 z-20 flex flex-col gap-2 lg:left-10">
        <SingletonPill resource="hero" label="تنظیمات هیرو (واژه مسی، دکمه‌ها)" />
        <SingletonPill
          resource="seo-meta"
          label="عنوان و توضیح سئوی صفحه اصلی"
          select={(d) => d.seo_meta.find((s) => s.page_key === 'home')}
        />
      </div>
    </section>
  )
}