import Link from "next/link";
import { logoutAction } from "@/app/actions/session";
import { getMailEntryUrl, type SessionUser } from "@/lib/auth";

type SiteHeaderProps = {
  user: SessionUser | null;
};

function initials(displayName: string) {
  const cleaned = displayName.replace(/\s+/g, "");
  return cleaned.slice(0, 2).toUpperCase();
}

export function SiteHeader({ user }: SiteHeaderProps) {
  const mailEntryUrl = getMailEntryUrl(user);

  return (
    <header className="mx-auto flex w-full max-w-7xl items-center justify-between px-6 py-6 lg:px-10">
      <Link href="/" className="flex items-center gap-3">
        <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-slate-950 text-sm font-semibold text-white shadow-lg shadow-blue-500/10">
          OM
        </div>
        <div>
          <p className="text-base font-semibold text-slate-950">오피셜메일</p>
          <p className="text-sm text-slate-500">
            혼자 시작하는 사업자를 위한 무료 기업메일
          </p>
        </div>
      </Link>

      {user ? (
        <div className="flex items-center gap-3">
          <a
            href={mailEntryUrl}
            className="group inline-flex items-center gap-3 rounded-full border border-white/70 bg-white/80 px-2.5 py-2 pr-4 shadow-[0_12px_40px_rgba(15,23,42,0.06)] backdrop-blur-xl transition-all duration-200 hover:-translate-y-0.5 hover:border-blue-200 hover:shadow-[0_18px_50px_rgba(37,99,235,0.12)]"
          >
            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[linear-gradient(135deg,#2563eb,#0ea5e9)] text-sm font-semibold text-white">
              {initials(user.displayName)}
            </div>
            <div className="hidden text-left sm:block">
              <p className="text-sm font-semibold text-slate-950">메일 사이트</p>
              <p className="text-xs text-slate-500">
                {user.mailConfigured ? user.mailbox : "설정을 완료하면 바로 진입됩니다"}
              </p>
            </div>
          </a>
          <form action={logoutAction}>
            <button
              type="submit"
              className="om-btn-secondary rounded-full px-4 py-2 text-sm text-slate-700"
            >
              로그아웃
            </button>
          </form>
        </div>
      ) : (
        <div className="flex items-center gap-3">
          <Link
            href="/login"
            className="om-btn-secondary h-11 px-5 text-sm text-slate-700"
          >
            로그인
          </Link>
          <Link
            href="/login"
            className="om-btn-primary h-11 px-5 text-sm"
          >
            무료로 시작하기
          </Link>
        </div>
      )}
    </header>
  );
}