"use client";

import type { ReactNode } from "react";
import { useEffect } from "react";
import Link from "next/link";
import { Logo } from "@/components/atoms/logo";
import { ShieldCheckIcon } from "@heroicons/react/24/outline";
import { useAuthStore } from "@/features/auth/stores/auth.store";

interface CheckoutShellProps {
  children: ReactNode;
}

/**
 * CheckoutShell - Minimal shell for checkout flow
 *
 * Features:
 * - Logo linking to homepage
 * - Security badge
 * - Support link
 * - Clean, focused design
 */
export function CheckoutShell({ children }: CheckoutShellProps) {
  const hasCheckedAuth = useAuthStore(state => state.hasCheckedAuth);
  const checkAuth = useAuthStore(state => state.checkAuth);

  useEffect(() => {
    if (!hasCheckedAuth) {
      void checkAuth();
    }
  }, [checkAuth, hasCheckedAuth]);

  return (
    <div className="min-h-screen flex flex-col bg-background text-foreground">
      {/* Subtle background pattern */}
      <div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
      </div>

      <header className="sticky top-0 z-40 border-b border-border/50 bg-background/80 backdrop-blur-xl">
        <div className="max-w-[var(--cp-page-max-width)] mx-auto px-[var(--cp-page-padding)] py-3 flex items-center justify-between gap-4">
          {/* Logo */}
          <Link href="/" className="inline-flex items-center gap-3 min-w-0 group">
            <span className="inline-flex items-center justify-center h-11 w-11 rounded-xl bg-white border border-border/60 shadow-lg shadow-[#28A6E0]/10 transition-transform group-hover:scale-105">
              <Logo size={28} />
            </span>
            <span className="min-w-0 hidden sm:block">
              <span className="block text-base font-bold leading-tight truncate text-foreground">
                Assist Solutions
              </span>
              <span className="block text-xs text-muted-foreground leading-tight truncate">
                Secure Checkout
              </span>
            </span>
          </Link>

          {/* Security indicator */}
          <div className="flex items-center gap-4">
            <div className="hidden sm:flex items-center gap-2 text-sm text-muted-foreground">
              <ShieldCheckIcon className="h-5 w-5 text-success" />
              <span>Secure Checkout</span>
            </div>
            <Link
              href="/help"
              className="inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
            >
              Need Help?
            </Link>
          </div>
        </div>
      </header>

      <main className="flex-1">
        <div className="max-w-[var(--cp-page-max-width)] mx-auto px-[var(--cp-page-padding)] py-8 sm:py-12">
          {children}
        </div>
      </main>

      <footer className="border-t border-border/50 bg-muted/30">
        <div className="max-w-[var(--cp-page-max-width)] mx-auto px-[var(--cp-page-padding)] py-6">
          <div className="flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-muted-foreground">
            <div>© {new Date().getFullYear()} Assist Solutions</div>
            <div className="flex items-center gap-4">
              <Link href="#" className="hover:text-foreground transition-colors">
                Privacy Policy
              </Link>
              <Link href="#" className="hover:text-foreground transition-colors">
                Terms of Service
              </Link>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}
