"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { DashboardShell } from "@/components/admin/layout/DashboardShell";
import { DashCard, StatusPill } from "@/components/admin/ui/DashPrimitives";
import { PageStyles } from "@/components/admin/ui/PageStyles";
import { getDashboardOverview } from "@/lib/admin/api/services";
import type { ActivityItem, DashboardStat, Invitation } from "@/lib/admin/types";

export default function DashboardHomePage() {
  const [stats, setStats] = useState<DashboardStat[]>([]);
  const [recent, setRecent] = useState<Invitation[]>([]);
  const [activity, setActivity] = useState<ActivityItem[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let alive = true;
    getDashboardOverview()
      .then((res) => {
        if (!alive) return;
        setStats(res.data.stats);
        setRecent(res.data.recentInvitations);
        setActivity(res.data.activity);
      })
      .finally(() => {
        if (alive) setLoading(false);
      });
    return () => {
      alive = false;
    };
  }, []);

  return (
    <DashboardShell title="Dashboard" subtitle="Overview of the CMORoom site content and requests.">
      <PageStyles href="home.css" />

      <div className="stat-grid">
        {stats.map((s) => (
          <Link key={s.label} href={s.href} className="stat-card">
            <span className={`stat-icon tone-${s.tone}`}>
              <i className={`bi ${s.icon}`} />
            </span>
            <div className="stat-body">
              <p className="stat-label">{s.label}</p>
              <h2 className="stat-value">{loading ? "—" : s.value}</h2>
              <p className="stat-meta">{s.meta}</p>
            </div>
            <i className="bi bi-arrow-right stat-go" />
          </Link>
        ))}
      </div>

      <div className="row g-4">
        <div className="col-xl-8">
          <DashCard
            title="Latest Invitation Requests"
            subtitle="Newest submissions from the request form."
            actions={
              <Link href="/admin/invitations" className="dash-btn dash-btn-ghost dash-btn-sm">
                View all
              </Link>
            }
            noBodyPad
          >
            <div className="dash-table-wrap">
              <table className="dash-table">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Title &amp; Company</th>
                    <th>City</th>
                    <th>Received</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  {recent.map((r) => (
                    <tr key={r.id}>
                      <td className="dash-td-title">
                        {r.first} {r.last}
                      </td>
                      <td>
                        {r.title}, {r.company}
                      </td>
                      <td>{r.city}</td>
                      <td>{r.date}</td>
                      <td>
                        <StatusPill status={r.status} />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </DashCard>
        </div>

        <div className="col-xl-4">
          <DashCard title="Recent Activity">
            <ul className="activity-list">
              {activity.map((a) => (
                <li key={a.id}>
                  <span className="activity-dot">
                    <i className={`bi ${a.icon}`} />
                  </span>
                  <div>
                    <p>{a.text}</p>
                    <small>{a.time}</small>
                  </div>
                </li>
              ))}
            </ul>
          </DashCard>
        </div>
      </div>
    </DashboardShell>
  );
}