"use client";

import { motion } from "motion/react";
import { BentoGrid, BentoGridItem } from "@/components/magicui/bento-grid";
import { Calendar, MapPin, Briefcase } from "lucide-react";
import { usePortfolioData } from "@/lib/usePortfolioData";

export default function Experience() {
  const { data, loading, error } = usePortfolioData();

  if (loading) {
    return (
      <section id="experience" className="py-20 px-4">
        <div className="max-w-6xl mx-auto text-center">
          <div className="animate-pulse">
            <div className="h-8 bg-gray-700 rounded w-1/3 mx-auto mb-4"></div>
            <div className="h-4 bg-gray-700 rounded w-1/2 mx-auto"></div>
          </div>
        </div>
      </section>
    );
  }

  if (error || !data) {
    return (
      <section id="experience" className="py-20 px-4">
        <div className="max-w-6xl mx-auto text-center">
          <p className="text-red-400">Erro ao carregar dados de experiência.</p>
        </div>
      </section>
    );
  }

  const experiences = data.experiences.filter((exp) => exp.featured);

  return (
    <section
      id="experience"
      className="py-20 px-4 bg-gradient-to-b from-transparent to-black/20 mx-auto"
    >
      <div className="max-w-6xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            Experiência Profissional
          </h2>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
            Minha jornada profissional em desenvolvimento de software e soluções
            tecnológicas
          </p>
        </motion.div>

        <BentoGrid className="gap-6">
          {experiences.map((exp, index) => (
            <BentoGridItem
              key={exp.id}
              colSpan={index === 0 ? 2 : 1}
              className="group hover:scale-[1.02] transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/10"
            >
              <div className="space-y-4">
                {/* Header */}
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <h3 className="text-xl font-semibold text-white mb-1">
                      {exp.title}
                    </h3>
                    <p className="text-blue-400 font-medium">{exp.company}</p>
                    <div className="flex flex-wrap items-center gap-2 text-sm text-gray-400 mt-2">
                      <div className="flex items-center gap-1">
                        <Calendar className="w-4 h-4" />
                        {exp.period}
                      </div>
                      {exp.location && (
                        <div className="flex items-center gap-1">
                          <MapPin className="w-4 h-4" />
                          {exp.location}
                        </div>
                      )}
                      <div className="flex items-center gap-1">
                        <Briefcase className="w-4 h-4" />
                        {exp.type}
                      </div>
                    </div>
                  </div>
                </div>

                {/* Description */}
                <p className="text-gray-300 leading-relaxed">
                  {exp.description}
                </p>

                {/* Achievements */}
                {exp.achievements.length > 0 && (
                  <div>
                    <h4 className="text-sm font-semibold text-blue-400 mb-2">
                      Principais Conquistas:
                    </h4>
                    <ul className="space-y-1">
                      {exp.achievements.map((achievement, idx) => (
                        <li
                          key={idx}
                          className="text-sm text-gray-400 flex items-center gap-2"
                        >
                          <div className="w-1.5 h-1.5 bg-blue-400 rounded-full" />
                          {achievement}
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            </BentoGridItem>
          ))}
        </BentoGrid>
      </div>
    </section>
  );
}