"use client";

// Genesis (docs/DESIGN.md) Navigation: sticky แถบบน 56px + backdrop-blur + เส้นแบ่ง
// ล่าง 1px — โลโก้ซ้าย / ผู้ใช้ + ออกจากระบบ ขวา ใช้ที่หน้าแรก /note และหน้า
// เครื่องมือทดสอบ /note/dev — หน้ากลุ่ม /note/groups/[typeId] เลิกใช้ตาม
// redesign 2026-09-24 (ไม่มี navbar เหลือ back link)
//
// ฉบับ token 2026-10-30: เป็น client component อ่าน session จาก localStorage
// ("note-auth") เอง — มี = ชื่อผู้ใช้ + ปุ่มออกจากระบบ (ล้าง token), ไม่มี =
// hint "เข้าผ่านลิงก์ e-Court" (ไม่มีปุ่ม logout — ไม่มี session ให้ล้าง) ·
// อ่านหลัง mount กัน hydration mismatch (server ไม่รู้ localStorage)
import Link from "next/link";
import { useEffect, useState } from "react";

import LogoutButton from "./LogoutButton";
import { readNoteSession, type NoteSession } from "@/lib/note-session";

export default function AppNav() {
  const [session, setSession] = useState<NoteSession | null>(null);
  useEffect(() => {
    setSession(readNoteSession());
  }, []);

  return (
    // appnav: hook ของกฎ coarse 44px ให้ปุ่มในแถบนี้ (globals.css — อย่าถอด)
    <header className="appnav sticky top-0 z-40 h-14 border-b border-line bg-white/80 backdrop-blur">
      <div className="mx-auto flex h-full max-w-7xl items-center justify-between gap-3 px-4 sm:px-6">
        {/* ชื่อแบรนด์เป็น ink ตามกฎ "น้ำเงินเฉพาะของ interactive" — tile JN น้ำเงินคือ
            แบรนด์มาร์ก (สืบต่อจากหน้าสรุป/login ดั้งเดิม) ทั้งแถบเป็นลิงก์กลับหน้าหลัก */}
        <Link
          href="/note"
          className="focus-ring flex min-w-0 items-center gap-2.5 rounded-md"
        >
          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-xs font-bold text-white">
            JN
          </span>
          <span className="font-display truncate text-[15px] font-bold tracking-tight text-ink">
            Judge&apos;s Note
          </span>
        </Link>
        <div className="flex min-w-0 items-center gap-3">
          <p className="hidden min-w-0 truncate text-sm text-ink-soft sm:block">
            {session?.username ?? "เข้าผ่านลิงก์ e-Court"}
          </p>
          {session !== null && <LogoutButton onCleared={() => setSession(null)} />}
        </div>
      </div>
    </header>
  );
}