"use client";

import Link from "next/link";
import { useState } from "react";
import { csrfFetch } from "@/lib/client-csrf";

export function OwnerShell({ email, children }: { email: string; children: React.ReactNode }) {
  const [signingOut, setSigningOut] = useState(false);

  async function signOut() {
    setSigningOut(true);
    try {
      await csrfFetch("/api/auth/logout", { method: "POST" });
      window.location.href = "/owner/login";
    } catch {
      setSigningOut(false);
    }
  }

  return (
    <div className="min-h-screen bg-[#10171b] text-white">
      <header className="border-b border-white/10 bg-[#0b1014]">
        <div className="mx-auto flex min-h-20 max-w-[96rem] flex-wrap items-center gap-4 px-5 py-4 sm:px-8">
          <div className="min-w-0 flex-1">
            <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-[#c4a882]">Zelosity private</p>
            <p className="mt-1 truncate text-xl font-semibold">Owner portal</p>
            <p className="truncate text-xs text-white/55">{email}</p>
          </div>
          <nav className="flex flex-wrap items-center gap-2" aria-label="Owner portal">
            <Link href="/owner/inquiries" className="rounded-full border border-white/15 px-4 py-2 text-sm font-semibold hover:bg-white/10">
              Inquiry timeline
            </Link>
            <Link href="/owner/operations" className="rounded-full border border-white/15 px-4 py-2 text-sm font-semibold hover:bg-white/10">
              System readiness
            </Link>
            <button
              type="button"
              disabled={signingOut}
              onClick={() => void signOut()}
              className="rounded-full bg-[#c4a882] px-4 py-2 text-sm font-bold text-[#11171b] disabled:opacity-60"
            >
              {signingOut ? "Signing out…" : "Sign out"}
            </button>
          </nav>
        </div>
      </header>
      <main className="mx-auto max-w-[96rem] px-5 py-7 sm:px-8 sm:py-10">{children}</main>
    </div>
  );
}