"use client";

import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import type { Customer } from "@/data/types";
import { Reveal } from "@/components/motion/Reveal";
import { formatDate, formatPrice } from "@/lib/format";
import { easeSoft } from "@/lib/motion";

export default function AdminCustomersPage() {
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    void fetch("/api/admin/customers", { credentials: "include" })
      .then((res) => res.json())
      .then((data: { customers?: Customer[] }) =>
        setCustomers(data.customers ?? []),
      )
      .finally(() => setLoading(false));
  }, []);

  return (
    <div>
      <Reveal>
        <h1 className="text-2xl font-semibold tracking-tight text-foreground">
          Customers
        </h1>
        <p className="mt-2 text-sm text-muted">
          Registered shoppers from the users table.
        </p>
      </Reveal>

      <Reveal delay={0.08} className="mt-6">
        <div className="overflow-hidden rounded-2xl border border-border bg-card shadow-sm">
          <div className="overflow-x-auto">
            <table className="min-w-full text-left text-sm">
              <thead className="border-b border-border bg-surface">
                <tr>
                  <th className="px-4 py-3 font-semibold text-foreground">Name</th>
                  <th className="px-4 py-3 font-semibold text-foreground">Email</th>
                  <th className="px-4 py-3 font-semibold text-foreground">
                    Orders
                  </th>
                  <th className="px-4 py-3 font-semibold text-foreground">Spent</th>
                  <th className="px-4 py-3 font-semibold text-foreground">
                    Joined
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border">
                {loading ? (
                  <tr>
                    <td
                      colSpan={5}
                      className="px-4 py-10 text-center text-muted"
                    >
                      Loading customers…
                    </td>
                  </tr>
                ) : customers.length === 0 ? (
                  <tr>
                    <td
                      colSpan={5}
                      className="px-4 py-10 text-center text-muted"
                    >
                      No customers yet.
                    </td>
                  </tr>
                ) : (
                  customers.map((customer, index) => (
                    <motion.tr
                      key={customer.id}
                      initial={{ opacity: 0, y: 8 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{
                        duration: 0.42,
                        delay: Math.min(index * 0.04, 0.32),
                        ease: easeSoft,
                      }}
                      className="bg-card transition-colors hover:bg-surface/70"
                    >
                      <td className="px-4 py-3 font-medium text-foreground">
                        {customer.name}
                      </td>
                      <td className="px-4 py-3 text-muted">{customer.email}</td>
                      <td className="px-4 py-3 tabular-nums text-foreground">
                        {customer.orders}
                      </td>
                      <td className="px-4 py-3 tabular-nums text-foreground">
                        {formatPrice(customer.spent)}
                      </td>
                      <td className="px-4 py-3 text-muted">
                        {formatDate(customer.joined)}
                      </td>
                    </motion.tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </div>
      </Reveal>
    </div>
  );
}