import type { Metadata } from "next";

export const metadata: Metadata = { title: "Projeler" };

interface Project {
  name: string;
  description: string;
  status: "active" | "wip" | "archived" | "planned";
  tags: string[];
  url?: string;
  github?: string;
}

const projects: Project[] = [
  {
    name: "denizbektas.com.tr",
    description: "Bu site. Next.js, TypeScript, Markdown tabanlı kişisel alan. Açık kaynak.",
    status: "active",
    tags: ["nextjs", "typescript", "website"],
    github: "https://github.com/bugresearch/denizbektas.com.tr",
  },
  {
    name: "recon-toolkit",
    description: "Python ile geliştirilmiş modüler recon otomasyon aracı. Subdomain enumeration, port scan, tech fingerprinting.",
    status: "wip",
    tags: ["python", "recon", "osint", "automation"],
    github: "https://github.com/bugresearch/recon-toolkit",
  },
  {
    name: "ctf-writeups",
    description: "HackTheBox ve çeşitli CTF yarışmalarından çözüm yazıları koleksiyonu.",
    status: "active",
    tags: ["ctf", "writeup", "hactkthebox"],
    github: "https://github.com/bugresearch/ctf-writeups",
  },
  {
    name: "nuclei-templates",
    description: "Özel Nuclei tarama şablonları. Web uygulamaları için özelleştirilmiş güvenlik testleri.",
    status: "active",
    tags: ["nuclei", "pentest", "templates"],
    github: "https://github.com/bugresearch/nuclei-templates",
  },
  {
    name: "implant-rs",
    description: "Rust ile yazılan minimal C2 implant — eğitim ve araştırma amaçlı.",
    status: "wip",
    tags: ["rust", "c2", "red-team", "research"],
  },
  {
    name: "wordlist-tr",
    description: "Türkçe hedef sistemler için özelleştirilmiş wordlist koleksiyonu.",
    status: "planned",
    tags: ["wordlist", "pentest", "turkish"],
  },
];

const statusConfig = {
  active: { label: "Aktif", color: "#00d4aa", icon: "●" },
  wip: { label: "Yapım Aşamasında", color: "#f59e0b", icon: "◉" },
  archived: { label: "Arşivlendi", color: "#64748b", icon: "◎" },
  planned: { label: "Planlandı", color: "#7c6af7", icon: "◇" },
};

export default function ProjelerPage() {
  return (
    <div style={{ maxWidth: "100%" }}>
      <div className="page-title">Projeler</div>
      <p style={{ fontSize: "0.8rem", color: "var(--text-muted)", marginBottom: "2rem" }}>
        Üzerinde çalıştığım ve geliştirdiğim projeler
      </p>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))", gap: "0.75rem" }}>
        {projects.map((p) => {
          const cfg = statusConfig[p.status];
          return (
            <div key={p.name} className="card">
              <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "0.5rem", marginBottom: "0.5rem" }}>
                <h3 style={{ fontSize: "0.95rem", fontWeight: 700, color: "var(--text)", fontFamily: "monospace" }}>{p.name}</h3>
                <span style={{
                  fontSize: "0.6rem",
                  display: "flex",
                  alignItems: "center",
                  gap: "0.25rem",
                  color: cfg.color,
                  border: `1px solid ${cfg.color}`,
                  padding: "0.1rem 0.4rem",
                  borderRadius: "3px",
                  flexShrink: 0,
                  fontWeight: 700,
                  textTransform: "uppercase",
                }}>
                  <span style={{ fontSize: "0.4rem" }}>{cfg.icon}</span>
                  {cfg.label}
                </span>
              </div>

              <p style={{ fontSize: "0.8rem", color: "var(--text-muted)", lineHeight: 1.6, marginBottom: "0.75rem" }}>
                {p.description}
              </p>

              <div style={{ display: "flex", gap: "0.3rem", flexWrap: "wrap", marginBottom: "0.75rem" }}>
                {p.tags.map((t) => <span key={t} className="tag">{t}</span>)}
              </div>

              <div style={{ display: "flex", gap: "0.75rem" }}>
                {p.github && (
                  <a href={p.github} target="_blank" rel="noopener noreferrer" style={{ fontSize: "0.75rem", display: "flex", alignItems: "center", gap: "0.3rem" }}>
                    <span style={{ fontSize: "0.65rem" }}>◈</span> GitHub
                  </a>
                )}
                {p.url && (
                  <a href={p.url} target="_blank" rel="noopener noreferrer" style={{ fontSize: "0.75rem", display: "flex", alignItems: "center", gap: "0.3rem" }}>
                    <span style={{ fontSize: "0.65rem" }}>⊕</span> Demo
                  </a>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}