import Link from 'next/link'
import { ChevronRight } from 'lucide-react'
import PageRenderer, { type Block } from '@/components/PageRenderer'

interface SidebarItem {
  label: string
  href: string
  active?: boolean
}

interface CmsPageProps {
  title: string
  subtitle?: string
  blocks: Block[]
  sidebar?: SidebarItem[]
  breadcrumb?: { label: string; href?: string }[]
}

function HeroBanner({ title, subtitle }: { title: string; subtitle?: string }) {
  return (
    <div className="relative bg-[#1e3a5f] text-white py-16 overflow-hidden">
      <div className="absolute inset-0 dot-pattern opacity-40" />
      <div className="relative max-w-7xl mx-auto px-4">
        <h1 className="text-3xl sm:text-4xl font-display font-bold">{title}</h1>
        {subtitle && <p className="text-white/60 mt-2">{subtitle}</p>}
      </div>
    </div>
  )
}

function Breadcrumb({ items }: { items: { label: string; href?: string }[] }) {
  return (
    <nav className="flex items-center gap-2 text-sm text-white/60 mb-2">
      <Link href="/" className="hover:text-white transition-colors">Beranda</Link>
      {items.map((item, i) => (
        <span key={i} className="flex items-center gap-2">
          <ChevronRight size={12} />
          {item.href ? (
            <Link href={item.href} className="hover:text-white transition-colors">{item.label}</Link>
          ) : (
            <span className="text-white">{item.label}</span>
          )}
        </span>
      ))}
    </nav>
  )
}

function Sidebar({ items, title }: { items: SidebarItem[]; title?: string }) {
  return (
    <div className="bg-gray-50 rounded-2xl p-6 sticky top-24">
      {title && <h3 className="font-display font-bold text-lg text-[#1e3a5f] mb-4">{title}</h3>}
      <div className="space-y-1">
        {items.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className={`flex items-center gap-2 px-3 py-2.5 rounded-xl text-sm transition-all ${
              item.active
                ? 'bg-[#1e3a5f] text-white font-medium'
                : 'text-gray-600 hover:bg-gray-100 hover:text-[#1e3a5f]'
            }`}
          >
            {item.label}
            <ChevronRight size={14} className="ml-auto opacity-50" />
          </Link>
        ))}
      </div>
    </div>
  )
}

export default function CmsPage({ title, subtitle, blocks, sidebar, breadcrumb }: CmsPageProps) {
  return (
    <>
      <div className="relative bg-[#1e3a5f] text-white py-16 overflow-hidden">
        <div className="absolute inset-0 dot-pattern opacity-40" />
        <div className="relative max-w-7xl mx-auto px-4">
          {breadcrumb && <Breadcrumb items={breadcrumb} />}
          <h1 className="text-3xl sm:text-4xl font-display font-bold">{title}</h1>
          {subtitle && <p className="text-white/60 mt-2">{subtitle}</p>}
        </div>
      </div>
      <div className="max-w-7xl mx-auto px-4 py-12">
        {sidebar ? (
          <div className="grid lg:grid-cols-3 gap-8">
            <div className="lg:col-span-2">
              <PageRenderer blocks={blocks} />
            </div>
            <div>
              <Sidebar items={sidebar} />
            </div>
          </div>
        ) : (
          <PageRenderer blocks={blocks} />
        )}
      </div>
    </>
  )
}