"use client"

import { useScrollAnimation } from "@/hooks/use-scroll-animation"
import { useLanguage } from "@/context/language-context"
import { useState } from "react"
import { ChevronDown } from "lucide-react"
import Image from "next/image"

export default function Experience() {
  const { ref, isVisible } = useScrollAnimation()
  const { t } = useLanguage()
  const [expandedIndex, setExpandedIndex] = useState<number | null>(null)

  const experiences = [
    {
      company: "exp_telkom_company",
      image: "/telkom.png",
      location: "exp_telkom_location",
      position: "exp_telkom_position",
      period: "exp_telkom_period",
      description: "exp_telkom_description",
      details: [
        "exp_telkom_detail_1",
        "exp_telkom_detail_2",
        "exp_telkom_detail_3",
        "exp_telkom_detail_4",
        "exp_telkom_detail_5",
        "exp_telkom_detail_6",
      ],
    },
    {
      company: "exp_rsu_company",
      image: "/rsucakra.png",
      location: "exp_rsu_location",
      position: "exp_rsu_position",
      period: "exp_rsu_period",
      description: "exp_rsu_description",
      details: ["exp_rsu_detail_1", "exp_rsu_detail_2", "exp_rsu_detail_3", "exp_rsu_detail_4", "exp_rsu_detail_5"],
    },
    {
      company: "exp_hayya_company",
      image: "/HS.jpg",
      location: "exp_hayya_location",
      position: "exp_hayya_position",
      period: "exp_hayya_period",
      description: "exp_hayya_description",
      details: [
        "exp_hayya_detail_1",
        "exp_hayya_detail_2",
        "exp_hayya_detail_3",
        "exp_hayya_detail_4",
        "exp_hayya_detail_5",
      ],
    },
    {
      company: "exp_inhutani_company",
      image: "/logo2.png",
      location: "exp_inhutani_location",
      position: "exp_inhutani_position",
      period: "exp_inhutani_period",
      description: "exp_inhutani_description",
      details: [
        "exp_inhutani_detail_1",
        "exp_inhutani_detail_2",
        "exp_inhutani_detail_3",
        "exp_inhutani_detail_4",
        "exp_inhutani_detail_5",
      ],
    },
    {
      company: "exp_ecom_company",
      image: "🌐",
      location: "exp_ecom_location",
      position: "exp_ecom_position",
      period: "exp_ecom_period",
      description: "exp_ecom_description",
      details: [
        "exp_ecom_detail_1",
        "exp_ecom_detail_2",
        "exp_ecom_detail_3",
        "exp_ecom_detail_4",
        "exp_ecom_detail_5",
      ],
    },
  ]

  const toggleExpand = (index: number) => {
    setExpandedIndex(expandedIndex === index ? null : index)
  }

  return (
    <section id="experience" className="py-20 px-4 sm:px-6 lg:px-8">
      <div className="max-w-4xl mx-auto" ref={ref}>
        <h2
          className={`text-4xl font-bold mb-12 text-center transition-all duration-700 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          {t("experience_title")}
        </h2>

        <div className="space-y-8">
          {experiences.map((exp, index) => (
            <div
              key={index}
              className={`relative pl-8 pb-8 border-l-2 border-primary last:pb-0 transition-all duration-700 ${
                isVisible ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-10"
              }`}
              style={{
                transitionDelay: isVisible ? `${index * 100}ms` : "0ms",
              }}
            >
              <div className="absolute -left-4 top-0 w-6 h-6 bg-primary rounded-full border-4 border-background hover:scale-125 transition-transform duration-300" />

              <div className="bg-card p-6 rounded-lg hover:shadow-lg transition-all duration-300 border border-border hover:border-primary">
                <div className="flex items-start gap-4 mb-4">
                  <div className="w-12 h-12 flex-shrink-0 flex items-center justify-center">
                    {exp.image === "🌐" ? (
                      <span className="text-3xl">{exp.image}</span>
                    ) : (
                      <Image
                        src={exp.image || "/placeholder.svg"}
                        alt={t(exp.company)}
                        width={48}
                        height={48}
                        className="w-12 h-12 object-contain rounded"
                      />
                    )}
                  </div>
                  <div className="flex-1">
                    <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-2">
                      <div>
                        <h3 className="text-xl font-bold">{t(exp.position)}</h3>
                        <p className="text-primary font-semibold">{t(exp.company)}</p>
                      </div>
                      <span className="text-sm text-muted-foreground mt-2 sm:mt-0">{t(exp.period)}</span>
                    </div>
                    <p className="text-sm text-muted-foreground mb-3">{t(exp.location)}</p>
                  </div>
                </div>

                <p className="text-muted-foreground leading-relaxed mb-4">{t(exp.description)}</p>

                <button
                  onClick={() => toggleExpand(index)}
                  className="flex items-center gap-2 text-primary font-semibold hover:opacity-80 transition-opacity duration-200 group"
                >
                  <span>{expandedIndex === index ? t("show_less") : t("show_more")}</span>
                  <ChevronDown
                    size={18}
                    className={`transition-transform duration-300 ${expandedIndex === index ? "rotate-180" : ""}`}
                  />
                </button>

                <div
                  className={`overflow-hidden transition-all duration-300 ease-in-out ${
                    expandedIndex === index ? "max-h-96 mt-4" : "max-h-0"
                  }`}
                >
                  <div className="pt-4 border-t border-border">
                    <p className="text-sm font-semibold text-primary mb-3">{t("key_achievements")}</p>
                    <ul className="space-y-2">
                      {exp.details.map((detail, detailIndex) => (
                        <li
                          key={detailIndex}
                          className="text-sm text-muted-foreground flex items-start gap-2 animate-fade-in"
                          style={{
                            animationDelay: `${detailIndex * 50}ms`,
                          }}
                        >
                          <span className="text-primary mt-1">•</span>
                          <span>{t(detail)}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}