"use client";

import { type ReactNode, useState, useMemo } from "react";
import { useSchools } from "@/hooks/use-school";
import {
  PaperCard,
  Input,
  LoadingState,
  ErrorState,
  EmptyState,
  Table,
  TableRow,
  TableCell,
} from "@/components/ui";
import { t } from "@/lib/i18n";
import type { SchoolViewModel } from "@/types/view-models";

export default function SchoolsPage(): ReactNode {
  const { data, loading, error } = useSchools();
  const [search, setSearch] = useState("");

  const filtered = useMemo<SchoolViewModel[]>(() => {
    if (!data) return [];
    const q = search.trim().toLowerCase();
    if (!q) return data;
    return data.filter(
      (s) =>
        s.name.toLowerCase().includes(q) ||
        s.code.toLowerCase().includes(q) ||
        (s.principalName ?? "").toLowerCase().includes(q),
    );
  }, [data, search]);

  return (
    <>
      <PaperCard className="p-4 mb-4">
        <Input
          type="search"
          placeholder={t("admin.common.search")}
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          style={{ width: 240 }}
        />
      </PaperCard>

      <PaperCard className="p-4">
        {loading && <LoadingState />}
        {error && <ErrorState message={error.message} />}
        {!loading && !error && (
          <>
            {filtered.length === 0 ? (
              <EmptyState message={t("admin.common.empty")} />
            ) : (
              <Table
                headers={[
                  t("admin.common.school"),
                  t("admin.system.schoolCode"),
                  t("admin.system.address"),
                  t("admin.system.contactPhone"),
                  t("admin.system.contactEmail"),
                  t("admin.school.principal"),
                  t("admin.common.grade"),
                  t("admin.common.class"),
                  t("admin.dashboard.totalStudents"),
                  t("admin.dashboard.totalTeachers"),
                ]}
              >
                {filtered.map((school) => (
                  <TableRow key={school.id}>
                    <TableCell style={{ fontWeight: 500 }}>
                      {school.name}
                    </TableCell>
                    <TableCell
                      style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}
                    >
                      {school.code}
                    </TableCell>
                    <TableCell>{school.address}</TableCell>
                    <TableCell
                      style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}
                    >
                      {school.contactPhone}
                    </TableCell>
                    <TableCell
                      style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}
                    >
                      {school.contactEmail}
                    </TableCell>
                    <TableCell>{school.principalName ?? "—"}</TableCell>
                    <TableCell>{school.gradeCount}</TableCell>
                    <TableCell>{school.classCount}</TableCell>
                    <TableCell>{school.studentCount}</TableCell>
                    <TableCell>{school.teacherCount}</TableCell>
                  </TableRow>
                ))}
              </Table>
            )}
          </>
        )}
      </PaperCard>
    </>
  );
}
