import Link from "next/link";
import { eq } from "drizzle-orm";
import { requireSession } from "@/lib/auth";
import { db } from "@/db";
import { users, departments, territories } from "@/db/schema";
import { ROLE_LABEL } from "@/lib/format";
import { departmentPaths } from "@/lib/rbac";
import { PageHeader, SectionTitle } from "@/components/ui";
import { ChangePasswordForm } from "./change-password-form";
import { ProfileForm } from "./profile-form";
import { Avatar } from "@/components/avatar";

export const dynamic = "force-dynamic";

export default async function AccountPage() {
  const session = await requireSession();

  const [me] = await db
    .select({
      jobTitle: users.jobTitle,
      phone: users.phone,
      birthDate: users.birthDate,
      gender: users.gender,
      avatar: users.avatarDataUrl,
      canEditStaffInfo: users.canEditStaffInfo,
      departmentId: users.departmentId,
      departmentName: departments.name,
      territoryName: territories.name,
    })
    .from(users)
    .leftJoin(departments, eq(users.departmentId, departments.id))
    .leftJoin(territories, eq(users.territoryId, territories.id))
    .where(eq(users.id, session.userId))
    .limit(1);

  const deptPath = me?.departmentId ? ((await departmentPaths(session.tenantId)).get(me.departmentId) ?? me.departmentName) : me?.departmentName;

  return (
    <>
      <PageHeader title="Tài khoản của tôi" />

      <div className="card mb-6 flex items-center gap-4 p-4">
        <Avatar name={session.fullName} src={me?.avatar} size={56} />
        <div className="flex min-w-0 flex-col gap-1">
          <div className="text-lg font-bold text-ink-700">{session.fullName}</div>
          <div className="text-sm text-ink-500">{session.email}</div>
          <div className="text-sm text-ink-400">
            {ROLE_LABEL[session.role]}
            {me?.jobTitle ? ` · ${me.jobTitle}` : ""}
            {deptPath ? ` · ${deptPath}` : ""}
            {me?.territoryName ? ` · ${me.territoryName}` : ""}
          </div>
        </div>
      </div>

      {me?.canEditStaffInfo && session.role === "SALES" && (
        <div className="mb-4">
          <Link href="/danh-muc/nhan-vien" className="btn-ghost">
            Danh sách nhân viên (quyền sửa thông tin nhân viên) →
          </Link>
        </div>
      )}

      <SectionTitle hint="chức vụ, phòng ban, khu vực do Ban giám đốc quản lý">Thông tin cá nhân</SectionTitle>
      <ProfileForm
        initial={{
          fullName: session.fullName,
          phone: me?.phone ?? "",
          birthDate: me?.birthDate ?? "",
          gender: me?.gender ?? "",
          avatar: me?.avatar ?? null,
        }}
      />

      <SectionTitle>Đổi mật khẩu</SectionTitle>
      <ChangePasswordForm />
    </>
  );
}