'use client';

import React from "react";
import { motion } from "framer-motion";
import Header from "@/components/shared/header";
import Footer from "@/components/shared/footer";
import { 
  ExternalLink, 
  GitBranch, 
  CheckCircle2, 
  Workflow, 
  ShieldCheck,
  Database,
  Terminal
} from "lucide-react";

interface ProjectItem {
  id: number;
  title: string;
  category: string;
  description: string;
  highlights: string[];
  techStack: string[];
  status: string;
}

const projectsData: ProjectItem[] = [
  {
    id: 1,
    title: "سامانه یکپارچه پرتال و اینترانت بانکی",
    category: "سیستم‌های سازمانی و اینترانت",
    description: "طراحی و توسعه معماری متمرکز جهت مدیریت احراز هویت، کارتابل سازمانی، ماژول‌های آماری و دسترسی‌پذیری بالا برای پرسنل شعب.",
    highlights: [
      "مدیریت سطوح دسترسی پیچیده (RBAC) و احراز هویت متمرکز",
      "معماری ماژولار کارتابل با پشتیبانی از صف‌های پردازشی سنگین",
      "یکپارچه‌سازی با هسته سامانه‌های بانکی (Core Banking)"
    ],
    techStack: ["Laravel 11", "PostgreSQL", "Redis", "Filament", "Docker"],
    status: "Production / Enterprise"
  },
  {
    id: 2,
    title: "سامانه هوشمند مدیریت شیفت و پرسنل بانکی",
    category: "پلتفرم عملیاتی و لجستیک",
    description: "پیاده‌سازی موتور تخصیص خودکار شیفت‌ها، مدیریت جایگزینی و اعلان‌های آنی جهت بهینه‌سازی توزیع نیروی انسانی در شبکه شعب.",
    highlights: [
      "الگوریتم زمان‌بندی پویا جهت پیشگیری از تداخل کاری",
      "سیستم اعلان‌های بلادرنگ (Real-time WebSockets)",
      "گزارش‌گیری تحلیلی با بازدهی بالا و کشینگ چندلایه‌ای"
    ],
    techStack: ["FastAPI", "Python", "PostgreSQL", "Redis", "React"],
    status: "Deployed"
  },
  {
    id: 3,
    title: "پایپ‌لاین رویدادمحور و موتور پردازش داده (TMS & Store)",
    category: "معماری توزیع‌شده و میکروسرویس",
    description: "طراحی زیرساخت پردازش غیرهمگام رویدادها جهت مدیریت دوره‌های آموزشی سازمانی و ثبت سفارشات درون‌سازمانی با تضمین تحویل پیام.",
    highlights: [
      "به‌کارگیری Kafka و RabbitMQ برای انتشار و مصرف پیام‌ها",
      "طراحی الگوهای Idempotency و Circuit Breaker در ارتباطات",
      "کاهش لیتنسی پردازش داده‌های حجیم به زیر ۵۰ میلی‌ثانیه"
    ],
    techStack: ["Laravel", "Kafka", "RabbitMQ", "Docker", "CI/CD"],
    status: "Microservices"
  },
  {
    id: 4,
    title: "موتور جستجوی معنایی و پایگاه دانش برداری (RAG)",
    category: "سیستم‌های مبتنی بر هوش مصنوعی",
    description: "طراحی و استقرار پایپ‌لاین تولید و نمایه‌سازی بردارهای متنی مستندات بانکی جهت پرسش‌وپاسخ هوشمند و بازیابی دقیق اسناد سازمانی.",
    highlights: [
      "ذخیره‌سازی و کوئری‌گیری پرسرعت با Qdrant Vector Database",
      "استراتژی Chunking بهینه‌شده برای اسناد فارسی و اصطلاحات تخصصی",
      "اتصال امن به مدل‌های زبانی محلی بدون خروج داده‌های محرمانه"
    ],
    techStack: ["Python", "FastAPI", "Qdrant", "PostgreSQL", "Docker"],
    status: "R&D / Production"
  }
];

export default function ProjectsPage() {
  return (
    <div dir="rtl" className="flex min-h-screen flex-col bg-gray-950 text-gray-200 font-sans selection:bg-indigo-500/30 selection:text-indigo-200">
      <Header />

      <main className="flex-1 overflow-hidden relative">
        {/* پترن گرید ۲۴ پیکسلی */}
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#1f29371f_1px,transparent_1px),linear-gradient(to_bottom,#1f29371f_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" />

        {/* بخش هدر صفحه */}
        <section className="relative px-6 pt-32 pb-16 text-center">
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="mx-auto max-w-3xl"
          >
            <div className="inline-flex items-center gap-2 px-3 py-1 mb-4 rounded-full bg-indigo-950/40 border border-indigo-500/30 text-indigo-400 text-xs font-mono">
              <GitBranch className="w-3.5 h-3.5" />
              <span>پروژه‌ها و سیستم‌های مقیاس‌پذیر</span>
            </div>

            <h1 className="mb-5 text-3xl font-extrabold tracking-tight text-white md:text-5xl">
              معماری نرم‌افزار، <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-cyan-400 to-emerald-400">سامانه‌های سازمانی</span> و بک‌اند
            </h1>
            <p className="text-sm md:text-base text-gray-400 leading-relaxed max-w-2xl mx-auto">
              نمونه‌ای از سیستم‌های تحت وب، میکروسرویس‌ها و پایپ‌لاین‌های مقیاس‌پذیر که با تمرکز بر امنیت، کارایی بالا و پایداری شبکه توسعه یافته‌اند.
            </p>
          </motion.div>
        </section>

        {/* تایم‌لاین پروژه‌ها */}
        <section className="relative mx-auto max-w-7xl px-6 py-10 mb-20">
          <div className="absolute left-1/2 top-0 hidden h-full w-[1px] -translate-x-1/2 bg-gradient-to-b from-transparent via-gray-800 to-transparent lg:block" />

          <div className="flex flex-col gap-20 lg:gap-28">
            {projectsData.map((project, index) => {
              const isEven = index % 2 === 0;

              return (
                <div
                  key={project.id}
                  className={`relative flex flex-col items-center gap-10 lg:flex-row lg:justify-between ${
                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
                  }`}
                >
                  {/* نشانگر تایم‌لاین وسط صفحه */}
                  <div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 lg:flex">
                    <div className="relative flex h-11 w-11 items-center justify-center rounded-full border border-gray-700 bg-gray-900 shadow-xl shadow-black/80">
                      <span className="text-xs font-mono font-bold text-indigo-300">0{project.id}</span>
                      <div className="absolute inset-0 -z-10 animate-ping rounded-full bg-indigo-500/20" />
                    </div>
                  </div>

                  {/* ستون متن و توضیحات */}
                  <motion.div
                    initial={{ opacity: 0, x: isEven ? 40 : -40 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true, margin: "-80px" }}
                    transition={{ duration: 0.6 }}
                    className="w-full lg:w-[46%]"
                  >
                    <div className="space-y-4 text-right">
                      <div className="flex items-center gap-2">
                        <span className="text-xs font-mono font-medium text-indigo-400 bg-indigo-950/60 border border-indigo-800/40 px-2.5 py-0.5 rounded-md">
                          {project.category}
                        </span>
                        <span className="text-xs font-mono text-gray-500">
                          {project.status}
                        </span>
                      </div>

                      <h2 className="text-2xl font-bold text-gray-100 md:text-3xl">
                        {project.title}
                      </h2>

                      <p className="text-sm leading-relaxed text-gray-400">
                        {project.description}
                      </p>

                      <div className="space-y-2 pt-2">
                        {project.highlights.map((highlight, idx) => (
                          <div key={idx} className="flex items-start gap-2 text-xs text-gray-300">
                            <CheckCircle2 className="w-4 h-4 text-indigo-400 shrink-0 mt-0.5" />
                            <span>{highlight}</span>
                          </div>
                        ))}
                      </div>

                      <div className="flex flex-wrap gap-2 pt-3">
                        {project.techStack.map((tech, idx) => (
                          <span
                            key={idx}
                            className="text-[11px] font-mono px-2.5 py-1 rounded bg-gray-900/90 border border-gray-800 text-gray-300 hover:border-gray-700 transition-colors"
                          >
                            {tech}
                          </span>
                        ))}
                      </div>
                    </div>
                  </motion.div>

                  {/* ستون کارت سیستم */}
                  <motion.div
                    initial={{ opacity: 0, x: isEven ? -40 : 40 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true, margin: "-80px" }}
                    transition={{ duration: 0.6 }}
                    className="w-full lg:w-[46%]"
                  >
                    <div className="relative rounded-2xl border border-gray-800 bg-gray-900/50 p-6 backdrop-blur-md shadow-2xl hover:border-gray-700 transition-colors">
                      <div className="flex items-center justify-between border-b border-gray-800/80 pb-3 mb-4">
                        <div className="flex items-center gap-1.5">
                          <div className="w-2.5 h-2.5 rounded-full bg-rose-500/80" />
                          <div className="w-2.5 h-2.5 rounded-full bg-amber-500/80" />
                          <div className="w-2.5 h-2.5 rounded-full bg-emerald-500/80" />
                        </div>
                        <div className="text-[11px] font-mono text-gray-500 flex items-center gap-1">
                          <Terminal className="w-3.5 h-3.5 text-indigo-400" />
                          <span>system://node.svc_0{project.id}</span>
                        </div>
                      </div>

                      <div className="space-y-3 font-mono text-xs">
                        <div className="p-3 rounded-lg bg-gray-950/70 border border-gray-800/60">
                          <div className="text-gray-500 text-[10px] mb-1">سطح دسترس‌پذیری و امنیت:</div>
                          <div className="text-emerald-400 flex items-center gap-1.5 font-sans">
                            <ShieldCheck className="w-3.5 h-3.5" />
                            <span>High Availability • Multi-layer Auth</span>
                          </div>
                        </div>

                        <div className="grid grid-cols-2 gap-2">
                          <div className="p-2.5 rounded-lg bg-gray-950/70 border border-gray-800/60">
                            <div className="text-gray-500 text-[10px] flex items-center gap-1 mb-1">
                              <Database className="w-3 h-3 text-indigo-400" />
                              <span>دیتابیس / کش</span>
                            </div>
                            <div className="text-gray-300 font-semibold text-[11px]">PostgreSQL + Redis</div>
                          </div>
                          <div className="p-2.5 rounded-lg bg-gray-950/70 border border-gray-800/60">
                            <div className="text-gray-500 text-[10px] flex items-center gap-1 mb-1">
                              <Workflow className="w-3 h-3 text-cyan-400" />
                              <span>جریان پیام‌ها</span>
                            </div>
                            <div className="text-indigo-300 font-semibold text-[11px]">Async Queues</div>
                          </div>
                        </div>

                        <div className="p-3 rounded-lg bg-gray-950/70 border border-gray-800/60 text-gray-400 text-[11px] leading-relaxed" dir="ltr">
                          <span className="text-indigo-400">$</span> runtime.optimize(--workers=8 --cache=redis)
                          <br />
                          <span className="text-emerald-500 font-bold">✓</span> status: operational [200 OK]
                        </div>
                      </div>
                    </div>
                  </motion.div>
                </div>
              );
            })}
          </div>
        </section>

        {/* بنر فراخوان نهایی */}
        <section className="relative px-6 pb-20">
          <div className="mx-auto max-w-5xl rounded-2xl border border-gray-800 bg-gradient-to-b from-gray-900/80 to-gray-950 p-8 md:p-12 text-center relative overflow-hidden shadow-2xl">
            <div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none" />
            <div className="relative z-10 max-w-2xl mx-auto space-y-4">
              <h3 className="text-2xl md:text-3xl font-bold text-white">
                آماده پیاده‌سازی و توسعه سیستم‌های پیچیده
              </h3>
              <p className="text-xs md:text-sm text-gray-400 leading-relaxed">
                اگر نیاز به مشاوره معماری نرم‌افزار، مقیاس‌پذیری سرویس‌ها یا پیاده‌سازی ماژول‌های اینترانت و سازمانی دارید، در ارتباط باشید.
              </p>
              <div className="pt-2">
                <a
                  href="mailto:contact@example.com"
                  className="inline-flex items-center gap-2 px-6 py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold shadow-lg shadow-indigo-600/30 transition-all hover:scale-105"
                >
                  <span>شروع همکاری فنی</span>
                  <ExternalLink className="w-3.5 h-3.5" />
                </a>
              </div>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  );
}