import { Box, CalendarCheck, Cuboid, MessageSquare, Store } from "lucide-react";
import { getAdminDashboardData } from "@/lib/admin-data";
import { Button } from "@/components/ui/button";

export default async function AdminDashboardPage() {
  const data = await getAdminDashboardData();
  const statCards = [
    { label: "Products", value: data.stats.products, icon: Box },
    { label: "Brands", value: data.stats.brands, icon: Store },
    { label: "Test Rides", value: data.stats.testRides, icon: CalendarCheck },
    { label: "Leads", value: data.stats.leads, icon: MessageSquare },
  ];

  return (
    <div className="space-y-6">
      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
        {statCards.map((card) => {
          const Icon = card.icon;
          return (
            <article className="rounded-xl border border-border bg-white p-4 shadow-sm" key={card.label}>
              <div className="flex items-center justify-between">
                <p className="text-xs font-semibold text-navy-muted">{card.label}</p>
                <Icon className="h-4 w-4 text-primary" />
              </div>
              <p className="mt-3 text-3xl font-black text-navy-deep">{card.value}</p>
              <p className="text-xs text-ev-deep">+12.7%</p>
            </article>
          );
        })}
        <article className="rounded-xl border border-border bg-white p-4 shadow-sm">
          <p className="text-xs font-semibold text-navy-muted">Conversion Rate</p>
          <p className="mt-3 text-3xl font-black text-navy-deep">2.94%</p>
          <p className="text-xs text-ev-deep">+0.1%</p>
        </article>
      </div>

      <div className="grid gap-5 xl:grid-cols-2">
        <Panel title="Recent Test Ride Bookings">
          {data.recentBookings.length ? (
            data.recentBookings.map((booking: any) => (
              <Row key={booking.id} title={booking.fullName} meta={`${booking.phone} · ${booking.status}`} />
            ))
          ) : (
            <Empty text="No bookings yet." />
          )}
        </Panel>
        <Panel title="Recent Leads">
          {data.recentLeads.length ? (
            data.recentLeads.map((lead: any) => (
              <Row key={lead.id} title={lead.fullName} meta={`${lead.phone} · ${lead.status ?? "NEW"}`} />
            ))
          ) : (
            <Empty text="No leads yet." />
          )}
        </Panel>
        <Panel title="Inventory Summary">
          <div className="grid gap-3 md:grid-cols-2">
            {data.inventory.slice(0, 6).map((item: any) => (
              <Row key={item.id} title={item.scooter?.name ?? item.scooterId} meta={`${item.status} · Qty ${item.quantity}`} />
            ))}
          </div>
        </Panel>
        <Panel title="Branch Performance">
          {data.branches.map((branch: any) => (
            <Row key={branch.id} title={`${branch.city}, ${branch.district}`} meta={`${branch.type} · ${branch.phone}`} />
          ))}
        </Panel>
        <Panel title="3D Asset Status Summary">
          <div className="grid gap-4 md:grid-cols-2">
            <div className="rounded-2xl bg-ev-soft p-4">
              <Cuboid className="h-6 w-6 text-ev" />
              <p className="mt-3 text-2xl font-black text-navy-deep">{data.assetSummary.published}</p>
              <p className="text-sm text-navy-muted">Published assets</p>
            </div>
            <div className="rounded-2xl bg-primary-soft p-4">
              <Cuboid className="h-6 w-6 text-primary" />
              <p className="mt-3 text-2xl font-black text-navy-deep">{data.assetSummary.pending}</p>
              <p className="text-sm text-navy-muted">Pending assets</p>
            </div>
          </div>
        </Panel>
      </div>

      <section className="rounded-xl border border-border bg-white p-5 shadow-sm">
        <div className="mb-4 flex items-center justify-between">
          <h2 className="text-base font-bold text-navy-deep">Product Asset Manager</h2>
          <Button href="/admin/products/new" size="sm" variant="green">+ Add New Product</Button>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full min-w-[900px] text-left text-sm">
            <thead className="bg-primary-soft">
              <tr>
                <th className="px-3 py-2">Scooter</th>
                <th className="px-3 py-2">Status</th>
                <th className="px-3 py-2">3D</th>
                <th className="px-3 py-2">Poster</th>
                <th className="px-3 py-2">Qty</th>
              </tr>
            </thead>
            <tbody>
              {data.inventory.slice(0, 6).map((item: any) => (
                <tr key={item.id} className="border-t border-border">
                  <td className="px-3 py-2 font-semibold text-navy-deep">{item.scooter?.name ?? item.scooterId}</td>
                  <td className="px-3 py-2">{item.status}</td>
                  <td className="px-3 py-2">{item.scooter?.asset3d ? "Yes" : "No"}</td>
                  <td className="px-3 py-2">-</td>
                  <td className="px-3 py-2">{item.quantity}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
    </div>
  );
}

function Panel({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="rounded-xl border border-border bg-white p-5 shadow-sm">
      <div className="mb-3 flex items-center justify-between">
        <h2 className="text-base font-bold text-navy-deep">{title}</h2>
        <button type="button" className="text-xs font-semibold text-primary">View All</button>
      </div>
      <div className="mt-4 space-y-3">{children}</div>
    </section>
  );
}

function Row({ title, meta }: { title: string; meta: string }) {
  return (
    <div className="rounded-xl border border-border bg-white px-4 py-3">
      <p className="font-bold text-navy-deep">{title}</p>
      <p className="text-sm text-navy-muted">{meta}</p>
    </div>
  );
}

function Empty({ text }: { text: string }) {
  return <p className="rounded-xl bg-slate-50 px-4 py-3 text-sm text-navy-muted">{text}</p>;
}