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,
  formatDateTime,
  getAccountTypeLabel,
  getActivateStatusLabel,
  getRequestStatusLabel,
} from "@/lib/utils";

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>
        <dl className="mt-4 grid gap-x-8 gap-y-4 text-sm md:grid-cols-2 xl:grid-cols-3">
          <InfoItem label="이름" value={maestro.name} />
          <InfoItem label="이메일" value={maestro.email} />
          <InfoItem
            label="상태"
            value={getActivateStatusLabel(maestro.activateStatus)}
          />
          <InfoItem
            label="계정 유형"
            value={getAccountTypeLabel(maestro.accountType)}
          />
          <InfoItem
            label="DB 학생 수"
            value={detail.counts.players.toLocaleString()}
          />
          <InfoItem
            label="PlayerCount"
            value={maestro.playerCount.toLocaleString()}
          />
          <InfoItem
            label="사용 가능일"
            value={formatDateTime(maestro.availableActivateDateTime)}
          />
          <InfoItem
            label="약관 동의일"
            value={formatDateTime(maestro.acceptClausesDateTime)}
          />
          <InfoItem
            label="입장코드 수정"
            value={maestro.allowEditEnterCode === 1 ? "허용" : "비허용"}
          />
          <InfoItem
            label="체험 MaestroID"
            value={maestro.maestroTestID?.toString() ?? "-"}
          />
        </dl>
      </section>

      <section className="rounded-lg border bg-background p-5">
        <div className="flex items-end justify-between gap-3">
          <div>
            <h2 className="text-base font-semibold">학생 목록 요약</h2>
            <p className="mt-1 text-sm text-muted-foreground">
              전체 {detail.counts.players.toLocaleString()}명 중 최근 20명
            </p>
          </div>
        </div>
        <SimpleTable
          emptyText="등록된 학생이 없습니다."
          headers={["PlayerID", "이름", "입장코드", "AccountType"]}
          rows={detail.players.map((player) => [
            player.playerID,
            player.name,
            player.enterCode,
            player.accountType ?? "-",
          ])}
        />
      </section>

      <div className="grid gap-4 xl:grid-cols-2">
        <section className="rounded-lg border bg-background p-5">
          <h2 className="text-base font-semibold">연장 신청 이력</h2>
          <p className="mt-1 text-sm text-muted-foreground">
            전체 {detail.counts.extensionRequests.toLocaleString()}건 중 최근
            20건
          </p>
          <SimpleTable
            emptyText="연장 신청 이력이 없습니다."
            headers={["신청ID", "계정 유형", "신청일시", "상태"]}
            rows={detail.extensionRequests.map((request) => [
              request.maestroExtensionID,
              getAccountTypeLabel(request.accountType),
              formatDateTime(request.requestedDateTime),
              getRequestStatusLabel(request.status),
            ])}
          />
        </section>

        <section className="rounded-lg border bg-background p-5">
          <h2 className="text-base font-semibold">업그레이드 신청 이력</h2>
          <p className="mt-1 text-sm text-muted-foreground">
            전체 {detail.counts.upgradeRequests.toLocaleString()}건 중 최근 20건
          </p>
          <SimpleTable
            emptyText="업그레이드 신청 이력이 없습니다."
            headers={["신청ID", "현재", "요청", "신청일시", "상태"]}
            rows={detail.upgradeRequests.map((request) => [
              request.maestroUpgradeID,
              getAccountTypeLabel(request.registeredAccountType),
              getAccountTypeLabel(request.requestedAccountType),
              formatDateTime(request.requestedDateTime),
              getRequestStatusLabel(request.status),
            ])}
          />
        </section>
      </div>

      <section className="rounded-lg border bg-background p-5">
        <h2 className="text-base font-semibold">처리 로그</h2>
        <p className="mt-1 text-sm text-muted-foreground">
          전체 {detail.counts.logs.toLocaleString()}건 중 최근 30건
        </p>
        <SimpleTable
          emptyText="처리 로그가 없습니다."
          headers={["LogID", "유형", "처리일시", "내용"]}
          rows={detail.logs.map((log) => [
            log.maestroLogID,
            log.type,
            formatDateTime(log.logDateTime),
            log.remark,
          ])}
        />
      </section>
    </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>
  );
}

function InfoItem({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <dt className="text-xs font-medium text-muted-foreground">{label}</dt>
      <dd className="mt-1 break-words font-medium">{value}</dd>
    </div>
  );
}

function SimpleTable({
  headers,
  rows,
  emptyText,
}: {
  headers: string[];
  rows: Array<Array<string | number>>;
  emptyText: string;
}) {
  return (
    <div className="mt-4 overflow-hidden rounded-lg border">
      <div className="overflow-x-auto">
        <table className="w-full min-w-[560px] border-collapse text-sm">
          <thead className="bg-muted/60">
            <tr className="border-b">
              {headers.map((header) => (
                <th
                  className="h-10 px-3 text-left text-xs font-medium text-muted-foreground"
                  key={header}
                >
                  {header}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.length > 0 ? (
              rows.map((row, index) => (
                <tr className="border-b last:border-b-0" key={index}>
                  {row.map((cell, cellIndex) => (
                    <td
                      className="h-11 max-w-[360px] break-words px-3 align-middle"
                      key={cellIndex}
                    >
                      {cell}
                    </td>
                  ))}
                </tr>
              ))
            ) : (
              <tr>
                <td
                  className="h-24 px-3 text-center text-sm text-muted-foreground"
                  colSpan={headers.length}
                >
                  {emptyText}
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}