// src/app/(protected)/dashboard/page.tsx
// ─────────────────────────────────────────────────────────────────────────────
// Dashboard — an example protected page.
// Only accessible when logged in (middleware guards this route).
// Shows how to use the api instance and how to log out.
// ─────────────────────────────────────────────────────────────────────────────

"use client";

import { useRouter } from "next/navigation";
import { LogOut } from "lucide-react";
import { Button } from "@/components/ui/button";
import { removeToken } from "@/lib/auth";

export default function DashboardPage() {
  const router = useRouter();

  // ── Logout Handler ──────────────────────────────────────────────────────────
  const handleLogout = () => {
    // 1. Remove token from localStorage and cookie
    removeToken();

    // 2. Redirect to login page
    router.push("/login");
    router.refresh(); // Force Next.js to re-evaluate middleware
  };

  return (
    <div className="space-y-6">
      {/* Page Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
          <p className="text-muted-foreground text-sm mt-1">
            Welcome back! You are logged in.
          </p>
        </div>

        {/* Logout Button */}
        <Button
          variant="outline"
          onClick={handleLogout}
          className="gap-2"
        >
          <LogOut className="w-4 h-4" />
          Logout
        </Button>
      </div>

      {/* 
        ──────────────────────────────────────────────────────────────────────
        Your existing dashboard content goes here.
        Use the `api` instance from @/lib/api to make authenticated API calls:

        import api from "@/lib/api";
        const { data } = await api.get("/ads/profile");

        The Bearer token is automatically attached by the Axios interceptor.
        ──────────────────────────────────────────────────────────────────────
      */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="rounded-xl border bg-card p-6">
          <p className="text-sm text-muted-foreground">Token is saved</p>
          <p className="text-lg font-semibold mt-1">Ready for API calls</p>
        </div>
      </div>
    </div>
  );
}