/* global React */

/* ============================================
   PROJECTS
   ============================================ */

const PROJECTS = [
  {
    id: 'sparkjoy',
    n: '01',
    title: 'SparkJoy',
    tag: 'Work · 2024',
    cat: 'Work',
    desc: 'A web app for book lovers to discover novels with ease — built with Vue.js and Vuetify for a fast, user-friendly reading experience.',
    chips: ['Vue.js', 'Vuetify', 'JavaScript'],
    grad: 'radial-gradient(ellipse at 30% 20%, #5ef3ff 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, #a26bff 0%, transparent 60%)',
    glow: 'rgba(94, 243, 255, 0.5)',
    span: 'span-7',
    accent: '#5ef3ff',
  },
  {
    id: 'activities-monitor',
    n: '02',
    title: 'Activities Monitoring System',
    tag: 'Work · 2023',
    cat: 'Work',
    desc: 'A system for tracking and monitoring activities, built with responsive interfaces and integrated backend APIs for dynamic data rendering.',
    chips: ['React.js', 'Node.js', 'REST API'],
    grad: 'radial-gradient(ellipse at 50% 30%, #ff7ad1 0%, transparent 60%), linear-gradient(135deg, #2e7bff, transparent)',
    glow: 'rgba(255, 122, 209, 0.5)',
    span: 'span-5',
    accent: '#ff7ad1',
  },
  {
    id: 'sparkjoy-admin',
    n: '03',
    title: 'SparkJoy Admin',
    tag: 'Work · 2024',
    cat: 'Work',
    desc: 'An admin dashboard for managing the SparkJoy platform — handling content, users, and analytics with a clean, efficient interface.',
    chips: ['Vue.js', 'Vuetify', 'Axios'],
    grad: 'radial-gradient(ellipse at 60% 40%, #a26bff 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, #4d9fff 0%, transparent 60%)',
    glow: 'rgba(162, 107, 255, 0.5)',
    span: 'span-5',
    accent: '#a26bff',
  },
  {
    id: 'mental-health',
    n: '04',
    title: 'Mental Health Web App',
    tag: 'Academic · 2023',
    cat: 'Academic',
    desc: 'A platform connecting patients with therapists, featuring intelligent matching using cosine similarity, real-time chat, and appointment booking.',
    chips: ['React.js', 'Django', 'MySQL'],
    grad: 'radial-gradient(ellipse at 40% 30%, #7af0c2 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, #4d9fff 0%, transparent 60%)',
    glow: 'rgba(122, 240, 194, 0.45)',
    span: 'span-7',
    accent: '#7af0c2',
  },
  {
    id: 'nepali-speech',
    n: '05',
    title: 'Nepali Speech-to-Text',
    tag: 'Academic · 2024',
    cat: 'Academic',
    desc: 'A deep learning system using Hugging Face transformers to transcribe and summarize Nepali speech, achieving 33.17% WER and 6.84% CER.',
    chips: ['Python', 'Hugging Face', 'NLP'],
    grad: 'radial-gradient(ellipse at 30% 50%, #4d9fff 0%, transparent 60%), radial-gradient(ellipse at 70% 30%, #a26bff 0%, transparent 70%)',
    glow: 'rgba(77, 159, 255, 0.5)',
    span: 'span-5',
    accent: '#4d9fff',
  },
];

const FILTERS = ['All', 'Work', 'Academic'];

function ProjectCard({ p, onOpen }) {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf;
    const move = (e) => {
      const r = el.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width;
      const y = (e.clientY - r.top) / r.height;
      const rx = (y - 0.5) * -8;
      const ry = (x - 0.5) * 8;
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        el.style.transform = `perspective(1200px) rotateX(${rx}deg) rotateY(${ry}deg) translateY(-6px)`;
      });
    };
    const leave = () => {
      cancelAnimationFrame(raf);
      el.style.transform = '';
    };
    el.addEventListener('mousemove', move);
    el.addEventListener('mouseleave', leave);
    return () => {
      el.removeEventListener('mousemove', move);
      el.removeEventListener('mouseleave', leave);
      cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <article
      ref={ref}
      className={`project-card reveal ${p.span}`}
      onClick={() => onOpen(p)}
      style={{ '--c1': p.glow }}
    >
      <div className="preview" style={{ background: p.grad }}>
        <div className="glow" />
        <div className="mockup">
          <div className="mockup-bar">
            <i></i><i></i><i></i>
            <span style={{
              marginLeft: 10,
              fontFamily: 'var(--font-mono)',
              fontSize: 10,
              color: 'var(--ink-mute)',
              letterSpacing: '0.1em'
            }}>{p.id}.app / preview</span>
          </div>
          <div style={{
            padding: '20px',
            display: 'grid',
            gridTemplateColumns: '1fr 1fr 1fr',
            gap: 10,
            height: 'calc(100% - 26px)'
          }}>
            <div style={{
              gridColumn: 'span 2',
              borderRadius: 8,
              background: `linear-gradient(135deg, ${p.accent}40, transparent)`,
              border: '1px solid rgba(255,255,255,0.08)'
            }} />
            <div style={{
              borderRadius: 8,
              background: 'rgba(255,255,255,0.04)',
              border: '1px solid rgba(255,255,255,0.06)'
            }} />
            <div style={{
              borderRadius: 8,
              background: 'rgba(255,255,255,0.04)',
              border: '1px solid rgba(255,255,255,0.06)'
            }} />
            <div style={{
              gridColumn: 'span 2',
              borderRadius: 8,
              background: 'rgba(255,255,255,0.03)',
              border: '1px solid rgba(255,255,255,0.06)'
            }} />
          </div>
        </div>
        <button className="project-open" aria-label={`Open ${p.title}`}>
          <Plus size={16} />
        </button>
      </div>
      <div className="meta">
        <div className="row">
          <span className="tag">{p.tag}</span>
          <span className="num">{p.n} / {String(PROJECTS.length).padStart(2, '0')}</span>
        </div>
        <h3>{p.title}</h3>
        <p className="desc">{p.desc}</p>
        <div className="chips">
          {p.chips.map((c) => <span key={c} className="chip">{c}</span>)}
        </div>
      </div>
    </article>
  );
}

function ProjectModal({ project, onClose }) {
  React.useEffect(() => {
    if (project) {
      document.body.style.overflow = 'hidden';
      const onKey = (e) => { if (e.key === 'Escape') onClose(); };
      window.addEventListener('keydown', onKey);
      return () => {
        document.body.style.overflow = '';
        window.removeEventListener('keydown', onKey);
      };
    }
  }, [project, onClose]);

  return (
    <div className={`proj-modal ${project ? 'is-open' : ''}`} onClick={onClose}>
      <div className="proj-modal-card" onClick={(e) => e.stopPropagation()}>
        {project && (
          <>
            <div className="proj-modal-hero" style={{ background: project.grad }}>
              <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 50% 100%, var(--bg-1), transparent 70%)' }} />
              <div style={{ position: 'absolute', bottom: 28, left: 36, right: 36 }}>
                <span className="tag" style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>
                  {project.tag}
                </span>
                <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 500, letterSpacing: '-0.03em', marginTop: 8 }}>
                  {project.title}
                </h2>
              </div>
            </div>
            <button className="proj-modal-close" onClick={onClose} aria-label="Close">
              <Close size={14} />
            </button>
            <div className="proj-modal-body">
              <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 40, marginBottom: 30 }}>
                <div>
                  <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.5, color: 'var(--ink)', marginBottom: 22 }}>
                    {project.desc}
                  </p>
                  <p style={{ color: 'var(--ink-soft)', lineHeight: 1.7 }}>
                    Built with a focus on clean architecture, responsive design,
                    and seamless user experience. Each project reflects my
                    commitment to writing maintainable code and delivering
                    real value through thoughtful engineering.
                  </p>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                  <div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', color: 'var(--ink-mute)', textTransform: 'uppercase' }}>Role</div>
                    <div style={{ marginTop: 6 }}>Design & development</div>
                  </div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', color: 'var(--ink-mute)', textTransform: 'uppercase' }}>Year</div>
                    <div style={{ marginTop: 6 }}>{project.tag.split('·')[1]?.trim() ?? '2025'}</div>
                  </div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', color: 'var(--ink-mute)', textTransform: 'uppercase' }}>Stack</div>
                    <div style={{ marginTop: 6, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                      {project.chips.map((c) => <span key={c} className="chip">{c}</span>)}
                    </div>
                  </div>
                </div>
              </div>
              <button className="btn btn-primary">View project <Arrow /></button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

function Projects() {
  const [filter, setFilter] = React.useState('All');
  const [open, setOpen] = React.useState(null);

  const visible = React.useMemo(
    () => filter === 'All' ? PROJECTS : PROJECTS.filter((p) => p.cat === filter),
    [filter]
  );

  return (
    <section id="projects" data-screen-label="04 Projects">
      <div className="container">
        <div className="projects-head">
          <div className="reveal">
            <span className="eyebrow eyebrow-dot">/ 03 — Selected work</span>
            <h2 className="section-title" style={{ marginTop: 22 }}>
              Featured <span className="alt">projects</span><br/>
              & academic work.
            </h2>
          </div>
          <div className="proj-filters reveal reveal-delay-2">
            {FILTERS.map((f) => (
              <button
                key={f}
                className={`proj-filter ${filter === f ? 'active' : ''}`}
                onClick={() => setFilter(f)}
              >
                {f}
              </button>
            ))}
          </div>
        </div>

        <div className="projects-grid">
          {visible.map((p) => <ProjectCard key={p.id} p={p} onOpen={setOpen} />)}
        </div>

        <ProjectModal project={open} onClose={() => setOpen(null)} />
      </div>
    </section>
  );
}

Object.assign(window, { Projects, PROJECTS });