'use client'

import type { ComponentRenderProps } from '@json-render/react'

const statusColors: Record<string, string> = {
  active: 'bg-blue-100 text-blue-800',
  complete: 'bg-green-100 text-green-800',
  paused: 'bg-yellow-100 text-yellow-800',
  draft: 'bg-gray-200 text-gray-600',
  error: 'bg-red-100 text-red-800',
  sent: 'bg-blue-100 text-blue-800',
  paid: 'bg-green-100 text-green-800',
  pending: 'bg-yellow-100 text-yellow-800',
}

export function PageHeader({ element, children }: ComponentRenderProps) {
  const { title, subtitle, status, statusVariant, gradient, stats } = element.props as {
    title: string
    subtitle?: string
    status?: string
    statusVariant?: string
    gradient?: boolean
    stats?: Array<{ label: string; value: string }>
  }

  if (gradient) {
    return (
      <div className="bg-gradient-to-br from-indigo-600 to-purple-600 text-white px-4 py-3 sticky top-0 z-50 shadow-md">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-base font-semibold">{title}</h1>
            {subtitle && <p className="text-xs text-white/80 mt-0.5">{subtitle}</p>}
          </div>
          {status && (
            <span className="px-3 py-1 rounded-full text-xs font-semibold bg-white/20">
              {status}
            </span>
          )}
        </div>
        {stats && stats.length > 0 && (
          <div className="flex gap-4 mt-2">
            {stats.map((s, i) => (
              <div key={i} className="flex items-center gap-1.5 text-xs text-white/90">
                <span className="font-semibold">{s.value}</span>
                <span className="text-white/70">{s.label}</span>
              </div>
            ))}
          </div>
        )}
        {children}
      </div>
    )
  }

  return (
    <div className="bg-white rounded-xl p-5 mb-4 shadow-sm">
      <div className="flex items-start justify-between">
        <div>
          <h1 className="text-xl font-bold text-gray-900">{title}</h1>
          {subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
        </div>
        {status && (
          <span className={`px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wide ${statusColors[statusVariant || 'active'] || statusColors.active}`}>
            {status}
          </span>
        )}
      </div>
      {stats && stats.length > 0 && (
        <div className="flex gap-5 mt-3 flex-wrap">
          {stats.map((s, i) => (
            <span key={i} className="text-sm text-gray-500">
              <span className="font-medium text-gray-700">{s.value}</span> {s.label}
            </span>
          ))}
        </div>
      )}
      {children}
    </div>
  )
}
