import { motion } from 'framer-motion'
import { useInView } from 'react-intersection-observer'
import { FiGithub, FiExternalLink, FiFolder } from 'react-icons/fi'

const PROJECTS = [
  {
    number: '01',
    title: 'Healthcare Chatbot',
    description: 'AI-powered healthcare assistant with semantic retrieval over curated medical knowledge.',
    highlights: [
      'RAG pipeline with Pinecone for semantic document retrieval',
      'LangChain + Groq LLM for accurate, context-aware responses',
      'Streamlit UI with conversation history & real-time streaming',
    ],
    tags: ['RAG', 'Pinecone', 'LangChain', 'Groq LLM', 'Streamlit'],
    github: 'https://github.com/babaiii07/Agentic-HealthCare-Chatbot',
    demo: 'https://parthib07-multiagent-healthcare-chatbot.hf.space',
    accent: '#6366f1',
  },
  {
    number: '02',
    title: 'AI Virtual Dev POD',
    description: 'Multi-agent SDLC automation platform where specialized agents manage the full dev lifecycle.',
    highlights: [
      'LangGraph orchestration with PM, Dev, QA, and DevOps agents',
      'ChromaDB for persistent cross-agent memory sharing',
      'Automated code generation, review, and testing pipelines',
    ],
    tags: ['Multi-Agent', 'LangGraph', 'ChromaDB', 'Agentic AI'],
    github: 'https://github.com/babaiii07/AI_Virtual_dev_POD',
    demo: 'https://agnik28-ai-virtual-pod.hf.space/',
    accent: '#8b5cf6',
  },
  {
    number: '03',
    title: 'Virtual Research Assistant',
    description: 'Autonomous research workflow that discovers, summarizes, and synthesizes knowledge at scale.',
    highlights: [
      'AutoGen-powered multi-step research pipeline',
      'MySQL-backed persistence for research sessions and citations',
      'Groq LLM for rapid summarization and insight extraction',
    ],
    tags: ['AutoGen', 'Groq LLM', 'MySQL', 'NLP'],
    github: 'https://huggingface.co/spaces/parthib07/Virtual_Research_Paper_Assistant/tree/main',
    demo: 'https://parthib07-virtual-research-paper-assistant.hf.space',
    accent: '#06b6d4',
  },
  {
    number: '04',
    title: 'OwnGPT',
    description: 'Secure, AI-powered platform that transforms enterprise data into actionable insights through natural language interaction.',
    highlights: [
      'Enterprise-grade RAG system with multi-source ingestion (documents, DBs, APIs)',
      'LangGraph + LangChain orchestration for intelligent reasoning workflows',
      'Secure authentication (Google Auth) with scalable FastAPI backend',
    ],
    tags: ['FastAPI', 'LangChain', 'LangGraph', 'MongoDB', 'Google Auth', 'Python'],
    github: null,
    demo: 'https://parthib07-owngpt-v2.hf.space',
    accent: '#10b981',
  },
  {
    number: '05',
    title: 'CodeFusion',
    description: 'AI-powered vibecoding platform designed to enhance developer productivity using DeepSeek intelligence.',
    highlights: [
      'DeepSeek-powered code generation and intelligent assistance',
      'Real-time coding environment with AI-driven suggestions and optimizations',
      'Built for developers, data scientists, and AI engineers workflows',
    ],
    tags: ['DeepSeek AI', 'FastAPI', 'React', 'Python'],
    github: null,
    demo: 'https://codefusion-v2-parthib.onrender.com',
    accent: '#f59e0b',
  },
  {
    number: '06',
    title: 'AnySITE',
    description: 'Next-gen vibecoding platform enabling rapid AI-driven web creation and prototyping.',
    highlights: [
      'AI-assisted website generation from minimal input (prompt → app)',
      'Full-stack generation pipeline with real-time rendering',
      'Designed for rapid prototyping and creative development workflows',
    ],
    tags: ['FastAPI', 'React', 'AI Models', 'Python'],
    github: null,
    demo: 'https://anysite-vibecoding-parthib.onrender.com',
    accent: '#f43f5e',
  },
]


function ProjectCard({ project, index }) {
  const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.08 })
  return (
    <motion.div
      ref={ref}
      className="glass-card"
      style={{ padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '0.8rem', position: 'relative', overflow: 'hidden' }}
      initial={{ opacity: 0, y: 40 }}
      animate={inView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.6, delay: (index % 3) * 0.1, ease: [0.22, 1, 0.36, 1] }}
      whileHover={{ y: -6 }}
    >
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: `linear-gradient(90deg, ${project.accent}, transparent)` }} />

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.7rem', color: 'var(--text-muted)', letterSpacing: '0.08em' }}>{project.number}</span>
        <FiFolder size={18} style={{ color: project.accent, opacity: 0.7 }} />
      </div>

      <h3 style={{ fontSize: '1.05rem', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.3 }}>{project.title}</h3>
      <p style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', lineHeight: 1.7 }}>{project.description}</p>

      <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: 5, margin: 0 }}>
        {project.highlights.map((h, i) => (
          <li key={i} style={{ display: 'flex', gap: 8, fontSize: '0.8rem', color: 'var(--text-secondary)', lineHeight: 1.55 }}>
            <span style={{ color: project.accent, flexShrink: 0 }}>→</span>
            {h}
          </li>
        ))}
      </ul>

      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginTop: 'auto' }}>
        {project.tags.map(tag => (
          <span key={tag} className="tech-tag" style={{ background: `${project.accent}12`, borderColor: `${project.accent}25`, color: project.accent, fontSize: '0.68rem' }}>
            {tag}
          </span>
        ))}
      </div>

      <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
        {project.github && (
          <motion.a href={project.github} target="_blank" rel="noopener noreferrer"
            className="btn btn-secondary btn-sm" whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.97 }}>
            <FiGithub size={13} /> Code
          </motion.a>
        )}
        <motion.a href={project.demo} target="_blank" rel="noopener noreferrer"
          className="btn btn-primary btn-sm" whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.97 }}>
          <FiExternalLink size={13} /> Demo
        </motion.a>
      </div>
    </motion.div>
  )
}

export default function Projects() {
  const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.05 })
  return (
    <section id="projects" className="section">
      <div className="orb orb-cyan" style={{ width: 400, height: 400, top: '10%', left: '-8%', position: 'absolute', opacity: 0.35 }} />
      <div className="container" ref={ref}>
        <motion.div className="section-header"
          initial={{ opacity: 0, y: 24 }} animate={inView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.55 }}>
          <div className="section-tag"><FiFolder size={12} /> Projects</div>
          <h2 className="section-title">Featured Work</h2>
          <p className="section-subtitle">Production-grade AI systems built with cutting-edge technology.</p>
        </motion.div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: '1.25rem' }}>
          {PROJECTS.map((p, i) => <ProjectCard key={p.number} project={p} index={i} />)}
        </div>

        <motion.div style={{ textAlign: 'center', marginTop: '2.5rem' }}
          initial={{ opacity: 0 }} animate={inView ? { opacity: 1 } : {}} transition={{ delay: 0.5 }}>
          <a href="https://github.com/babaiii07" target="_blank" rel="noopener noreferrer" className="btn btn-secondary">
            <FiGithub size={15} /> View All on GitHub
          </a>
        </motion.div>
      </div>
    </section>
  )
}