import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft } from "lucide-react";

import { buttonVariants } from "@/components/ui/button";
import { getMaestroDetail } from "@/lib/maestros";
import {
  formatDate,
  getAccountTypeLabel,
  getActivateStatusLabel,
} from "@/lib/utils";
import { MaestroEditForm } from "./MaestroEditForm";
import { StudentsSection } from "./StudentsSection";
import { ExtensionRequestsSection } from "./ExtensionRequestsSection";
import { UpgradeRequestsSection } from "./UpgradeRequestsSection";
import { LogsSection } from "./LogsSection";

type MaestroDetailPageProps = {
  params: Promise<{
    maestroId: string;
  }>;
};

export default async function MaestroDetailPage({
  params,
}: MaestroDetailPageProps) {
  const { maestroId } = await params;
  const maestroID = Number(maestroId);

  if (!Number.isInteger(maestroID) || maestroID <= 0) {
    notFound();
  }

  const detail = await getMaestroDetail(maestroID);

  if (!detail) {
    notFound();
  }

  const { maestro } = detail;

  return (
    <section className="space-y-5">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <Link
            className={buttonVariants({
              variant: "ghost",
              size: "sm",
              className: "mb-2 -ml-2",
            })}
            href="/maestros"
          >
            <ArrowLeft className="size-4" aria-hidden="true" />
            목록
          </Link>
          <h1 className="text-2xl font-semibold tracking-normal">
            {maestro.name}
          </h1>
          <p className="mt-1 text-sm text-muted-foreground">
            MaestroID {maestro.maestroID} · {maestro.email}
          </p>
        </div>
      </div>

      <div className="grid gap-4 lg:grid-cols-4">
        <SummaryCard
          label="상태"
          value={getActivateStatusLabel(maestro.activateStatus)}
        />
        <SummaryCard
          label="계정 유형"
          value={getAccountTypeLabel(maestro.accountType)}
        />
        <SummaryCard
          label="학생 수"
          value={detail.counts.players.toLocaleString()}
        />
        <SummaryCard
          label="사용 가능일"
          value={formatDate(maestro.availableActivateDateTime)}
        />
      </div>

      <section className="rounded-lg border bg-background p-5">
        <h2 className="text-base font-semibold">기본 정보</h2>
        <MaestroEditForm
          maestro={detail.maestro}
          playerCount={detail.counts.players}
        />
      </section>

      <StudentsSection maestroID={maestroID} />

      <div className="grid gap-4 xl:grid-cols-2">
        <ExtensionRequestsSection
          accountType={maestro.accountType}
          extensionRequests={detail.extensionRequests}
          maestroID={maestroID}
          totalCount={detail.counts.extensionRequests}
        />

        <UpgradeRequestsSection
          accountType={maestro.accountType}
          activateStatus={maestro.activateStatus}
          maestroID={maestroID}
          totalCount={detail.counts.upgradeRequests}
          upgradeRequests={detail.upgradeRequests}
        />
      </div>

      <LogsSection maestroID={maestroID} />
    </section>
  );
}

function SummaryCard({ label, value }: { label: string; value: string }) {
  return (
    <article className="rounded-lg border bg-background p-4">
      <p className="text-xs font-medium text-muted-foreground">{label}</p>
      <p className="mt-2 text-lg font-semibold">{value}</p>
    </article>
  );
}