"use client";

import { useQuery } from "@tanstack/react-query";
import { useParams } from "next/navigation";
import Link from "next/link";
import { api } from "@/lib/api";
import { formatDate } from "@/lib/format";
import { PageHeader } from "@/components/PageHeader";

export default function AccountDetailPage() {
    const id = String(useParams().id);
    const { data, isLoading } = useQuery({
        queryKey: ["staff-account", id],
        queryFn: () => api.staff.account(id),
    });

    if (isLoading || !data) return <p className="text-ink-3">Loading…</p>;

    return (
        <div className="grid gap-8">
            <PageHeader
                back={{ href: "/staff/accounts", label: "Accounts" }}
                title={data.account.name}
                subtitle={data.account.billing_email}
                record={[
                    { key: "Account", value: data.account.account_id, copy: true },
                    { key: "Status", value: data.account.status },
                    ...(data.account.paddle_customer_id ? [{ key: "Paddle", value: data.account.paddle_customer_id, copy: true }] : []),
                ]}
            />

            <Panel title="Instances">
                <ul className="grid gap-2">
                    {data.instances.map((i) => (
                        <li key={i.instance_id} className="flex flex-wrap justify-between gap-2">
                            <Link href={`/staff/instances/${i.instance_id}`} className="text-accent underline">
                                {i.name || i.instance_id}
                            </Link>
                            <span className="font-mono text-[0.82rem] text-ink-3">
                                {i.deployment} · {i.tier ?? "no tier"} · {i.status}
                            </span>
                        </li>
                    ))}
                    {data.instances.length === 0 && <li className="text-ink-3">None.</li>}
                </ul>
            </Panel>

            <Panel title="Subscriptions">
                <ul className="grid gap-2">
                    {data.subscriptions.map((s) => (
                        <li key={s.subscription_id} className="flex flex-wrap justify-between gap-2">
                            <span>
                                {s.tier.replace("_", " ")} · {s.term}
                            </span>
                            <span className="font-mono text-[0.82rem] text-ink-3">
                                {s.status} · renews {formatDate(s.current_period_end)}
                            </span>
                        </li>
                    ))}
                    {data.subscriptions.length === 0 && <li className="text-ink-3">None.</li>}
                </ul>
            </Panel>

            <Panel title="People">
                <ul className="grid gap-2">
                    {data.users.map((u) => (
                        <li key={u.user_id} className="flex flex-wrap justify-between gap-2">
                            <span className="font-mono text-[0.82rem]">{u.email}</span>
                            <span className="font-mono text-[0.82rem] text-ink-3">{u.verified_at ? `verified ${formatDate(u.verified_at)}` : "not verified"}</span>
                        </li>
                    ))}
                    {data.users.length === 0 && <li className="text-ink-3">None this is a cloud account, so its people sign in with their control-plane details.</li>}
                </ul>
            </Panel>

            <Panel title="Audit">
                <ul className="grid gap-1 font-mono text-[0.82rem]">
                    {data.audit.map((e, n) => (
                        <li key={n} className="flex flex-wrap justify-between gap-2 text-ink-2">
                            <span>
                                {e.action} · {e.actor}
                            </span>
                            <span className="tabular-nums text-ink-3">{formatDate(e.created_at)}</span>
                        </li>
                    ))}
                    {data.audit.length === 0 && <li className="text-ink-3">Nothing yet.</li>}
                </ul>
            </Panel>
        </div>
    );
}

function Panel({ title, children }: { title: string; children: React.ReactNode }) {
    return (
        <section className="grid gap-3 rounded border border-rule bg-panel p-5">
            <h2 className="text-xl">{title}</h2>
            {children}
        </section>
    );
}
