'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { useAuthStore } from '@/lib/auth-store';
import { cn } from '@/lib/utils';

export default function PublicLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const { user } = useAuthStore();

  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="mx-auto flex h-14 max-w-7xl items-center px-4">
          <Link href="/" className="mr-6 flex items-center space-x-2">
            <span className="text-lg font-bold text-primary">GoodGo</span>
          </Link>

          <nav aria-label="Điều hướng chính" className="flex items-center space-x-1">
            <Link
              href="/"
              className={cn(
                'rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
                pathname === '/' ? 'bg-accent text-accent-foreground' : 'text-muted-foreground',
              )}
            >
              Trang chủ
            </Link>
            <Link
              href="/search"
              className={cn(
                'rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
                pathname.startsWith('/search')
                  ? 'bg-accent text-accent-foreground'
                  : 'text-muted-foreground',
              )}
            >
              Tìm kiếm
            </Link>
          </nav>

          <div className="ml-auto flex items-center space-x-3">
            {user ? (
              <>
                <span className="hidden text-sm text-muted-foreground sm:inline">
                  {user.fullName}
                </span>
                <Link href="/dashboard">
                  <Button size="sm">Bảng điều khiển</Button>
                </Link>
              </>
            ) : (
              <>
                <Link href="/login">
                  <Button variant="ghost" size="sm">
                    Đăng nhập
                  </Button>
                </Link>
                <Link href="/register">
                  <Button size="sm">Đăng ký</Button>
                </Link>
              </>
            )}
          </div>
        </div>
      </header>

      <main id="main-content">{children}</main>

      <footer className="border-t bg-muted/40">
        <div className="mx-auto max-w-7xl px-4 py-8">
          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
            <div>
              <h3 className="mb-3 text-sm font-semibold">GoodGo</h3>
              <p className="text-sm text-muted-foreground">
                Nền tảng bất động sản thông minh tại Việt Nam
              </p>
            </div>
            <div>
              <h3 className="mb-3 text-sm font-semibold">Loại BĐS</h3>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li><Link href="/search?propertyType=APARTMENT" className="hover:text-foreground">Căn hộ</Link></li>
                <li><Link href="/search?propertyType=HOUSE" className="hover:text-foreground">Nhà riêng</Link></li>
                <li><Link href="/search?propertyType=VILLA" className="hover:text-foreground">Biệt thự</Link></li>
                <li><Link href="/search?propertyType=LAND" className="hover:text-foreground">Đất nền</Link></li>
              </ul>
            </div>
            <div>
              <h3 className="mb-3 text-sm font-semibold">Khu vực</h3>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li><Link href="/search?city=Hồ Chí Minh" className="hover:text-foreground">TP. Hồ Chí Minh</Link></li>
                <li><Link href="/search?city=Hà Nội" className="hover:text-foreground">Hà Nội</Link></li>
                <li><Link href="/search?city=Đà Nẵng" className="hover:text-foreground">Đà Nẵng</Link></li>
                <li><Link href="/search?city=Nha Trang" className="hover:text-foreground">Nha Trang</Link></li>
              </ul>
            </div>
            <div>
              <h3 className="mb-3 text-sm font-semibold">Hỗ trợ</h3>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li><Link href="/login" className="hover:text-foreground">Đăng nhập</Link></li>
                <li><Link href="/register" className="hover:text-foreground">Đăng ký</Link></li>
              </ul>
            </div>
          </div>
          <div className="mt-8 border-t pt-4 text-center text-sm text-muted-foreground">
            © 2026 GoodGo. Tất cả quyền được bảo lưu.
          </div>
        </div>
      </footer>
    </div>
  );
}