import Link from "next/link";
import { getPosts } from "@/lib/posts";
import { getActivity } from "@/lib/activity";

export default function Home() {
  const blogPosts = getPosts("blog").slice(0, 3);
  const infosecPosts = getPosts("infosec").slice(0, 3);
  const notes = getPosts("notebook").slice(0, 3);
  const activities = getActivity().slice(0, 5);

  return (
    <div style={{ maxWidth: "100%" }}>
      {/* Hero */}
      <div className="card" style={{ marginBottom: "2rem" }}>
        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.75rem" }}>
          <span style={{ color: "var(--accent)", fontSize: "0.8rem" }}>root@denizbektas.com.tr:~$</span>
          <span style={{ color: "var(--text)", fontSize: "0.8rem" }}>whoami</span>
        </div>
        <h1 style={{ fontSize: "1.6rem", fontWeight: 800, color: "var(--accent)", marginBottom: "0.5rem" }}>
          denizbektas
        </h1>
        <p style={{ color: "var(--text-muted)", fontSize: "0.875rem", lineHeight: 1.7, maxWidth: "600px" }}>
          Siber güvenlik araştırmacısı, red teamer, CTF oyuncusu. Sistemlerin nasıl kırıldığını anlayarak
          onları nasıl koruyacağımızı öğreniyoruz. Bu site o yolculuğun kayıtlarıdır.
        </p>
        <div style={{ display: "flex", gap: "0.5rem", marginTop: "1rem", flexWrap: "wrap" }}>
          <span className="tag">red team</span>
          <span className="tag">pentest</span>
          <span className="tag">CTF</span>
          <span className="tag">OSINT</span>
          <span className="tag">malware analysis</span>
        </div>
        <div style={{ marginTop: "1rem", display: "flex", gap: "1rem", fontSize: "0.8rem" }}>
          <Link href="/merhaba" style={{ color: "var(--accent)" }}>→ Merhaba</Link>
          <Link href="/hakkimda" style={{ color: "var(--text-muted)" }}>Hakkımda</Link>
          <Link href="/iletisim" style={{ color: "var(--text-muted)" }}>İletişim</Link>
        </div>
      </div>

      {/* Grid */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: "1rem" }}>

        {/* Blog Widget */}
        <WidgetCard title="Personal Blog" href="/blog" icon="✍">
          {blogPosts.length === 0 ? (
            <EmptyState text="Henüz yazı yok" />
          ) : (
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
              {blogPosts.map((p) => (
                <li key={p.slug}>
                  <Link href={`/blog/${p.slug}`} style={{ color: "var(--text)", fontSize: "0.82rem", display: "block", lineHeight: 1.4 }}>
                    {p.title}
                  </Link>
                  <span style={{ fontSize: "0.7rem", color: "var(--text-muted)" }}>{formatDate(p.date)}</span>
                </li>
              ))}
            </ul>
          )}
        </WidgetCard>

        {/* Infosec Widget */}
        <WidgetCard title="Infosec Posts" href="/infosec" icon="⚔">
          {infosecPosts.length === 0 ? (
            <EmptyState text="Henüz yazı yok" />
          ) : (
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
              {infosecPosts.map((p) => (
                <li key={p.slug}>
                  <Link href={`/infosec/${p.slug}`} style={{ color: "var(--text)", fontSize: "0.82rem", display: "block", lineHeight: 1.4 }}>
                    {p.title}
                  </Link>
                  <div style={{ display: "flex", gap: "0.25rem", flexWrap: "wrap", marginTop: "0.2rem" }}>
                    {p.tags.slice(0, 2).map((t) => <span key={t} className="tag">{t}</span>)}
                  </div>
                </li>
              ))}
            </ul>
          )}
        </WidgetCard>

        {/* Notebook Widget */}
        <WidgetCard title="Notebook" href="/notebook" icon="◎">
          {notes.length === 0 ? (
            <EmptyState text="Henüz not yok" />
          ) : (
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: "0.6rem" }}>
              {notes.map((p) => (
                <li key={p.slug}>
                  <Link href={`/notebook/${p.slug}`} style={{ color: "var(--text)", fontSize: "0.82rem" }}>
                    {p.title}
                  </Link>
                  <br />
                  <span style={{ fontSize: "0.7rem", color: "var(--text-muted)" }}>{p.excerpt.slice(0, 60)}...</span>
                </li>
              ))}
            </ul>
          )}
        </WidgetCard>

        {/* Activity Widget */}
        <WidgetCard title="Son Aktivite" href="/aktivite" icon="▶">
          <ul style={{ listStyle: "none", display: "flex", flexDirection: "column" }}>
            {activities.map((a) => (
              <li key={a.id} className="terminal-line" style={{ fontSize: "0.75rem" }}>
                <span className="prompt" style={{ flexShrink: 0, fontSize: "0.65rem" }}>
                  {typeIcon(a.type)}
                </span>
                <span style={{ flex: 1 }}>
                  {a.link ? <Link href={a.link}>{a.message}</Link> : a.message}
                </span>
              </li>
            ))}
          </ul>
        </WidgetCard>

        {/* Now Widget */}
        <WidgetCard title="Şu Anda" href="/su-anda" icon="◉">
          <div style={{ fontSize: "0.82rem", color: "var(--text-muted)", lineHeight: 1.9 }}>
            <p>🔴 <strong style={{ color: "var(--text)" }}>Odak:</strong> Red team metodolojileri</p>
            <p>📖 <strong style={{ color: "var(--text)" }}>Okuma:</strong> The Hacker Playbook 3</p>
            <p>🎯 <strong style={{ color: "var(--text)" }}>Hedef:</strong> OSCP sertifikası</p>
            <p>🎵 <strong style={{ color: "var(--text)" }}>Dinleme:</strong> Darksynth</p>
          </div>
        </WidgetCard>

        {/* RSS Widget */}
        <WidgetCard title="RSS Beslemeleri" href="/rss-beslemeleri" icon="◈">
          <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
            {[
              { label: "Tüm İçerikler", href: "/api/rss/all" },
              { label: "Blog", href: "/api/rss/blog" },
              { label: "Infosec", href: "/api/rss/infosec" },
              { label: "Podcast", href: "/api/rss/podcast" },
            ].map((r) => (
              <a key={r.href} href={r.href} style={{ display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "0.8rem", color: "var(--text-muted)" }}>
                <span style={{ color: "#f26522", fontSize: "0.7rem" }}>⊞</span>
                {r.label}
              </a>
            ))}
          </div>
        </WidgetCard>

        {/* Statboard Widget */}
        <WidgetCard title="Statboard" href="/statboard" icon="▦">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
            {[
              { label: "Blog Yazısı", value: "1" },
              { label: "Infosec Yazı", value: "1" },
              { label: "CTF Çözümü", value: "47" },
              { label: "Çay ☕", value: "∞" },
            ].map((s) => (
              <div key={s.label} style={{ textAlign: "center", padding: "0.5rem", background: "var(--bg)", borderRadius: "4px", border: "1px solid var(--border)" }}>
                <div style={{ fontSize: "1.1rem", fontWeight: 700, color: "var(--accent)" }}>{s.value}</div>
                <div style={{ fontSize: "0.65rem", color: "var(--text-muted)" }}>{s.label}</div>
              </div>
            ))}
          </div>
        </WidgetCard>

        {/* Projeler Widget */}
        <WidgetCard title="Projeler" href="/projeler" icon="◈">
          <div style={{ display: "flex", flexDirection: "column", gap: "0.6rem" }}>
            <ProjectItem name="denizbektas.com.tr" desc="Bu site — kişisel alan" status="active" />
            <ProjectItem name="recon-toolkit" desc="Otomasyon keşif aracı" status="wip" />
            <ProjectItem name="ctf-writeups" desc="CTF çözüm yazıları" status="active" />
          </div>
        </WidgetCard>

      </div>
    </div>
  );
}

function WidgetCard({ title, href, icon, children }: { title: string; href: string; icon: string; children: React.ReactNode }) {
  return (
    <div className="card" style={{ display: "flex", flexDirection: "column" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.75rem" }}>
        <div style={{ display: "flex", alignItems: "center", gap: "0.4rem", fontSize: "0.75rem", fontWeight: 700, color: "var(--text)", letterSpacing: "0.02em" }}>
          <span style={{ color: "var(--accent)", fontSize: "0.7rem" }}>{icon}</span>
          {title}
        </div>
        <Link href={href} style={{ fontSize: "0.65rem", color: "var(--text-muted)" }}>tümü →</Link>
      </div>
      {children}
    </div>
  );
}

function EmptyState({ text }: { text: string }) {
  return <div style={{ fontSize: "0.8rem", color: "var(--text-muted)", fontStyle: "italic" }}>{text}</div>;
}

function ProjectItem({ name, desc, status }: { name: string; desc: string; status: string }) {
  const colors: Record<string, string> = { active: "#00d4aa", wip: "#f59e0b", archived: "#64748b" };
  return (
    <div style={{ display: "flex", alignItems: "flex-start", gap: "0.5rem" }}>
      <span style={{ color: colors[status] || "var(--text-muted)", fontSize: "0.5rem", marginTop: "0.3rem", flexShrink: 0 }}>●</span>
      <div>
        <div style={{ fontSize: "0.82rem", color: "var(--text)" }}>{name}</div>
        <div style={{ fontSize: "0.7rem", color: "var(--text-muted)" }}>{desc}</div>
      </div>
    </div>
  );
}

function typeIcon(type: string) {
  const icons: Record<string, string> = {
    post: "✍", notebook: "◎", infosec: "⚔", project: "◈", link: "⊞", update: "▲", system: "⚙",
  };
  return icons[type] || "▶";
}

function formatDate(date: string) {
  return new Date(date).toLocaleDateString("tr-TR", { year: "numeric", month: "short", day: "numeric" });
}