import { Suspense } from 'react';
import { redirect } from 'next/navigation';
import { getServerSession } from '@/lib/auth/getServerSession';
import { PERMISSIONS } from '@/lib/permissions/permissions';
import AccessDenied from '@/components/admin/errors/AccessDenied';
import BannerForm from '@/components/admin/banners/BannerForm';
import { cookies } from 'next/headers';
import Link from 'next/link';
import { SESSION_COOKIE } from '@/lib/auth/requireAuth';
import { Metadata } from 'next';

interface Props {
  params: Promise<{ id: string }>;
}

export const metadata: Metadata = { title: 'Edit Banner' };

// ─── Data Fetchers ──────────────────────────────────────────────────────────
async function getBanner(id: string, sessionToken: string) {
  try {
    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
    const res = await fetch(`${baseUrl}/api/banners/${id}`, {
      cache: 'no-store',
      headers: { Authorization: `Bearer ${sessionToken}` },
    });

    if (!res.ok) return null;

    const data = await res.json();
    return data.data;
  } catch {
    return null;
  }
}

async function getLanguages(sessionToken: string) {
  try {
    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
    const res = await fetch(`${baseUrl}/api/getlanguages`, {
      cache: 'no-store',
      headers: { Authorization: `Bearer ${sessionToken}` },
    });

    if (!res.ok) return [];

    const data = await res.json();
    return data.data || [];
  } catch {
    return [];
  }
}

// ─── Page Content ───────────────────────────────────────────────────────────
async function EditBannerContent({ params }: Props) {
  const cookieStore = await cookies();
  const sessionId = cookieStore.get(SESSION_COOKIE)?.value;
  if (!sessionId) redirect('/admin/login');

  const session = await getServerSession();
  if (!session) redirect('/admin/login');

  if (!session.permissions.includes(PERMISSIONS.BANNERS_UPDATE)) {
    return <AccessDenied />;
  }

  const { id } = await params;
  const [banner, languages] = await Promise.all([
    getBanner(id, sessionId),
    getLanguages(sessionId),
  ]);

  if (!banner) {
    return (
      <div className="p-6 text-center">
        <h2
          className="text-xl font-semibold mb-2"
          style={{ color: 'var(--color-text)' }}
        >
          Banner not found
        </h2>
        <p className="text-sm mb-6" style={{ color: 'var(--color-text-secondary)' }}>
          The banner you are trying to edit does not exist or has been deleted.
        </p>
        <Link
          href="/admin/dashboard/banners"
          className="inline-block px-4 py-2 rounded-lg text-sm font-medium transition-all hover:opacity-90"
          style={{ background: 'var(--color-cta)', color: 'white' }}
        >
          Back to Banners
        </Link>
      </div>
    );
  }

  return (
    <>
      <div className="mb-6">
        <h1
          className="text-2xl font-semibold"
          style={{ color: 'var(--color-text)' }}
        >
          Edit Banner
        </h1>
        <p
          className="text-sm mt-1"
          style={{ color: 'var(--color-text-secondary)' }}
        >
          Update banner details and images
        </p>
      </div>

      <BannerForm
        mode="edit"
        initialData={banner}
        languages={languages}
      />
    </>
  );
}

export default function EditBannerPage({ params }: Props) {
  return (
    <div className="sm:p-6">
      <Suspense fallback={<div className="skeleton h-96 rounded-lg" />}>
        <EditBannerContent params={params} />
      </Suspense>
    </div>
  );
}