import { redirect } from "next/navigation";
import { getAuthContext } from "@/lib/auth/auth";
import { db } from "@/lib/db";
import { Card, CardHeader, CardBody } from "@/components/ui/Card";
import { StatusBadge } from "@/components/ui/Badge";

export default async function DashboardPage() {
  const auth = await getAuthContext();
  if (!auth) redirect("/login");

  const membership = await db.organizationUser.findFirst({
    where: { userId: auth.user.id, status: "ACTIVE" },
    include: { organization: true, role: true },
    orderBy: { invitedAt: "asc" },
  });

  if (!membership) {
    return (
      <Card>
        <CardBody>
          <p className="text-sm text-ink-muted">
            You're not a member of any organization yet. This shouldn't happen right after registering — try refreshing.
          </p>
        </CardBody>
      </Card>
    );
  }

  const staffCount = await db.organizationUser.count({ where: { organizationId: membership.organizationId } });

  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-lg font-semibold text-ink">{membership.organization.name}</h1>
        <p className="text-sm text-ink-muted">
          Signed in as {auth.user.fullName} · {membership.role.name}
        </p>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <MetricCard label="Organization status" value={<StatusBadge status={membership.organization.status} />} />
        <MetricCard label="Staff members" value={String(staffCount)} />
        <MetricCard label="Currency" value={membership.organization.currency} />
        <MetricCard label="Timezone" value={membership.organization.timezone} />
      </div>

      <Card>
        <CardHeader
          title="Network & operations"
          description="These modules aren't built yet — shown here so the dashboard's final shape is visible."
        />
        <CardBody className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          <NotConfigured label="Routers online" phase="Phase 2" />
          <NotConfigured label="Active sessions" phase="Phase 3" />
          <NotConfigured label="Vouchers available" phase="Phase 4" />
          <NotConfigured label="Today's revenue" phase="Phase 5" />
          <NotConfigured label="Open alerts" phase="Phase 7" />
          <NotConfigured label="Failed payments" phase="Phase 5" />
        </CardBody>
      </Card>
    </div>
  );
}

function MetricCard({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <Card>
      <CardBody>
        <p className="text-xs font-medium text-ink-muted">{label}</p>
        <div className="mt-1 text-lg font-semibold text-ink">{value}</div>
      </CardBody>
    </Card>
  );
}

function NotConfigured({ label, phase }: { label: string; phase: string }) {
  return (
    <div className="rounded border border-dashed border-border px-4 py-3">
      <p className="text-xs font-medium text-ink-muted">{label}</p>
      <p className="mt-1 text-sm text-ink-faint">Not available yet — {phase}</p>
    </div>
  );
}