import type { Metadata } from "next";

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

const stats = [
  { label: "Blog Yazısı", value: "1", icon: "✍", unit: "yazı", desc: "Yayınlanmış blog yazıları" },
  { label: "Infosec Yazısı", value: "1", icon: "⚔", unit: "yazı", desc: "Teknik güvenlik yazıları" },
  { label: "Notebook Notu", value: "1", icon: "◎", unit: "not", desc: "Kısa düşünceler" },
  { label: "HTB Makinesi", value: "47", icon: "◆", unit: "makine", desc: "HackTheBox'ta çözülen makineler" },
  { label: "CTF Çözümü", value: "23", icon: "◈", unit: "flag", desc: "Yakalanan CTF bayrakları" },
  { label: "Satır Kod", value: "12.4k", icon: "▦", unit: "satır", desc: "Bu yıl yazılan kod satırı" },
  { label: "Çay", value: "∞", icon: "☕", unit: "bardak", desc: "Tüketilen çay miktarı" },
  { label: "Kahvesiz Gün", value: "0", icon: "◎", unit: "gün", desc: "Çünkü kahve olmadan olmaz" },
  { label: "Terminal Oturumu", value: "847", icon: "▶", unit: "oturum", desc: "Açılan terminal oturumları" },
  { label: "Git Commit", value: "234", icon: "◇", unit: "commit", desc: "Bu yıl yapılan commit'ler" },
  { label: "Gece Çalışması", value: "67", icon: "◑", unit: "gece", desc: "Gece 00:00 sonrası aktif gün" },
  { label: "VPN Bağlantısı", value: "365", icon: "⊘", unit: "gün", desc: "VPN açık gün sayısı" },
];

const milestones = [
  { date: "2026-04-03", event: "denizbektas.com.tr yayına alındı", icon: "🚀" },
  { date: "2026-03-15", event: "HTB'de 40. makine çözüldü", icon: "◆" },
  { date: "2026-02-01", event: "eJPT sertifikası alındı", icon: "🏆" },
  { date: "2025-12-25", event: "İlk CTF birinciliği", icon: "🥇" },
  { date: "2025-06-10", event: "İlk pentest projesi", icon: "⚔" },
];

export default function StatboardPage() {
  return (
    <div style={{ maxWidth: "100%" }}>
      <div className="page-title">Statboard</div>
      <p style={{ fontSize: "0.8rem", color: "var(--text-muted)", marginBottom: "2rem" }}>
        Anlamsız ama eğlenceli istatistikler
      </p>

      {/* Main stats grid */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: "0.75rem", marginBottom: "2rem" }}>
        {stats.map((stat) => (
          <div key={stat.label} className="card" style={{ textAlign: "center", padding: "1rem" }}>
            <div style={{ fontSize: "1.4rem", marginBottom: "0.3rem" }}>{stat.icon}</div>
            <div style={{ fontSize: "1.5rem", fontWeight: 800, color: "var(--accent)", lineHeight: 1 }}>{stat.value}</div>
            <div style={{ fontSize: "0.65rem", color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.06em", marginTop: "0.2rem" }}>{stat.unit}</div>
            <div style={{ fontSize: "0.72rem", color: "var(--text)", marginTop: "0.4rem" }}>{stat.label}</div>
            <div style={{ fontSize: "0.65rem", color: "var(--text-muted)", marginTop: "0.15rem" }}>{stat.desc}</div>
          </div>
        ))}
      </div>

      {/* Milestones */}
      <div className="section-header">Kilometre Taşları</div>
      <div className="card">
        <ul style={{ listStyle: "none", display: "flex", flexDirection: "column" }}>
          {milestones.map((m, i) => (
            <li
              key={i}
              style={{
                display: "flex",
                alignItems: "center",
                gap: "1rem",
                padding: "0.6rem 0",
                borderBottom: i < milestones.length - 1 ? "1px solid var(--border)" : "none",
              }}
            >
              <span style={{ fontSize: "1rem", flexShrink: 0 }}>{m.icon}</span>
              <span style={{ flex: 1, fontSize: "0.85rem", color: "var(--text)" }}>{m.event}</span>
              <span style={{ fontSize: "0.72rem", color: "var(--text-muted)", flexShrink: 0 }}>
                {new Date(m.date).toLocaleDateString("tr-TR", { year: "numeric", month: "short", day: "numeric" })}
              </span>
            </li>
          ))}
        </ul>
      </div>

      <div style={{ marginTop: "1rem", fontSize: "0.72rem", color: "var(--text-muted)", textAlign: "center" }}>
        Veriler elle güncellenmektedir. Kesinlik garantisi verilmez. ¯\_(ツ)_/¯
      </div>
    </div>
  );
}