import { motion } from "framer-motion";
import { Building2, Landmark } from "lucide-react";

type Station = {
  period: string;
  role: string;
  client: string;
  type: "behoerde" | "konzern";
  tasks: string[];
};

const stations: Station[] = [
  {
    period: "06/2025 – heute",
    role: "DevOps Engineer",
    client: "ITZBund – Informationstechnikzentrum Bund",
    type: "behoerde",
    tasks: [
      "DevOps-Betrieb in einer zentralen Bundesbehörde für IT-Dienstleistungen",
      "Container-Betrieb mit Docker & Ansible-gestützter Automatisierung",
      "CI/CD-Pipelines mit GitLab in sicherheitskritischer Umgebung",
      "Betriebsdokumentation & ITIL-konforme Prozesse",
    ],
  },
  {
    period: "01/2024 – heute",
    role: "Senior IT-Consultant",
    client: "Landesamt für Statistik Bayern, München",
    type: "behoerde",
    tasks: [
      "Installation, Konfiguration & 3rd-Level-Support von Apache, Tomcat, JBoss",
      "Einführung und Betrieb von Docker, Ansible und Artifactory",
      "Konzeption und Aufbau JMX-Monitoring mit Grafana",
      "Erstellung ITIL-konformer Betriebshandbücher & Betriebsführungskonzepte",
      "Migration von Java-Anwendungen via Artifactory & Bitbucket",
    ],
  },
  {
    period: "04/2024 – 12/2024",
    role: "Technischer Redakteur",
    client: "Polizei Hessen",
    type: "behoerde",
    tasks: [
      "Betriebsführungskonzepte nach ITIL & BSI-Grundschutz für kritische Anwendungen",
      "Betriebshandbücher für behördenkritische Systeme",
      "Architekturdiagramme & Prozessvisualisierungen mit draw.io",
      "Qualitätssicherungsmaßnahmen und Confluence/Jira-Betrieb",
    ],
  },
  {
    period: "04/2023 – 10/2023",
    role: "Projektkoordinator",
    client: "Amt des öffentlichen Rechts, Justiz Baden-Württemberg",
    type: "behoerde",
    tasks: [
      "Betrieb und Support der eAkte-Infrastruktur der Justiz",
      "Einführung von Confluence & Jira als Workflow-Tool",
      "Dokumentation von Prozessabläufen & Changemanagement",
      "Übergreifende Koordination mit IuK, Datenbanken & virtuellen Servern",
    ],
  },
  {
    period: "10/2020 – 04/2023",
    role: "Senior IT-Systems Engineer",
    client: "Amt des öffentlichen Rechts, Hamburg",
    type: "behoerde",
    tasks: [
      "Linux / S390 / Docker-Betrieb von Video- & Messaging-Anwendungen",
      "Deployment via Ansible & Gitlab CI/CD",
      "Bundesweite Betriebshandbücher & Qualitätssicherung",
      "Fachliche Unterstützung für Behörden, Justiz, Bundeswehr & Kanzleramt",
    ],
  },
  {
    period: "01/2015 – 06/2020",
    role: "Senior IT-Consultant",
    client: "Großkonzern Finanzdienstleistung, München (EZB-geprüft)",
    type: "konzern",
    tasks: [
      "Apache, Tomcat, JBoss auf AIX / Solaris / Docker — 3rd-Level-Support",
      "Clustering-Betrieb für Webserver & J2EE-Anwendungen",
      "Betriebsrichtlinien für Webserver (EZB-Compliance-Prüfung)",
      "Migration von Java-Anwendungen via Harvest & Gitlab",
    ],
  },
];

const typeConfig = {
  behoerde: {
    label: "Behörde",
    icon: Landmark,
    badge: "bg-blue-50 text-blue-700 border-blue-200",
    dot: "bg-blue-500",
    line: "border-blue-200",
  },
  konzern: {
    label: "Konzern",
    icon: Building2,
    badge: "bg-violet-50 text-violet-700 border-violet-200",
    dot: "bg-violet-500",
    line: "border-violet-200",
  },
};

export function Experience() {
  return (
    <div className="py-24">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: "-80px" }}
        transition={{ duration: 0.6 }}
      >
        <div className="text-center max-w-2xl mx-auto mb-16">
          <p className="section-number mb-3" data-testid="text-section-label-experience">
            Berufserfahrung
          </p>
          <h2
            className="text-3xl md:text-4xl font-bold text-foreground mb-4"
            data-testid="text-section-title-experience"
          >
            Projekte in Behörden & Konzernen
          </h2>
          <p className="text-muted-foreground text-lg">
            Über 25 Jahre in produktionskritischen Umgebungen — von Bundesbehörden über Landesämter bis zum EZB-geprüften Finanzkonzern.
          </p>
        </div>

        <div className="flex gap-4 justify-center mb-10">
          {(["behoerde", "konzern"] as const).map((type) => {
            const cfg = typeConfig[type];
            return (
              <span
                key={type}
                className={`inline-flex items-center gap-1.5 px-3 py-1 text-xs font-semibold rounded-full border ${cfg.badge}`}
              >
                <span className={`w-2 h-2 rounded-full ${cfg.dot}`} />
                {cfg.label}
              </span>
            );
          })}
        </div>

        <div className="relative max-w-3xl mx-auto">
          <div className="absolute left-5 top-0 bottom-0 w-px bg-border md:left-1/2" />

          {stations.map((station, index) => {
            const cfg = typeConfig[station.type];
            const Icon = cfg.icon;
            const isLeft = index % 2 === 0;

            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-60px" }}
                transition={{ duration: 0.5, delay: index * 0.08 }}
                className={`relative flex gap-6 mb-8 md:mb-12 ${
                  isLeft ? "md:flex-row" : "md:flex-row-reverse"
                }`}
                data-testid={`card-experience-${index}`}
              >
                <div className="absolute left-5 -translate-x-1/2 md:left-1/2 z-10">
                  <div
                    className={`w-4 h-4 rounded-full border-2 border-white shadow-sm ${cfg.dot}`}
                  />
                </div>

                <div className={`pl-11 md:pl-0 w-full md:w-[calc(50%-2rem)] ${isLeft ? "md:pr-8 md:text-right" : "md:pl-8"}`}>
                  <div className="p-3.5 sm:p-5 rounded-2xl bg-white border border-border card-hover">
                    <div className={`flex items-start gap-2 mb-3 ${isLeft ? "md:flex-row-reverse" : ""}`}>
                      <div className={`w-7 h-7 rounded-lg border flex items-center justify-center shrink-0 ${cfg.badge}`}>
                        <Icon className="w-3.5 h-3.5" />
                      </div>
                      <div className={`min-w-0 flex-1 ${isLeft ? "md:text-right" : ""}`}>
                        <p className="text-xs font-semibold text-muted-foreground mb-0.5 tabular-nums">
                          {station.period}
                        </p>
                        <p className="text-sm font-bold text-foreground leading-tight break-words">
                          {station.role}
                        </p>
                      </div>
                    </div>

                    <p className={`text-xs font-medium text-primary mb-3 break-words ${isLeft ? "md:text-right" : ""}`}>
                      {station.client}
                    </p>

                    <ul className={`space-y-1.5 ${isLeft ? "md:text-right" : ""}`}>
                      {station.tasks.map((task, tIndex) => (
                        <li
                          key={tIndex}
                          className={`text-xs text-muted-foreground leading-relaxed flex items-start gap-2 ${
                            isLeft ? "md:flex-row-reverse" : ""
                          }`}
                          data-testid={`item-experience-${index}-${tIndex}`}
                        >
                          <span className="w-1 h-1 rounded-full bg-muted-foreground/40 mt-1.5 shrink-0" />
                          <span className="break-words min-w-0">{task}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </motion.div>
            );
          })}
        </div>
      </motion.div>
    </div>
  );
}
