"use client";

import { useState, useEffect } from "react";
import {
  ChevronLeft,
  ChevronRight,
  ChevronsLeft,
  ChevronsRight,
  Search,
} from "lucide-react";

import { Button, buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import type { MaestroStudentsResult } from "@/lib/maestros";

type StudentsSectionProps = {
  maestroID: number;
};

export function StudentsSection({ maestroID }: StudentsSectionProps) {
  const [q, setQ] = useState("");
  const [submittedQ, setSubmittedQ] = useState("");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const [data, setData] = useState<MaestroStudentsResult | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [errorMessage, setErrorMessage] = useState("");

  useEffect(() => {
    let cancelled = false;

    const run = async () => {
      setIsLoading(true);
      setErrorMessage("");

      try {
        const params = new URLSearchParams({
          page: String(page),
          pageSize: String(pageSize),
          q: submittedQ,
        });

        const response = await fetch(
          `/api/maestros/${maestroID}/students?${params.toString()}`
        );

        if (!response.ok) {
          throw new Error("학생 목록을 불러오지 못했습니다.");
        }

        const result = (await response.json()) as MaestroStudentsResult;

        if (!cancelled) {
          setData(result);
        }
      } catch (err) {
        if (!cancelled) {
          setErrorMessage(
            err instanceof Error
              ? err.message
              : "학생 목록을 불러오지 못했습니다."
          );
        }
      } finally {
        if (!cancelled) {
          setIsLoading(false);
        }
      }
    };

    void run();

    return () => {
      cancelled = true;
    };
  }, [maestroID, submittedQ, page, pageSize]);

  function handleSearch(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setPage(1);
    setSubmittedQ(q);
  }

  return (
    <section className="rounded-lg border bg-background p-5">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <h2 className="text-base font-semibold">학생 목록</h2>
          <p className="mt-1 text-sm text-muted-foreground">
            {data
              ? `전체 ${data.totalCount.toLocaleString()}명${submittedQ ? ` — "${submittedQ}" 검색 결과` : ""}`
              : "로딩 중..."}
          </p>
        </div>
        <form className="flex gap-2" onSubmit={handleSearch}>
          <div className="relative">
            <Search
              aria-hidden="true"
              className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
            />
            <input
              className="h-8 w-44 rounded-md border bg-background pl-9 pr-3 text-sm outline-none transition-colors focus:border-ring focus:ring-3 focus:ring-ring/30"
              onChange={(e) => setQ(e.target.value)}
              placeholder="이름 검색"
              type="search"
              value={q}
            />
          </div>
          <Button size="sm" type="submit">
            검색
          </Button>
        </form>
      </div>

      {errorMessage ? (
        <p className="mt-4 text-sm text-destructive">{errorMessage}</p>
      ) : (
        <>
          <StudentTable isLoading={isLoading} result={data} />
          {data ? (
            <StudentPagination
              onPageChange={setPage}
              onPageSizeChange={(size) => {
                setPageSize(size);
                setPage(1);
              }}
              page={data.page}
              pageSize={pageSize}
              totalPages={data.totalPages}
            />
          ) : null}
        </>
      )}
    </section>
  );
}

function StudentTable({
  result,
  isLoading,
}: {
  result: MaestroStudentsResult | null;
  isLoading: boolean;
}) {
  if (isLoading || !result) {
    return (
      <div className="mt-4 flex h-24 items-center justify-center rounded-lg border">
        <p className="text-sm text-muted-foreground">로딩 중...</p>
      </div>
    );
  }

  return (
    <div className="mt-4 overflow-hidden rounded-lg border">
      <div className="overflow-x-auto">
        <table className="w-full min-w-[360px] border-collapse text-sm">
          <thead className="bg-muted/60">
            <tr className="border-b">
              <th className="h-10 px-3 text-left text-xs font-medium text-muted-foreground">
                PlayerID
              </th>
              <th className="h-10 px-3 text-left text-xs font-medium text-muted-foreground">
                이름
              </th>
              <th className="h-10 px-3 text-left text-xs font-medium text-muted-foreground">
                입장코드
              </th>
            </tr>
          </thead>
          <tbody>
            {result.items.length > 0 ? (
              result.items.map((player) => (
                <tr
                  className="border-b last:border-b-0"
                  key={player.playerID}
                >
                  <td className="h-11 px-3 align-middle">
                    <span className="font-mono text-xs tabular-nums">
                      {player.playerID}
                    </span>
                  </td>
                  <td className="h-11 px-3 align-middle">{player.name}</td>
                  <td className="h-11 px-3 align-middle">
                    <span className="font-mono text-xs">{player.enterCode}</span>
                  </td>
                </tr>
              ))
            ) : (
              <tr>
                <td
                  className="h-24 text-center text-sm text-muted-foreground"
                  colSpan={3}
                >
                  {result.q
                    ? "검색 결과가 없습니다."
                    : "등록된 학생이 없습니다."}
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function StudentPagination({
  page,
  pageSize,
  totalPages,
  onPageChange,
  onPageSizeChange,
}: {
  page: number;
  pageSize: number;
  totalPages: number;
  onPageChange: (page: number) => void;
  onPageSizeChange: (pageSize: number) => void;
}) {
  const showNav = totalPages > 1;
  const paginationItems = buildPaginationItems(page, totalPages);
  const firstVisiblePage = paginationItems[0] ?? 1;
  const lastVisiblePage = paginationItems.at(-1) ?? totalPages;
  const hasFirstPage = paginationItems.includes(1);
  const hasLastPage = paginationItems.includes(totalPages);
  const hasPreviousPageGroup = firstVisiblePage > 1;
  const hasNextPageGroup = lastVisiblePage < totalPages;

  return (
    <div className="mt-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <label className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground">페이지당</span>
        <select
          className="h-7 rounded-md border bg-background px-2 text-sm outline-none transition-colors focus:border-ring focus:ring-3 focus:ring-ring/30"
          onChange={(e) => onPageSizeChange(Number(e.target.value))}
          value={pageSize}
        >
          {[10, 20, 50].map((size) => (
            <option key={size} value={size}>
              {size}
            </option>
          ))}
        </select>
        <span className="text-sm text-muted-foreground">개 표시</span>
      </label>
      {showNav ? <nav
        aria-label="학생 목록 페이지"
        className="self-end flex flex-wrap items-center gap-1.5 sm:self-auto"
      >
        {!hasFirstPage ? (
          <Button
            aria-label="처음 페이지"
            className={buttonVariants({ variant: "outline", size: "icon-sm" })}
            onClick={() => onPageChange(1)}
            type="button"
          >
            <ChevronsLeft aria-hidden="true" className="size-4" />
          </Button>
        ) : null}

        {hasPreviousPageGroup ? (
          <Button
            aria-label="이전 5페이지"
            className={buttonVariants({ variant: "outline", size: "icon-sm" })}
            onClick={() => onPageChange(Math.max(1, page - 5))}
            type="button"
          >
            <ChevronLeft aria-hidden="true" className="size-4" />
          </Button>
        ) : null}

        {paginationItems.map((item) => (
          <Button
            aria-current={item === page ? "page" : undefined}
            className={cn(
              buttonVariants({
                variant: item === page ? "default" : "outline",
                size: "sm",
              }),
              "min-w-8 px-2"
            )}
            key={item}
            onClick={() => onPageChange(item)}
            type="button"
          >
            {item}
          </Button>
        ))}

        {hasNextPageGroup ? (
          <Button
            aria-label="다음 5페이지"
            className={buttonVariants({ variant: "outline", size: "icon-sm" })}
            onClick={() => onPageChange(Math.min(totalPages, page + 5))}
            type="button"
          >
            <ChevronRight aria-hidden="true" className="size-4" />
          </Button>
        ) : null}

        {!hasLastPage ? (
          <Button
            aria-label="끝 페이지"
            className={buttonVariants({ variant: "outline", size: "icon-sm" })}
            onClick={() => onPageChange(totalPages)}
            type="button"
          >
            <ChevronsRight aria-hidden="true" className="size-4" />
          </Button>
        ) : null}
      </nav> : null}
    </div>
  );
}

function buildPaginationItems(currentPage: number, totalPages: number) {
  const startPage = Math.max(1, currentPage - 2);
  const endPage = Math.min(totalPages, currentPage + 2);

  return Array.from(
    { length: endPage - startPage + 1 },
    (_, index) => startPage + index
  );
}