import { Link } from 'react-router-dom'
import { useState } from 'react'
import { motion } from 'framer-motion'
import { Github, ExternalLink, ChevronDown, ChevronUp } from 'lucide-react'
import { PROJECTS } from '../data/info'
import { TECH_ICONS } from '../data/techIcons'
import SEO from '../components/seo/SEO'
import { trackEvent } from '../utils/analytics'
import SafeImage from '../components/ui/SafeImage'
import useMobileLayout from '../utils/useMobileLayout'
import { Reveal, RevealGroup, RevealItem } from '../components/ui/Reveal'
import TiltCard from '../components/ui/TiltCard'

export default function Projects() {
  const isMobile = useMobileLayout()
  const [expandedProjectId, setExpandedProjectId] = useState(null)

  const disciplines = [
    "Client-Server Architecture",
    "Algorithm Design",
    "Data Structures",
    "System Optimization",
    "Relational Databases",
    "Full-Stack Integration",
    "Sprint Planning",
    "Delivery Tracking"
  ]
  // Duplicate for infinite seamless scroll
  const marqueeDisciplines = [...disciplines, ...disciplines, ...disciplines, ...disciplines]
  const projectListSchema = {
    '@context': 'https://schema.org',
    '@type': 'ItemList',
    itemListElement: PROJECTS.map((project, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      item: {
        '@type': 'CreativeWork',
        name: project.title,
        description: project.desc,
      },
    })),
  }

  const getBriefDescription = (text) => {
    const firstSentence = text.split('. ')[0]?.trim()
    if (!firstSentence) return text
    return firstSentence.endsWith('.') ? firstSentence : `${firstSentence}.`
  }

  if (isMobile) {
    return (
      <motion.div initial="hidden" animate="show" exit={{ opacity: 0 }} className="mobile-projects">
        <SEO
          title="Projects"
          description="Selected engineering projects with measurable outcomes and full case-study breakdowns."
          path="/projects"
          jsonLd={projectListSchema}
        />

        <Reveal as="section" className="section-max mobile-projects__hero">
          <span className="mobile-projects__eyebrow">Project Portfolio</span>
          <h1>Builds Optimized for Delivery</h1>
          <p>Tap a project to expand details. Keep the list clean, then drill down only where you need.</p>
          <div className="mobile-projects__chips mobile-carousel">
            {disciplines.map((discipline) => (
              <span key={discipline}>{discipline}</span>
            ))}
          </div>
        </Reveal>

        <Reveal as="section" className="section-max mobile-projects__grid">
          {PROJECTS.map((proj) => (
            <article key={proj.id} className="mobile-projects__card glass-content">
              <div className="mobile-projects__card-head">
                <span>{proj.type}</span>
                <p>{proj.timeline}</p>
              </div>

              <h2>{proj.title}</h2>
              <p className="mobile-projects__role">{proj.role}</p>
              <p className="mobile-projects__desc">{getBriefDescription(proj.desc)}</p>

              <button
                type="button"
                className="mobile-projects__toggle"
                aria-expanded={expandedProjectId === proj.id}
                onClick={() => setExpandedProjectId((current) => (current === proj.id ? null : proj.id))}
              >
                <span>{expandedProjectId === proj.id ? 'Hide details' : 'View details'}</span>
                {expandedProjectId === proj.id ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
              </button>

              {expandedProjectId === proj.id && (
                <div className="mobile-projects__details">
                  <div className="mobile-projects__metrics">
                    {(proj.metrics || []).map((metric) => (
                      <div key={metric.label}>
                        <span>{metric.label}</span>
                        <strong>{metric.value}</strong>
                      </div>
                    ))}
                  </div>

                  <div className="mobile-projects__stack">
                    {proj.stack.map((tech) => (
                      <span key={tech}>{tech}</span>
                    ))}
                  </div>

                  {proj.outcomes?.length > 0 && (
                    <ul className="mobile-projects__outcomes">
                      {proj.outcomes.map((outcome) => (
                        <li key={outcome}>{outcome}</li>
                      ))}
                    </ul>
                  )}

                  <div className="mobile-projects__actions">
                    <Link to={`/projects/${proj.id}`}>Case Study</Link>
                    {proj.github && (
                      <a
                        href={proj.github}
                        target="_blank"
                        rel="noopener noreferrer"
                        onClick={() => trackEvent('project_repo_click', { projectId: proj.id, placement: 'mobile_card' })}
                      >
                        Repo
                      </a>
                    )}
                    {proj.live && (
                      <a
                        href={proj.live}
                        target="_blank"
                        rel="noopener noreferrer"
                        onClick={() => trackEvent('project_live_click', { projectId: proj.id, placement: 'mobile_card' })}
                      >
                        Live
                      </a>
                    )}
                  </div>
                </div>
              )}
            </article>
          ))}
        </Reveal>

        <Reveal as="section" className="section-max mobile-projects__toolbox">
          <h2>Toolbox</h2>
          <div className="mobile-projects__toolbox-grid mobile-carousel">
            {TECH_ICONS.map((tech) => (
              <article key={tech.name} className="mobile-projects__toolbox-item glass-sm" title={tech.name}>
                <SafeImage src={tech.icon} alt={tech.name} className="mobile-projects__toolbox-icon" />
                <span>{tech.name}</span>
              </article>
            ))}
          </div>
        </Reveal>
      </motion.div>
    )
  }

  const renderProjectCard = (proj) => (
    <RevealItem key={proj.id} y={12} duration={0.44}>
      <TiltCard
        tiltMaxAngleX={4} tiltMaxAngleY={4} scale={1.012}
        className="glass-content group p-5 sm:p-7 md:p-10 flex flex-col relative overflow-hidden border-white/[0.08] hover:border-white/[0.14]"
      >
        <div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-white/[0.06] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div className="absolute top-0 right-0 w-40 h-40 bg-cyan-400/[0.03] rounded-full blur-[80px] pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>

        <div className="flex items-start justify-between mb-6 relative z-10">
          <div className="flex items-center gap-3">
            <span className="font-mono text-[10px] font-bold tracking-[0.2em] uppercase text-white/15 glass-sm px-3 py-1 border-white/[0.04] group-hover:text-white/30 group-hover:border-white/[0.08] transition-all">
              {proj.type}
            </span>
          </div>
          <div className="flex gap-2">
            {proj.github && (
              <a
                href={proj.github}
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 rounded-[12px] glass-sm flex items-center justify-center text-white/15 hover:text-white/50 border-white/[0.04] hover:border-white/[0.1] transition-all duration-300"
                aria-label={`Open ${proj.title} repository`}
                onClick={() => trackEvent('project_repo_click', { projectId: proj.id })}
              >
                <Github size={15} />
              </a>
            )}
            {proj.live && (
              <a
                href={proj.live}
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 rounded-[12px] glass-sm flex items-center justify-center text-[var(--accent)]/40 hover:text-[var(--accent)] border-white/[0.04] hover:border-[rgba(103,232,249,0.15)] transition-all duration-300"
                aria-label={`Open ${proj.title} live site`}
                onClick={() => trackEvent('project_live_click', { projectId: proj.id })}
              >
                <ExternalLink size={15} />
              </a>
            )}
          </div>
        </div>

        <div className="mb-4 relative z-10 flex flex-col gap-2">
          <h2 className="font-display text-2xl font-bold text-white/80 group-hover:text-white tracking-tight transition-colors">
            {proj.title}
          </h2>
          {proj.role && (
            <span className="font-mono text-[10px] uppercase font-bold tracking-[0.1em] text-[var(--accent)]/90">
              {proj.role}
            </span>
          )}
        </div>
        <p className="text-[15px] text-white/25 font-light leading-relaxed mb-8 flex-grow relative z-10">
          {proj.desc}
        </p>

        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-6 relative z-10">
          {proj.metrics?.map((metric) => (
            <div key={metric.label} className="rounded-xl border border-white/[0.1] bg-black/55 backdrop-blur-md px-3 py-2">
              <p className="font-mono text-[9px] tracking-[0.15em] uppercase text-white/25">{metric.label}</p>
              <p className="text-[12px] text-white/70 mt-1">{metric.value}</p>
            </div>
          ))}
        </div>

        <ul className="list-disc pl-5 mb-6 text-[13px] text-[color:var(--text-tertiary)] space-y-1 relative z-10">
          {proj.outcomes?.slice(0, 2).map((outcome) => (
            <li key={outcome}>{outcome}</li>
          ))}
        </ul>

        <div className="relative z-10 mb-2">
          <Link
            to={`/projects/${proj.id}`}
            className="w-full sm:w-auto justify-center inline-flex items-center gap-2 px-4 py-2 rounded-full glass-sm bg-black/45 border border-white/[0.1] no-underline text-white/80 hover:text-white hover:border-white/[0.2] transition-colors"
            aria-label={`Read case study for ${proj.title}`}
            onClick={() => trackEvent('project_case_study_click', { projectId: proj.id })}
          >
            Read Case Study <ExternalLink size={13} />
          </Link>
        </div>

        <div className="flex flex-wrap gap-2 pt-6 border-t border-white/[0.04] relative z-10">
          {proj.stack.map((tech) => (
            <span key={tech} className="font-mono text-[9px] font-bold tracking-[0.15em] uppercase text-white/25 glass-sm bg-black/45 border border-white/[0.08] px-3 py-1 group-hover:text-white/40 transition-colors">
              {tech}
            </span>
          ))}
        </div>
      </TiltCard>
    </RevealItem>
  )

  return (
    <motion.div initial="hidden" animate="show" exit={{ opacity: 0 }}>
      <SEO
        title="Projects"
        description="Selected engineering projects with measurable outcomes and full case-study breakdowns."
        path="/projects"
        jsonLd={projectListSchema}
      />

      <section className="section-max pt-8 sm:pt-12 md:pt-16 pb-12 md:pb-20 section-rhythm-md">

        {/* ── CORE ENGINEERING INFRASTRUCTURE (THE CUPBOARD) ── */}
        <Reveal className="mb-14 sm:mb-20 md:mb-28 mt-1 sm:mt-2 md:mt-4">

          <div className="text-center mb-10">
            <span className="font-mono text-[11px] font-medium tracking-[0.2em] uppercase text-[var(--accent)] mb-3 block drop-shadow-md">Technology Stack</span>
            <h2 className="font-display text-[clamp(1.9rem,8.2vw,3rem)] font-bold text-white tracking-[-0.03em] leading-[0.98]">
              Core Engineering <span className="text-gradient drop-shadow-[0_0_20px_rgba(103,232,249,0.2)]">Infrastructure</span>
            </h2>
          </div>

          {/* The Cupboard Container */}
          <div className="glass p-3 sm:p-6 md:p-8 rounded-2xl sm:rounded-[28px] md:rounded-[36px] border-white/[0.04] shadow-[inset_0_0_100px_rgba(0,0,0,0.8)] relative">
            <RevealGroup
              stagger={0.035}
              delayChildren={0.04}
              amount={0.2}
              className="grid grid-cols-6 gap-2 sm:gap-3 md:gap-4 relative z-10"
            >

              {TECH_ICONS.map((tech) => (
                <RevealItem key={tech.name} y={12} duration={0.44}>
                  <TiltCard
                    tiltMaxAngleX={8} tiltMaxAngleY={8} scale={1.08} glareBorderRadius="16px"
                    className="bg-black/60 border border-white/[0.03] p-2.5 sm:p-5 md:p-6 rounded-xl sm:rounded-2xl flex flex-col items-center justify-center gap-2.5 sm:gap-4 md:gap-5 group hover:border-[var(--accent)]/30 hover:bg-[var(--accent)]/[0.03] hover:shadow-[0_20px_40px_rgba(0,0,0,0.4)] transition-all duration-500 relative overflow-hidden"
                  >
                    {/* Top glass reflection line for physical cube authentic feel */}
                    <div className="absolute top-0 left-8 right-8 h-[1px] bg-gradient-to-r from-transparent via-white/[0.15] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>

                    <div className="w-[clamp(2.25rem,7vw,3.25rem)] h-[clamp(2.25rem,7vw,3.25rem)] relative z-10 flex items-center justify-center pointer-events-none group-hover:-translate-y-1.5 transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] drop-shadow-[0_10px_20px_rgba(0,0,0,0.5)]">
                      <SafeImage
                        src={tech.icon}
                        alt={tech.name}
                        className="max-w-full max-h-full object-contain brightness-[0.7] group-hover:brightness-110 group-hover:scale-125 transition-all duration-500"
                      />
                    </div>

                    <span className="font-mono text-[8px] sm:text-[9px] font-bold tracking-[0.14em] sm:tracking-[0.2em] uppercase text-white/30 group-hover:text-white transition-colors z-10 text-center leading-tight">
                      {tech.name}
                    </span>
                  </TiltCard>
                </RevealItem>
              ))}

            </RevealGroup>
          </div>
        </Reveal>

      </section>

      {/* ── CORE DISCIPLINES MARQUEE ── */}
      <Reveal as="section" className="w-full border-y border-white/[0.03] bg-white/[0.01] py-5 sm:py-6 md:py-8 mb-14 sm:mb-20 md:mb-32 relative overflow-hidden backdrop-blur-sm z-10">
        <div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-black to-transparent z-10 pointer-events-none"></div>
        <div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-black to-transparent z-10 pointer-events-none"></div>

        <div className="marquee-container flex flex-col gap-6">
          <div className="section-max flex items-center justify-center gap-4 mb-2">
            <span className="w-1.5 h-1.5 bg-[var(--accent)] rounded-full animate-pulse shadow-[0_0_10px_var(--accent)]"></span>
            <span className="font-mono text-[10px] font-bold tracking-[0.3em] uppercase text-white/30 text-center">Core Disciplines</span>
            <span className="w-1.5 h-1.5 bg-[var(--accent)] rounded-full animate-pulse shadow-[0_0_10px_var(--accent)]"></span>
          </div>

          <div className="animate-marquee flex items-center gap-8 md:gap-16 px-6 sm:px-10">
            {marqueeDisciplines.map((discipline, i) => (
              <div key={`${discipline}-${i}`} className="flex items-center gap-10 md:gap-16 group/marquee cursor-default">
                <span className="font-display text-[13px] md:text-[15px] font-medium tracking-[0.15em] uppercase text-white/40 group-hover/marquee:text-[var(--accent)] transition-colors whitespace-nowrap">
                  {discipline}
                </span>
                <span className="text-[var(--accent)]/40 text-[12px] opacity-60">✦</span>
              </div>
            ))}
          </div>
        </div>
      </Reveal>

      {/* Re-open container for project cards */}
      <section className="section-max pb-16 sm:pb-24 md:pb-40 section-divider section-rhythm-lg">

        {/* ── PROJECT CARDS ── */}
        <Reveal className="text-center mb-10 sm:mb-14 md:mb-20">
          <p className="font-mono text-[11px] font-medium tracking-[0.2em] uppercase text-white/15 mb-5">// Project Cards</p>
          <h1 className="font-display text-[clamp(2.25rem,10vw,4.5rem)] font-bold text-white tracking-[-0.03em] leading-[0.97] mb-6">
            Selected <span className="text-gradient">Creations</span>
          </h1>
          <p className="text-[17px] text-[color:var(--text-tertiary)] max-w-xl mx-auto font-light leading-relaxed">
            Full-stack builds supported by practical planning, collaboration, and consistent execution.
          </p>
        </Reveal>

        <RevealGroup
          stagger={0.035}
          delayChildren={0.04}
          amount={0.16}
          className="grid grid-cols-2 gap-3 sm:gap-6"
        >
          {PROJECTS.map((proj) => renderProjectCard(proj))}
        </RevealGroup>

      </section>
    </motion.div>
  )
}