import type { Metadata } from "next";
import { getActivity } from "@/lib/activity";
import Link from "next/link";

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

const typeIcons: Record<string, string> = {
  post: "✍", notebook: "◎", infosec: "⚔", project: "◈",
  link: "⊞", update: "▲", system: "⚙",
};

const typeLabels: Record<string, string> = {
  post: "Blog", notebook: "Notebook", infosec: "Infosec",
  project: "Proje", link: "Link", update: "Güncelleme", system: "Sistem",
};

export default function AktivitePage() {
  const activities = getActivity();

  return (
    <div style={{ maxWidth: "100%" }}>
      <div className="page-title">Aktivite</div>
      <p style={{ fontSize: "0.8rem", color: "var(--text-muted)", marginBottom: "2rem" }}>
        Sitede olan her şeyin kaydı — changelog + activity stream
      </p>

      <div className="card">
        <div style={{ fontFamily: "monospace", fontSize: "0.8rem" }}>
          {activities.length === 0 ? (
            <div style={{ color: "var(--text-muted)", fontStyle: "italic" }}>Henüz aktivite yok</div>
          ) : (
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column" }}>
              {activities.map((a) => (
                <li
                  key={a.id}
                  style={{
                    display: "grid",
                    gridTemplateColumns: "140px 60px 1fr",
                    gap: "0.75rem",
                    alignItems: "flex-start",
                    padding: "0.6rem 0",
                    borderBottom: "1px solid var(--border)",
                  }}
                >
                  <span style={{ color: "var(--text-muted)", fontSize: "0.7rem" }}>
                    {formatDateTime(a.timestamp)}
                  </span>
                  <span style={{ display: "flex", alignItems: "center", gap: "0.3rem", fontSize: "0.7rem" }}>
                    <span style={{ color: "var(--accent)" }}>{typeIcons[a.type] || "▶"}</span>
                    <span style={{ color: "var(--text-muted)" }}>{typeLabels[a.type] || a.type}</span>
                  </span>
                  <span>
                    {a.link ? (
                      <Link href={a.link} style={{ color: "var(--text)" }}>{a.message}</Link>
                    ) : (
                      <span style={{ color: "var(--text)" }}>{a.message}</span>
                    )}
                  </span>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
}

function formatDateTime(iso: string) {
  const d = new Date(iso);
  return d.toLocaleString("tr-TR", {
    year: "numeric", month: "2-digit", day: "2-digit",
    hour: "2-digit", minute: "2-digit",
  });
}