import Link from "next/link";
import { Code2, Terminal, Puzzle, Box, ArrowUpRight, CheckCircle2, Sparkles } from "lucide-react";

function GithubIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
      <path d="M9 18c-4.51 2-5-2-7-2" />
    </svg>
  );
}

const DEVELOPER_TOOLS = [
  {
    id: "github-repo",
    title: "GitHub Repository",
    badge: "Open Source",
    icon: GithubIcon,
    description: "Der Quellcode des Decision-Kit & Entscheidomat Ökosystems auf GitHub. Sterne, Issues & Contribution Guide.",
    snippet: "git clone https://github.com/knuthtimo-lab/decision-kit.git",
    link: "https://github.com/knuthtimo-lab/decision-kit",
    actionText: "GitHub Repo besuchen",
    highlight: true
  },
  {
    id: "vscode",
    title: "VS Code Extension",
    badge: "Marketplace",
    icon: Puzzle,
    description: "Zufallssieger aus Markierungen ziehen, Würfeln via Befehlspalette (2d6+3) & Glücksrad-Tab direkt in der IDE.",
    link: "https://marketplace.visualstudio.com/items?itemName=TimoKnuth.decisionkit-vscode",
    actionText: "VS Code Store öffnen"
  },
  {
    id: "chrome",
    title: "Chrome Web Store Extension",
    badge: "Soon",
    icon: Puzzle,
    description: "Random Picker, Glücksrad, Würfel, Münzwurf und Kontextmenü-Kürzel – die Veröffentlichung im Chrome Web Store ist in Vorbereitung.",
    link: "/developer",
    actionText: "Demnächst verfügbar"
  },
  {
    id: "npm",
    title: "NPM TypeScript Library",
    badge: "npm v1.0.0",
    icon: Box,
    description: "Vose Alias Method für O(1) Zufallswahl, Glücksrad-Physik, RPG-Dice Parser & React 18/19 Hooks.",
    snippet: "npm install decision-kit",
    link: "https://www.npmjs.com/package/decision-kit",
    actionText: "npm Registry öffnen"
  },
  {
    id: "pypi",
    title: "Python SDK & CLI",
    badge: "PyPI v1.0.0",
    icon: Terminal,
    description: "Entscheidungs-Engine & Terminal-CLI für Python-Entwickler, Data Scientists und Automationen.",
    snippet: "pip install decision-kit",
    link: "https://pypi.org/project/decision-kit/",
    actionText: "PyPI Project öffnen"
  },
  {
    id: "github-action",
    title: "GitHub Action",
    badge: "Marketplace",
    icon: Code2,
    description: "Automatisierte Zufallsentscheidungen & Team-Aufteilungen direkt in GitHub CI/CD Actions Workflows.",
    link: "https://github.com/marketplace/actions/decision-kit-action",
    actionText: "GitHub Action ansehen"
  }
];

export default function DeveloperEcosystem() {
  return (
    <section className="my-16 overflow-hidden rounded-3xl border border-line bg-surface p-6 shadow-lift sm:p-10">
      <div className="mx-auto max-w-3xl text-center">
        <div className="inline-flex items-center gap-2 rounded-full border border-[#0d7a57]/20 bg-[#e6f7f0] px-3.5 py-1 text-xs font-semibold uppercase tracking-wider text-[#0d7a57]">
          <Sparkles className="h-3.5 w-3.5" />
          <span>Developer &amp; Extension Suite</span>
        </div>
        <h2 className="mt-4 text-2xl font-bold tracking-tight text-ink sm:text-3xl">
          Entscheidomat überall nutzen: VS Code, Chrome, Terminal &amp; Code
        </h2>
        <p className="mt-3 text-sm text-ink-soft sm:text-base">
          Nutze unsere Entscheidungstools direkt in deinem Browser, in deiner Lieblings-IDE oder als Open-Source Package in Node.js, Python &amp; GitHub Actions.
        </p>
      </div>

      <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {DEVELOPER_TOOLS.map((tool) => {
          const Icon = tool.icon;
          return (
            <div
              key={tool.id}
              className={`group flex flex-col justify-between rounded-2xl border p-5 transition-all duration-200 hover:-translate-y-1 hover:shadow-soft ${
                tool.highlight
                  ? "border-[#0d7a57]/40 bg-[#e6f7f0]/30"
                  : "border-line bg-paper hover:border-[#0d7a57]/30"
              }`}
            >
              <div>
                <div className="flex items-center justify-between gap-2">
                  <div className="flex items-center gap-2.5">
                    <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-[#0d7a57]/20 bg-[#e6f7f0] text-[#0d7a57]">
                      <Icon className="h-5 w-5" />
                    </div>
                    <h3 className="font-bold text-ink group-hover:text-[#0d7a57] transition-colors">
                      {tool.title}
                    </h3>
                  </div>
                  <span className="rounded-full bg-[#0d7a57]/10 px-2.5 py-0.5 text-xs font-semibold text-[#0d7a57]">
                    {tool.badge}
                  </span>
                </div>

                <p className="mt-3 text-xs leading-relaxed text-ink-soft sm:text-sm">
                  {tool.description}
                </p>

                {tool.snippet && (
                  <div className="mt-3 overflow-x-auto rounded-xl border border-slate-800 bg-[#111412] px-3.5 py-2 font-mono text-xs shadow-inner">
                    <span className="text-[#10b981] font-bold">$ </span>
                    <span className="text-emerald-200">{tool.snippet}</span>
                  </div>
                )}
              </div>

              <div className="mt-5 flex items-center justify-between border-t border-line/60 pt-3">
                <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-ink-soft">
                  <CheckCircle2 className="h-3.5 w-3.5 text-[#0d7a57]" />
                  <span>Open Source</span>
                </span>
                {tool.id === "chrome" ? (
                  <span className="text-xs font-semibold text-ink-soft">Chrome Web Store · Soon</span>
                ) : (
                  <a
                    href={tool.link}
                    target={tool.link.startsWith("http") ? "_blank" : "_self"}
                    rel={tool.link.startsWith("http") ? "noopener noreferrer" : undefined}
                    className="inline-flex items-center gap-1 text-xs font-semibold text-[#0d7a57] hover:underline"
                  >
                    <span>{tool.actionText}</span>
                    <ArrowUpRight className="h-3.5 w-3.5" />
                  </a>
                )}
              </div>
            </div>
          );
        })}
      </div>

      <div className="mt-8 text-center">
        <Link
          href="/developer"
          className="inline-flex items-center gap-2 rounded-full border border-line bg-surface px-6 py-2.5 text-sm font-semibold text-ink shadow-soft transition-all hover:border-[#0d7a57]/40 hover:bg-[#e6f7f0] hover:text-[#0d7a57]"
        >
          <span>Alle Extensions, Repositories &amp; Dokumentation ansehen</span>
          <ArrowUpRight className="h-4 w-4" />
        </Link>
      </div>
    </section>
  );
}