"use client";

interface Skill {
  id: number;
  name: string;
  category: string | null;
  proficiency: number | null;
  sortOrder: number | null;
}

interface Experience {
  id: number;
  company: string;
  role: string;
  description: string | null;
  startDate: string;
  endDate: string | null;
  current: boolean | null;
  sortOrder: number | null;
}

export default function AboutSection({
  skills,
  experiences,
}: {
  skills: Skill[];
  experiences: Experience[];
}) {
  const skillCategories = skills.reduce<Record<string, Skill[]>>((acc, skill) => {
    const cat = skill.category || "Other";
    if (!acc[cat]) acc[cat] = [];
    acc[cat].push(skill);
    return acc;
  }, {});

  return (
    <section id="about" className="py-24 relative overflow-hidden">
      {/* Background */}
      <div className="absolute inset-0 hero-gradient opacity-50" />

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-16">
          <span className="inline-block px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-accent bg-accent/10 rounded-full mb-4">
            About Me
          </span>
          <h2 className="text-4xl sm:text-5xl font-bold text-text-primary mb-4">
            Crafting Digital{" "}
            <span className="gradient-text">Excellence</span>
          </h2>
          <p className="text-text-muted max-w-2xl mx-auto text-lg">
            A passionate software developer with 8+ years of experience building
            solutions that matter
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-16">
          {/* Left: Bio + Skills */}
          <div>
            <div className="glass rounded-2xl p-8 mb-8">
              <h3 className="text-xl font-bold text-text-primary mb-4">
                Who I Am
              </h3>
              <div className="space-y-4 text-text-secondary leading-relaxed">
                <p>
                  I&apos;m <strong className="text-text-primary">Samuel Adesanya</strong>, a Senior Software Developer specializing in
                  backend engineering, AI integration, and automation systems. With over
                  8 years of hands-on experience, I&apos;ve built solutions across FinTech,
                  EdTech, Social Media, and VTU platforms.
                </p>
                <p>
                  My expertise spans PHP/Laravel, API development, AI systems, and
                  workflow automation with n8n. I&apos;m passionate about creating scalable,
                  secure, and elegant solutions that drive real business value.
                </p>
                <p>
                  Currently focused on{" "}
                  <span className="text-accent">Backend Engineering</span>,{" "}
                  <span className="text-accent">AI Systems</span>,{" "}
                  <span className="text-accent">Web3 Platforms</span>, and{" "}
                  <span className="text-accent">Automation</span>.
                </p>
              </div>
            </div>

            {/* Skills */}
            <div className="glass rounded-2xl p-8">
              <h3 className="text-xl font-bold text-text-primary mb-6">
                Technical Skills
              </h3>
              <div className="space-y-6">
                {Object.entries(skillCategories).map(([category, catSkills]) => (
                  <div key={category}>
                    <h4 className="text-sm font-semibold text-text-muted uppercase tracking-wider mb-3">
                      {category}
                    </h4>
                    <div className="space-y-3">
                      {catSkills.map((skill) => (
                        <div key={skill.id}>
                          <div className="flex justify-between items-center mb-1.5">
                            <span className="text-sm font-medium text-text-secondary">
                              {skill.name}
                            </span>
                            <span className="text-xs text-text-muted">
                              {skill.proficiency}%
                            </span>
                          </div>
                          <div className="h-1.5 bg-surface-elevated rounded-full overflow-hidden">
                            <div
                              className="h-full rounded-full bg-gradient-to-r from-primary to-accent skill-bar"
                              style={{ width: `${skill.proficiency}%` }}
                            />
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Right: Timeline */}
          <div>
            <h3 className="text-xl font-bold text-text-primary mb-8">
              Experience Timeline
            </h3>
            <div className="relative">
              {/* Vertical line */}
              <div className="absolute left-5 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary via-accent to-transparent" />

              <div className="space-y-8">
                {experiences.map((exp, i) => (
                  <div key={exp.id} className="relative pl-14 group">
                    {/* Dot */}
                    <div
                      className={`absolute left-3.5 top-1 w-3 h-3 rounded-full border-2 transition-all ${
                        exp.current
                          ? "bg-accent border-accent shadow-lg shadow-accent/30"
                          : "bg-surface border-primary group-hover:bg-primary"
                      }`}
                    />

                    {/* Card */}
                    <div className="glass rounded-xl p-6 card-hover">
                      <div className="flex items-start justify-between mb-2">
                        <div>
                          <h4 className="font-bold text-text-primary">
                            {exp.role}
                          </h4>
                          <p className="text-primary font-medium text-sm">
                            {exp.company}
                          </p>
                        </div>
                        {exp.current && (
                          <span className="px-2.5 py-0.5 text-xs font-semibold bg-accent/10 text-accent rounded-full">
                            Current
                          </span>
                        )}
                      </div>
                      <p className="text-sm text-text-muted mb-3">
                        {exp.startDate} — {exp.endDate || "Present"}
                      </p>
                      {exp.description && (
                        <p className="text-sm text-text-secondary leading-relaxed">
                          {exp.description}
                        </p>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Companies */}
            <div className="mt-12 glass rounded-2xl p-8">
              <h3 className="text-xl font-bold text-text-primary mb-6">
                Companies & Clients
              </h3>
              <div className="grid grid-cols-2 gap-4">
                {[
                  "Leaders Network",
                  "Naija Flames Tech Services",
                  "FinTech Startups",
                  "EdTech Platforms",
                  "VTU Businesses",
                  "International Clients",
                ].map((company) => (
                  <div
                    key={company}
                    className="px-4 py-3 rounded-xl bg-surface-elevated border border-border text-sm text-text-secondary text-center hover:border-primary/30 hover:text-text-primary transition-all"
                  >
                    {company}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}