import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { useAdminAuth } from "../AdminAuthContext";
import { adminApi, adminEndpoints } from "../api";
import { Boxes, FileText, Archive, ArrowRight } from "lucide-react";

type Stats = {
  totalComponents: number;
  totalPages: number;
  archivedComponents: number;
};

export default function AdminDashboard() {
  const { user } = useAdminAuth();
  const [stats, setStats] = useState<Stats>({ totalComponents: 0, totalPages: 0, archivedComponents: 0 });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    async function load() {
      try {
        const [componentsRes, pagesRes, archivedRes] = await Promise.all([
          adminApi.get<{ components: unknown[] }>(adminEndpoints.components),
          adminApi.get<{ pages: unknown[] }>(adminEndpoints.pages),
          adminApi.get<{ components: unknown[] }>(adminEndpoints.componentsArchived),
        ]);
        if (!cancelled) {
          setStats({
            totalComponents: componentsRes.components?.length ?? 0,
            totalPages: pagesRes.pages?.length ?? 0,
            archivedComponents: archivedRes.components?.length ?? 0,
          });
        }
      } catch {
        if (!cancelled) setStats({ totalComponents: 0, totalPages: 0, archivedComponents: 0 });
      } finally {
        if (!cancelled) setLoading(false);
      }
    }
    load();
    return () => { cancelled = true; };
  }, []);

  const cards = [
    {
      title: "Total Components",
      value: loading ? "—" : stats.totalComponents,
      subtitle: "Active sections",
      icon: Boxes,
      href: "/dashboard/components",
      color: "#0f172a",
      bg: "linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%)",
      iconBg: "rgba(15, 23, 42, 0.08)",
    },
    {
      title: "Total Pages",
      value: loading ? "—" : stats.totalPages,
      subtitle: "Content pages",
      icon: FileText,
      href: "/dashboard/pages",
      color: "#0f172a",
      bg: "linear-gradient(135deg, #fefce8 0%, #fef9c3 100%)",
      iconBg: "rgba(113, 63, 18, 0.12)",
    },
    {
      title: "Archived",
      value: loading ? "—" : stats.archivedComponents,
      subtitle: "Archived components",
      icon: Archive,
      href: "/dashboard/components/archived",
      color: "#0f172a",
      bg: "linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)",
      iconBg: "rgba(71, 85, 105, 0.12)",
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: 28 }}>
        <h1 style={{ margin: "0 0 6px", fontSize: 28, fontWeight: 700, color: "#0f172a" }}>
          Dashboard
        </h1>
        <p style={{ color: "#64748b", margin: 0, fontSize: 15 }}>
          Welcome back, {user?.name ?? user?.email}.
        </p>
      </div>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
          gap: 20,
        }}
      >
        {cards.map((card) => {
          const Icon = card.icon;
          return (
            <Link
              key={card.title}
              to={card.href}
              style={{
                textDecoration: "none",
                color: "inherit",
                display: "block",
              }}
            >
              <div
                style={{
                  background: card.bg,
                  padding: 24,
                  borderRadius: 16,
                  boxShadow: "0 1px 3px rgba(0,0,0,0.06)",
                  border: "1px solid rgba(0,0,0,0.06)",
                  transition: "transform 0.2s ease, box-shadow 0.2s ease",
                  height: "100%",
                  display: "flex",
                  flexDirection: "column",
                }}
                className="dashboard-stat-card"
              >
                <div
                  style={{
                    display: "flex",
                    alignItems: "flex-start",
                    justifyContent: "space-between",
                    marginBottom: 16,
                  }}
                >
                  <span
                    style={{
                      fontSize: 13,
                      fontWeight: 600,
                      color: "#64748b",
                      textTransform: "uppercase",
                      letterSpacing: "0.02em",
                    }}
                  >
                    {card.title}
                  </span>
                  <span
                    style={{
                      width: 44,
                      height: 44,
                      borderRadius: 12,
                      background: card.iconBg,
                      display: "inline-flex",
                      alignItems: "center",
                      justifyContent: "center",
                      color: card.color,
                    }}
                  >
                    <Icon size={22} strokeWidth={2} />
                  </span>
                </div>
                <div style={{ fontSize: 32, fontWeight: 700, color: card.color, lineHeight: 1.2 }}>
                  {card.value}
                </div>
                <div style={{ fontSize: 13, color: "#64748b", marginTop: 4 }}>{card.subtitle}</div>
                <div
                  style={{
                    marginTop: "auto",
                    paddingTop: 16,
                    display: "inline-flex",
                    alignItems: "center",
                    gap: 6,
                    fontSize: 13,
                    fontWeight: 600,
                    color: "#475569",
                  }}
                >
                  View
                  <ArrowRight size={14} />
                </div>
              </div>
            </Link>
          );
        })}
      </div>

      <style>{`
        .dashboard-stat-card:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
      `}</style>
    </div>
  );
}