"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { ChevronLeft, ChevronRight } from "lucide-react"
import Navigation from "@/components/navigation"
import Footer from "@/components/footer"
import { useLanguage } from "@/context/language-context"
import { useScrollAnimation } from "@/hooks/use-scroll-animation"

// Project data with detailed information
const projectsData = [
  {
    id: 1,
    title: "Hospital Information System (SIMRS)",
    description:
      "Comprehensive hospital management system with patient registration, medical records, and BPJS integration.",
    fullDescription:
      "A full-featured hospital management system designed to streamline patient care and administrative operations. Features include patient registration, medical records management, appointment scheduling, billing integration with BPJS insurance, and comprehensive reporting dashboards.",
    tags: ["XOCP", "PHP", "MySQL", "API", "JavaScript", "JQuery"],
    image: "/simrs.jpg",
    images: ["/simrs.jpg", "/hospital-dashboard.jpg", "/patient-records-system.jpg"],
    technologies: ["XOCP Framework", "PHP 7+", "MySQL 5.7", "RESTful API", "JavaScript ES6", "JQuery"],
    duration: "12 months",
    status: "Completed",
    features: [
      "Patient registration and management",
      "Medical records digitization",
      "Appointment scheduling system",
      "BPJS insurance integration",
      "Billing and payment processing",
      "Real-time reporting dashboard",
    ],
  },
  {
    id: 2,
    title: "Employee Attendance System",
    description: "REST API-based attendance tracking system with real-time reporting and analytics dashboard.",
    fullDescription:
      "A modern attendance tracking system built with REST API architecture. Employees can check in/out seamlessly, and administrators can view real-time attendance analytics with comprehensive reporting features.",
    tags: ["XOCP", "REST API", "MySQL", "Dashboard", "JavaScript", "JQuery"],
    image: "/employee-attendance-tracking-system.jpg",
    images: ["/employee-attendance-tracking-system.jpg", "/attendance-dashboard.jpg", "/employee-tracking.jpg"],
    technologies: ["XOCP Framework", "REST API", "MySQL", "JavaScript", "JQuery", "Chart.js"],
    duration: "6 months",
    status: "Completed",
    features: [
      "Real-time check-in/check-out",
      "Attendance analytics dashboard",
      "Monthly and yearly reports",
      "Automated notifications",
      "Mobile-responsive interface",
      "Export to PDF/Excel",
    ],
  },
  {
    id: 3,
    title: "Human Resource Management System",
    description: "Complete HR solution for employee data management, payroll processing, and document reporting.",
    fullDescription:
      "An enterprise HR management system designed to handle all aspects of human resources including employee profiles, payroll management, performance tracking, and compliance reporting.",
    tags: ["Laravel", "PHP", "MySQL", "Dashboard"],
    image: "/ASI.png",
    images: ["/ASI.png", "/hr-dashboard.png", "/payroll-system.jpg"],
    technologies: ["Laravel Framework", "PHP 8", "MySQL 8", "Blade Templating", "Eloquent ORM"],
    duration: "10 months",
    status: "Completed",
    features: [
      "Employee database management",
      "Payroll processing system",
      "Performance appraisals",
      "Leave management",
      "Training tracking",
      "Compliance reporting",
    ],
  },
  {
    id: 4,
    title: "E-Commerce Platform",
    description: "Full-featured international e-commerce platform with payment integration and order management.",
    fullDescription:
      "A comprehensive e-commerce solution supporting multiple currencies, languages, and payment methods. Includes inventory management, order processing, customer analytics, and vendor dashboard.",
    tags: ["Laravel", "PHP", "JavaScript", "Stripe", "E-Commerce", "Dashboard", "Livewire", "MySQL"],
    image: "/e-commers.png",
    images: ["/e-commers.png", "/ecommerce-product-catalog.jpg", "/shopping-cart-checkout.jpg"],
    technologies: ["Laravel", "Livewire", "Tailwind CSS", "Stripe API", "MySQL", "Redis"],
    duration: "14 months",
    status: "Active",
    features: [
      "Multi-vendor support",
      "Product catalog management",
      "Stripe payment integration",
      "Shopping cart and checkout",
      "Order tracking",
      "Customer reviews and ratings",
    ],
  },
  {
    id: 5,
    title: "Digital Archive Management System",
    description: "Document management system for organizing and tracking company documents with access control.",
    fullDescription:
      "A secure document management system for enterprises to organize, store, and manage digital documents with version control and access permission management.",
    tags: ["Laravel", "PHP", "MySQL", "Document Management"],
    image: "/SIRAMA.png",
    images: ["/SIRAMA.png", "/document-management-interface.jpg", "/file-organization-system.png"],
    technologies: ["Laravel", "PHP", "MySQL", "File Storage API", "PDF Processing"],
    duration: "8 months",
    status: "Completed",
    features: [
      "Document upload and storage",
      "Version control",
      "Access permissions",
      "Search and filtering",
      "Audit logging",
      "Backup management",
    ],
  },
  {
    id: 6,
    title: "Gama LC Try Out Platform",
    description:
      "Online exam platform for students with real-time timers, admin dashboard, and automated result reporting.",
    fullDescription:
      "An online examination platform designed for educational institutions. Students can take exams with real-time timers, and administrators can manage questions, monitor progress, and generate instant reports.",
    tags: ["CodeIgniter", "PHP", "JavaScript", "MySQL", "Education"],
    image: "/tryout.png",
    images: ["/tryout.png", "/exam-interface.jpg", "/test-results-dashboard.jpg"],
    technologies: ["CodeIgniter", "PHP", "MySQL", "JavaScript", "Bootstrap"],
    duration: "9 months",
    status: "Active",
    features: [
      "Question bank management",
      "Timed examinations",
      "Instant result calculation",
      "Score analytics",
      "Student performance reports",
      "Admin dashboard",
    ],
  },
  {
    id: 7,
    title: "Customer Relationship Management (CRM)",
    description: "Advanced CRM system for managing customer interactions, sales pipelines, and marketing campaigns.",
    fullDescription:
      "A powerful CRM platform designed to help businesses manage customer relationships, track sales opportunities, and execute marketing campaigns with detailed analytics.",
    tags: ["Laravel", "React", "PostgreSQL", "REST API"],
    image: "/crm-dashboard-interface.jpg",
    images: ["/crm-dashboard-interface.jpg", "/sales-pipeline-management.png", "/customer-analytics-dashboard.png"],
    technologies: ["Laravel", "React", "PostgreSQL", "GraphQL", "AWS"],
    duration: "11 months",
    status: "Active",
    features: [
      "Lead management",
      "Sales pipeline tracking",
      "Customer database",
      "Email integration",
      "Task automation",
      "Performance analytics",
    ],
  },
  {
    id: 8,
    title: "Real Estate Management Portal",
    description: "Comprehensive property management system with listing management and tenant tracking.",
    fullDescription:
      "A complete real estate management solution for managing properties, listings, tenant information, maintenance requests, and financial records.",
    tags: ["Laravel", "Vue.js", "MySQL", "Maps API"],
    image: "/real-estate-property-listings.jpg",
    images: [
      "/real-estate-property-listings.jpg",
      "/property-management-dashboard.png",
      "/tenant-management-system.jpg",
    ],
    technologies: ["Laravel", "Vue.js", "MySQL", "Google Maps API", "Stripe"],
    duration: "10 months",
    status: "Completed",
    features: [
      "Property listing management",
      "Tenant database",
      "Maintenance request tracking",
      "Financial reporting",
      "Map integration",
      "Document management",
    ],
  },
  {
    id: 9,
    title: "Learning Management System (LMS)",
    description: "Educational platform with course management, student progress tracking, and certification system.",
    fullDescription:
      "A comprehensive learning management system for educational institutions offering online courses, student progress tracking, assessments, and digital certifications.",
    tags: ["Next.js", "React", "Node.js", "MongoDB"],
    image: "/online-learning-platform.png",
    images: ["/online-learning-platform.png", "/course-management-system.jpg", "/student-dashboard.png"],
    technologies: ["Next.js", "React", "Node.js", "MongoDB", "Socket.io"],
    duration: "12 months",
    status: "Active",
    features: [
      "Course creation and management",
      "Student enrollment",
      "Progress tracking",
      "Quizzes and assessments",
      "Certificate generation",
      "Live class support",
    ],
  },
  {
    id: 10,
    title: "Inventory Management System",
    description: "Smart inventory tracking with automated reordering, stock alerts, and supplier management.",
    fullDescription:
      "An intelligent inventory management system with real-time stock tracking, automated reordering, supplier management, and predictive analytics for optimal stock levels.",
    tags: ["Laravel", "PHP", "MySQL", "Inventory"],
    image: "/inventory-warehouse-management.jpg",
    images: ["/inventory-warehouse-management.jpg", "/stock-tracking-system.jpg", "/inventory-analytics-dashboard.png"],
    technologies: ["Laravel", "PHP", "MySQL", "Barcode scanning", "Excel export"],
    duration: "7 months",
    status: "Completed",
    features: [
      "Real-time stock tracking",
      "Automated reordering",
      "Supplier management",
      "Barcode scanning",
      "Stock alerts",
      "Analytics dashboard",
    ],
  },
  {
    id: 11,
    title: "Project Management Dashboard",
    description: "Collaborative project management tool with task tracking, team communication, and resource planning.",
    fullDescription:
      "A comprehensive project management platform enabling teams to collaborate effectively with task management, progress tracking, team communication, and resource allocation.",
    tags: ["React", "Node.js", "MongoDB", "Socket.io"],
    image: "/project-management-interface.png",
    images: ["/project-management-interface.png", "/task-management-kanban.png", "/team-collaboration-workspace.png"],
    technologies: ["React", "Node.js", "MongoDB", "Socket.io", "Tailwind CSS"],
    duration: "8 months",
    status: "Active",
    features: ["Task management", "Kanban boards", "Team chat", "File sharing", "Time tracking", "Progress reporting"],
  },
  {
    id: 12,
    title: "Financial Analytics Platform",
    description: "Advanced financial tracking with budget planning, expense analysis, and revenue forecasting.",
    fullDescription:
      "A sophisticated financial management platform for businesses to track expenses, manage budgets, analyze spending patterns, and forecast future financial trends.",
    tags: ["React", "TypeScript", "Firebase", "Charts"],
    image: "/financial-analytics-dashboard.png",
    images: ["/financial-analytics-dashboard.png", "/expense-tracking-system.jpg", "/budget-planning-interface.png"],
    technologies: ["React", "TypeScript", "Firebase", "Recharts", "Stripe API"],
    duration: "9 months",
    status: "Active",
    features: [
      "Expense tracking",
      "Budget planning",
      "Revenue analysis",
      "Financial reports",
      "Forecast modeling",
      "Transaction categorization",
    ],
  },
]

export default function ProjectDetail({ params }: { params: { id: string } }) {
  const { t } = useLanguage()
  const projectId = Number.parseInt(params.id)
  const project = projectsData.find((p) => p.id === projectId)
  const [currentImageIndex, setCurrentImageIndex] = useState(0)
  const [isDark, setIsDark] = useState(false)
  const { ref, isVisible } = useScrollAnimation()

  useEffect(() => {
    const isDarkMode = localStorage.getItem("darkMode") === "true"
    setIsDark(isDarkMode)
    if (isDarkMode) {
      document.documentElement.classList.add("dark")
    }
  }, [])

  const toggleDarkMode = () => {
    const newDarkMode = !isDark
    setIsDark(newDarkMode)
    localStorage.setItem("darkMode", String(newDarkMode))
    if (newDarkMode) {
      document.documentElement.classList.add("dark")
    } else {
      document.documentElement.classList.remove("dark")
    }
  }

  if (!project) {
    return (
      <div className="bg-background text-foreground min-h-screen flex items-center justify-center">
        <Navigation isDark={isDark} toggleDarkMode={toggleDarkMode} />
        <div className="text-center">
          <h1 className="text-4xl font-bold mb-4">{t("project_not_found")}</h1>
          <Link href="/#projects" className="text-primary hover:underline">
            {t("back_to_projects")}
          </Link>
        </div>
      </div>
    )
  }

  const nextImage = () => {
    setCurrentImageIndex((prev) => (prev + 1) % project.images.length)
  }

  const prevImage = () => {
    setCurrentImageIndex((prev) => (prev - 1 + project.images.length) % project.images.length)
  }

  const getFeatureTranslation = (index: number) => {
    return t(`proj_${projectId}_feature_${index + 1}`)
  }

  return (
    <div className="bg-background text-foreground min-h-screen">
      <Navigation isDark={isDark} toggleDarkMode={toggleDarkMode} />

      <main className="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto" ref={ref}>
          {/* Back Button */}
          <Link
            href="/#projects"
            className="inline-flex items-center gap-2 text-primary hover:text-primary/80 mb-8 transition-colors"
          >
            <ChevronLeft className="w-5 h-5" />
            {t("back_to_projects")}
          </Link>

          <div className="mb-12 rounded-lg overflow-hidden border border-border">
            <div className="relative bg-muted h-96 flex items-center justify-center overflow-hidden group">
              <img
                src={project.images[currentImageIndex] || "/placeholder.svg"}
                alt={`${project.title} - Image ${currentImageIndex + 1}`}
                className="w-full h-full object-cover"
              />

              {project.images.length > 1 && (
                <>
                  <button
                    onClick={prevImage}
                    className="absolute left-4 top-1/2 -translate-y-1/2 bg-black/40 hover:bg-black/60 text-white p-2 rounded-full transition-all opacity-0 group-hover:opacity-100"
                  >
                    <ChevronLeft className="w-6 h-6" />
                  </button>
                  <button
                    onClick={nextImage}
                    className="absolute right-4 top-1/2 -translate-y-1/2 bg-black/40 hover:bg-black/60 text-white p-2 rounded-full transition-all opacity-0 group-hover:opacity-100"
                  >
                    <ChevronRight className="w-6 h-6" />
                  </button>

                  <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 bg-black/40 px-4 py-2 rounded-full">
                    {project.images.map((_, index) => (
                      <button
                        key={index}
                        onClick={() => setCurrentImageIndex(index)}
                        className={`w-2 h-2 rounded-full transition-all ${
                          index === currentImageIndex ? "bg-white w-6" : "bg-white/50"
                        }`}
                      />
                    ))}
                  </div>
                </>
              )}
            </div>

            {/* Thumbnail Gallery */}
            <div className="p-4 bg-card border-t border-border flex gap-2 overflow-x-auto">
              {project.images.map((image, index) => (
                <button
                  key={index}
                  onClick={() => setCurrentImageIndex(index)}
                  className={`relative w-20 h-20 rounded flex-shrink-0 overflow-hidden border-2 transition-all ${
                    index === currentImageIndex ? "border-primary" : "border-border"
                  }`}
                >
                  <img
                    src={image || "/placeholder.svg"}
                    alt={`Thumbnail ${index + 1}`}
                    className="w-full h-full object-cover"
                  />
                </button>
              ))}
            </div>
          </div>

          {/* Project Header */}
          <div
            className={`mb-8 transition-all duration-700 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
            }`}
          >
            <h1 className="text-4xl font-bold mb-4">{t(`proj_${projectId}_title`)}</h1>
            <p className="text-lg text-muted-foreground mb-6">{t(`proj_${projectId}_full_desc`)}</p>

            <div className="flex flex-wrap gap-3 mb-6">
              <span
                className={`px-4 py-2 rounded-full text-sm font-medium ${
                  project.status === "Active"
                    ? "bg-green-500/10 text-green-600 dark:text-green-400"
                    : "bg-blue-500/10 text-blue-600 dark:text-blue-400"
                }`}
              >
                {t(project.status.toLowerCase())}
              </span>
              <span className="px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-medium">
                {project.duration}
              </span>
            </div>
          </div>

          {/* Features Section */}
          <div className="mb-12 grid md:grid-cols-2 gap-8">
            <div>
              <h2 className="text-2xl font-bold mb-4">{t("key_features")}</h2>
              <ul className="space-y-3">
                {project.features.map((_, index) => (
                  <li key={index} className="flex items-start gap-3">
                    <span className="text-primary font-bold mt-1">✓</span>
                    <span className="text-muted-foreground">{getFeatureTranslation(index)}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <h2 className="text-2xl font-bold mb-4">{t("technologies_used")}</h2>
              <div className="flex flex-wrap gap-2">
                {project.technologies.map((tech, index) => (
                  <span
                    key={index}
                    className="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full font-medium hover:bg-primary hover:text-primary-foreground transition-all"
                  >
                    {tech}
                  </span>
                ))}
              </div>
            </div>
          </div>

          {/* All Tags */}
          <div className="mb-8">
            <h2 className="text-xl font-bold mb-4">{t("project_tags")}</h2>
            <div className="flex flex-wrap gap-2">
              {project.tags.map((tag, index) => (
                <span
                  key={index}
                  className="px-3 py-1 bg-accent/10 text-accent text-xs rounded-full font-medium hover:bg-accent hover:text-accent-foreground transition-all"
                >
                  {tag}
                </span>
              ))}
            </div>
          </div>

          {/* Related Projects Navigation */}
          <div className="border-t border-border pt-8 mt-12 flex gap-4 justify-between">
            {projectId > 1 ? (
              <Link
                href={`/projects/${projectId - 1}`}
                className="flex items-center gap-2 px-4 py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary hover:text-primary-foreground transition-all"
              >
                <ChevronLeft className="w-5 h-5" />
                {t("previous_project")}
              </Link>
            ) : (
              <div />
            )}

            {projectId < 12 ? (
              <Link
                href={`/projects/${projectId + 1}`}
                className="flex items-center gap-2 px-4 py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary hover:text-primary-foreground transition-all"
              >
                {t("next_project")}
                <ChevronRight className="w-5 h-5" />
              </Link>
            ) : null}
          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}