"use client";

import { useMemo } from "react";
import { usePortfolioData } from "@/lib/usePortfolioData";
import { Section } from "./Section";
import { Reveal } from "./Reveal";

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

  const sortedExperiences = useMemo(() => {
    if (!data?.experiences) return [];
    return [...data.experiences]
      .filter((exp) => exp.featured)
      .sort((a, b) => {
        const yearA = parseInt(a.period.match(/\d{4}/)?.[0] || "0", 10);
        const yearB = parseInt(b.period.match(/\d{4}/)?.[0] || "0", 10);
        return yearB - yearA;
      });
  }, [data]);

  if (loading) return <div className="ds-loading">Loading system logs</div>;
  if (error || !data)
    return <div className="ds-error">Error loading system logs</div>;

  return (
    <Section
      id="experience"
      eyebrow="SYSTEM_LOGS.history"
      title="Trajetória focada em produto, legado e crescimento sustentável"
      description="Experiências recentes onde combinei entrega rápida com responsabilidade arquitetural."
      disableChildrenAnimation
    >
      <div className="space-y-sp-6">
        {sortedExperiences.map((exp, index) => (
          <Reveal key={exp.id} y={50} duration={0.8} delay={0.1 * index}>
            <article className="ds-card">
              <div className="ds-grid-2">
                <div>
                  <div className="ds-kicker">{exp.period}</div>
                  <h3 className="ds-card-title">{exp.title}</h3>
                  <div className="mt-sp-3 text-[11px] uppercase tracking-[0.1em] text-meta">
                    {exp.company} · {exp.type}
                  </div>
                </div>
                <div className="flex flex-wrap items-start justify-start gap-sp-3 lg:justify-end">
                  <span className="ds-tag">{exp.location}</span>
                  <span className="ds-tag">
                    {exp.technologies.length} tecnologias
                  </span>
                </div>
              </div>
              <p className="ds-copy">{exp.description}</p>
              <ul className="ds-list">
                {exp.achievements?.map((achievement) => (
                  <li key={achievement}>{achievement}</li>
                ))}
              </ul>
              <ul className="ds-tags mt-sp-6">
                {exp.technologies?.map((tech) => (
                  <li key={tech} className="ds-tag">
                    {tech}
                  </li>
                ))}
              </ul>
            </article>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}