import type { Metadata } from 'next'
import { redirect } from 'next/navigation'
import Link from 'next/link'
import { createServerClient } from '@/lib/supabase/server'
import { Activity, Building2, Home, CreditCard, Bot, FileText } from 'lucide-react'
import { PlatformSignOut } from '@/components/platform/PlatformSignOut'
import { AGENT_API_URL } from '@/lib/api/config'

export const metadata: Metadata = {
  title: 'Platform',
  robots: { index: false, follow: false },
}

const API_BASE = AGENT_API_URL

async function isPlatformAdmin(): Promise<boolean> {
  try {
    const supabase = await createServerClient()
    const { data } = await supabase.auth.getSession()
    const token = data.session?.access_token
    if (!token) return false
    const res = await fetch(`${API_BASE}/agent/me`, {
      headers: { Authorization: `Bearer ${token}` },
      cache: 'no-store',
    })
    if (!res.ok) return false
    const body = await res.json()
    return body?.success === true && body?.data?.role === 'platform_admin'
  } catch {
    return false
  }
}

export default async function PlatformLayout({
  children,
}: {
  children: React.ReactNode
}) {
  let isAdmin = false
  try {
    const supabase = await createServerClient()
    const result = await supabase.auth.getUser()
    if (!result.data.user) redirect('/login')
    isAdmin = await isPlatformAdmin()
  } catch {
    redirect('/login')
  }

  if (!isAdmin) {
    return (
      <div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center p-6">
        <div className="max-w-md text-center">
          <Activity className="mx-auto h-10 w-10 text-indigo-600 dark:text-indigo-400" />
          <h1 className="mt-4 text-2xl font-bold text-gray-900 dark:text-white">
            Platform access required
          </h1>
          <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
            This area is restricted to IMBARAGA platform administrators.
          </p>
          <Link
            href="/dashboard"
            className="mt-6 inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700"
          >
            Back to dashboard
          </Link>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
      <aside className="fixed left-0 top-0 z-40 h-full w-60 flex flex-col border-r border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900" aria-label="Platform navigation">
        <div className="flex h-16 flex-shrink-0 items-center gap-2 border-b border-gray-200 px-4 dark:border-gray-700">
          <Activity className="h-7 w-7 text-indigo-600 dark:text-indigo-400" />
          <div>
            <p className="font-bold text-indigo-600 dark:text-indigo-400 leading-tight">IMBARAGA</p>
            <p className="text-[10px] font-semibold uppercase tracking-wide text-gray-400">Platform</p>
          </div>
        </div>
        <nav className="flex-1 min-h-0 overflow-y-auto p-4 space-y-1" role="navigation" aria-label="Platform">
          {[
            { name: 'Overview', href: '/platform', icon: Home },
            { name: 'Businesses', href: '/platform/businesses', icon: Building2 },
            { name: 'Payments', href: '/platform/payments', icon: CreditCard },
            { name: 'Agent Control', href: '/platform/control', icon: Bot },
            { name: 'Prompts & Landing', href: '/platform/content', icon: FileText },
          ].map(item => {
            const Icon = item.icon
            return (
              <Link
                key={item.name}
                href={item.href}
                className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
              >
                <Icon className="h-5 w-5 flex-shrink-0" aria-hidden="true" />
                {item.name}
              </Link>
            )
          })}
        </nav>
        <div className="flex-shrink-0 border-t border-gray-200 p-4 dark:border-gray-700">
          <PlatformSignOut />
        </div>
      </aside>
      <div className="lg:ml-60">
        <main className="p-4 lg:p-6" id="main-content" role="main">
          {children}
        </main>
      </div>
    </div>
  )
}