"use client";

import { type ReactNode, useState } from "react";
import { OrganizationTree } from "@/components/organization-tree";
import { PageHeader, PaperCard } from "@/components/ui";
import { t } from "@/lib/i18n";
import type { OrganizationNode } from "@/types/view-models";

export default function OrganizationPage(): ReactNode {
  const [selected, setSelected] = useState<OrganizationNode | null>(null);

  return (
    <div style={{ padding: 32, maxWidth: 1200, margin: "0 auto" }}>
      <PageHeader
        title={t("admin.organization.title")}
        description="学校 → 年级 → 班级 三级组织架构"
      />

      <div className="flex gap-4">
        <PaperCard className="p-4" style={{ flex: 1 }}>
          <h3
            style={{
              fontFamily: "var(--font-serif)",
              fontSize: 14,
              color: "var(--color-ink-muted)",
              marginBottom: 12,
              textTransform: "uppercase",
              letterSpacing: "0.05em",
            }}
          >
            组织树
          </h3>
          <OrganizationTree onSelect={setSelected} />
        </PaperCard>

        <PaperCard className="p-4" style={{ width: 320 }}>
          <h3
            style={{
              fontFamily: "var(--font-serif)",
              fontSize: 14,
              color: "var(--color-ink-muted)",
              marginBottom: 12,
              textTransform: "uppercase",
              letterSpacing: "0.05em",
            }}
          >
            节点详情
          </h3>
          {selected ? (
            <dl style={{ fontSize: 13, color: "var(--color-ink)" }}>
              <div style={{ marginBottom: 8 }}>
                <dt style={{ color: "var(--color-ink-muted)", fontSize: 11 }}>
                  名称
                </dt>
                <dd
                  style={{
                    margin: 0,
                    fontFamily: "var(--font-serif)",
                    fontSize: 16,
                  }}
                >
                  {selected.name}
                </dd>
              </div>
              <div style={{ marginBottom: 8 }}>
                <dt style={{ color: "var(--color-ink-muted)", fontSize: 11 }}>
                  类型
                </dt>
                <dd style={{ margin: 0 }}>
                  {selected.type === "school"
                    ? "学校"
                    : selected.type === "grade"
                      ? "年级"
                      : "班级"}
                </dd>
              </div>
              <div style={{ marginBottom: 8 }}>
                <dt style={{ color: "var(--color-ink-muted)", fontSize: 11 }}>
                  ID
                </dt>
                <dd
                  style={{
                    margin: 0,
                    fontFamily: "var(--font-mono)",
                    fontSize: 11,
                  }}
                >
                  {selected.id}
                </dd>
              </div>
              <div style={{ marginBottom: 8 }}>
                <dt style={{ color: "var(--color-ink-muted)", fontSize: 11 }}>
                  子节点数
                </dt>
                <dd style={{ margin: 0 }}>{selected.childrenCount}</dd>
              </div>
              <div style={{ marginBottom: 8 }}>
                <dt style={{ color: "var(--color-ink-muted)", fontSize: 11 }}>
                  排序
                </dt>
                <dd style={{ margin: 0 }}>{selected.sortOrder}</dd>
              </div>
            </dl>
          ) : (
            <p style={{ fontSize: 13, color: "var(--color-ink-muted)" }}>
              选择左侧节点查看详情
            </p>
          )}
        </PaperCard>
      </div>
    </div>
  );
}
