import { getSession } from "@/lib/session";
import { getDb } from "@/lib/db";
import { PageTitle, Card, Badge, fmtDate, fmtSar } from "@/components/panel/ui";

const KIND_LABEL: Record<string, string> = {
  hosting: "Hosting",
  managed: "Managed estate",
  project: "Delivery project",
  security: "Security service",
};

export default async function ClientServicesPage() {
  const session = (await getSession())!;
  const db = await getDb();
  const services = db.clientServices.filter((s) => s.userId === session.uid);

  return (
    <>
      <PageTitle
        title="My services"
        sub="Everything vira runs or builds for you, with live status and renewal dates."
      />
      <div className="grid gap-5 xl:grid-cols-2">
        {services.map((s) => (
          <Card key={s.id} className="p-6">
            <div className="flex flex-wrap items-start justify-between gap-3">
              <div>
                <p className="font-[family-name:var(--font-mono)] text-[0.66rem] uppercase tracking-[0.16em] text-tlo">
                  {KIND_LABEL[s.kind]}
                </p>
                <h2 className="mt-1 text-lg font-semibold text-thi">{s.name}</h2>
                <p className="mt-0.5 text-[0.88rem] text-tmid">{s.plan}</p>
              </div>
              <Badge value={s.status} />
            </div>
            <dl className="mt-5 grid grid-cols-2 gap-4 border-t border-white/10 pt-5 sm:grid-cols-4">
              <div>
                <dt className="text-[0.7rem] uppercase tracking-[0.12em] text-tlo">Uptime 90d</dt>
                <dd className="mt-1 font-[family-name:var(--font-mono)] text-[0.95rem] text-azure-bright tnum">
                  {s.uptime90d > 0 ? `${s.uptime90d}%` : "—"}
                </dd>
              </div>
              <div>
                <dt className="text-[0.7rem] uppercase tracking-[0.12em] text-tlo">Node</dt>
                <dd className="mt-1 font-[family-name:var(--font-mono)] text-[0.95rem] text-tmid">{s.node}</dd>
              </div>
              <div>
                <dt className="text-[0.7rem] uppercase tracking-[0.12em] text-tlo">
                  {s.kind === "project" ? "Milestone" : "Renews"}
                </dt>
                <dd className="mt-1 font-[family-name:var(--font-mono)] text-[0.95rem] text-tmid tnum">
                  {fmtDate(s.renewsAt)}
                </dd>
              </div>
              <div>
                <dt className="text-[0.7rem] uppercase tracking-[0.12em] text-tlo">Price</dt>
                <dd className="mt-1 font-[family-name:var(--font-mono)] text-[0.95rem] text-tmid tnum">
                  {fmtSar(s.priceSar)}
                  <span className="text-[0.75rem] text-tlo">/{s.period === "monthly" ? "mo" : "yr"}</span>
                </dd>
              </div>
            </dl>
          </Card>
        ))}
      </div>
    </>
  );
}