import { motion } from "framer-motion";
import { ExternalLink, BookOpen, ShieldCheck } from "lucide-react";

type Category = {
  label: string;
  tags: string[];
  color: string;
};

const categories: Category[] = [
  {
    label: "Betriebssysteme",
    tags: ["AIX", "Solaris", "Ubuntu / Debian", "Red Hat", "HP-UX", "Windows Server"],
    color: "bg-slate-100 text-slate-700",
  },
  {
    label: "Middleware & Webserver",
    tags: ["Apache2", "Tomcat", "JBoss", "WebSphere", "BEA WebLogic", "ColdFusion", "Nginx"],
    color: "bg-blue-50 text-blue-700",
  },
  {
    label: "Container & Automatisierung",
    tags: ["Docker", "Docker Compose", "Ansible", "GitLab CI/CD", "Artifactory", "Bitbucket"],
    color: "bg-sky-50 text-sky-700",
  },
  {
    label: "Monitoring",
    tags: ["Grafana", "Prometheus", "Loki", "Nagios", "Cacti", "JMX-Monitoring"],
    color: "bg-orange-50 text-orange-700",
  },
  {
    label: "Datenbanken",
    tags: ["Oracle", "MySQL", "MariaDB", "MSSQL"],
    color: "bg-teal-50 text-teal-700",
  },
  {
    label: "KI & Automation",
    tags: ["n8n", "OpenAI API", "Ollama", "Pinecone", "RAG-Systeme", "Claude Code", "ChatGPT"],
    color: "bg-violet-50 text-violet-700",
  },
  {
    label: "Programmiersprachen",
    tags: ["Shell / Bash", "Perl", "PHP", "Python", "HTML", "CSS"],
    color: "bg-green-50 text-green-700",
  },
  {
    label: "Kollaboration & Dokumentation",
    tags: ["Confluence", "Jira", "draw.io", "Visio", "ServiceNow", "Nextcloud"],
    color: "bg-rose-50 text-rose-700",
  },
];

const methodikBadges = [
  { label: "ITIL v3/v4", strong: true },
  { label: "BSI-Grundschutz", strong: true },
  { label: "ITSM / Service Management", strong: false },
  { label: "Betriebshandbücher & Runbooks", strong: false },
  { label: "Change Management", strong: false },
  { label: "Incident & Problem Management", strong: false },
];

const softSkills = [
  "Analytisches Denken",
  "Belastbarkeit in kritischen Umgebungen",
  "Strukturierte Kommunikation",
  "Eigenverantwortliches Arbeiten",
  "Einarbeitung in neue Domänen",
  "Dokumentationsqualität",
];

export function Skills() {
  return (
    <div className="py-24 bg-secondary/40 rounded-3xl">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: "-80px" }}
        transition={{ duration: 0.6 }}
        className="px-4 md:px-12"
      >
        <div className="text-center max-w-2xl mx-auto mb-16">
          <p className="section-number mb-3" data-testid="text-section-label-skills">
            Skills & Technologien
          </p>
          <h2
            className="text-3xl md:text-4xl font-bold text-foreground mb-4"
            data-testid="text-section-title-skills"
          >
            Vollständige Technologie-Matrix
          </h2>
          <p className="text-muted-foreground text-lg">
            Eingesetzte Technologien aus 30+ Jahren Projektpraxis — von Unix-Systemen der ersten Stunde bis zur aktuellen KI-Toolchain.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mb-12">
          {categories.map((cat, index) => (
            <motion.div
              key={cat.label}
              initial={{ opacity: 0, y: 12 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.35, delay: index * 0.05 }}
              className="bg-white rounded-2xl border border-border p-5"
              data-testid={`card-skill-category-${index}`}
            >
              <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
                {cat.label}
              </p>
              <div className="flex flex-wrap gap-2">
                {cat.tags.map((tag) => (
                  <span
                    key={tag}
                    className={`text-xs font-medium px-2.5 py-1 rounded-full ${cat.color}`}
                    data-testid={`tag-skill-${tag.replace(/\s/g, '-').toLowerCase()}`}
                  >
                    {tag}
                  </span>
                ))}
              </div>
            </motion.div>
          ))}
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.4 }}
            className="bg-white rounded-2xl border border-border p-6"
            data-testid="card-methodik"
          >
            <div className="flex items-center gap-2 mb-4">
              <ShieldCheck className="w-4 h-4 text-primary" />
              <p className="text-sm font-semibold text-foreground">Methodik & Compliance</p>
            </div>
            <div className="flex flex-wrap gap-2">
              {methodikBadges.map((b) => (
                <span
                  key={b.label}
                  className={`text-xs font-medium px-3 py-1.5 rounded-full border ${
                    b.strong
                      ? "bg-primary/10 text-primary border-primary/20 font-semibold"
                      : "bg-secondary text-foreground/70 border-border"
                  }`}
                  data-testid={`badge-methodik-${b.label.replace(/\s/g, '-').toLowerCase()}`}
                >
                  {b.label}
                </span>
              ))}
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 12 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.4, delay: 0.06 }}
            className="bg-white rounded-2xl border border-border p-6"
            data-testid="card-softskills"
          >
            <p className="text-sm font-semibold text-foreground mb-4">Arbeitsweise & Soft Skills</p>
            <div className="flex flex-wrap gap-2">
              {softSkills.map((s) => (
                <span
                  key={s}
                  className="text-xs font-medium px-3 py-1.5 rounded-full bg-secondary text-foreground/70 border border-border"
                  data-testid={`badge-softskill-${s.replace(/\s/g, '-').toLowerCase()}`}
                >
                  {s}
                </span>
              ))}
            </div>
          </motion.div>
        </div>

        <motion.a
          href="https://blog.unixweb.de"
          target="_blank"
          rel="noopener noreferrer"
          initial={{ opacity: 0, y: 12 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.4, delay: 0.1 }}
          className="flex items-center gap-4 bg-white rounded-2xl border border-border p-5 hover:border-primary/30 hover:shadow-sm transition-all group"
          data-testid="card-blogger-credential"
        >
          <div className="w-10 h-10 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center shrink-0">
            <BookOpen className="w-5 h-5 text-primary" />
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-sm font-semibold text-foreground">300+ Fachartikel auf blog.unixweb.de</p>
            <p className="text-xs text-muted-foreground mt-0.5">
              Praxiswissen zu Linux, Apache, Docker, Ansible, KI-Automation und mehr — seit über 10 Jahren.
            </p>
          </div>
          <ExternalLink className="w-4 h-4 text-muted-foreground/40 group-hover:text-primary transition-colors shrink-0" />
        </motion.a>
      </motion.div>
    </div>
  );
}
