import * as React from 'react'
import { cn } from '../core/cn'

interface DetailField {
  label: string
  value: React.ReactNode
  span?: 1 | 2
}

interface DetailTab {
  label: string
  value: string
  content: React.ReactNode
  count?: number
}

interface TimelineEvent {
  id: string
  title: string
  description?: string
  timestamp: string
  icon?: React.ReactNode
  variant?: 'default' | 'success' | 'warning' | 'error'
}

interface DetailPageProps {
  title: string
  subtitle?: string
  badge?: React.ReactNode
  avatar?: React.ReactNode
  actions?: React.ReactNode
  onBack?: () => void
  fields: DetailField[]
  tabs?: DetailTab[]
  activeTab?: string
  onTabChange?: (value: string) => void
  timeline?: TimelineEvent[]
  className?: string
}

const variantDotColors = {
  default: 'bg-primary',
  success: 'bg-green-500',
  warning: 'bg-amber-500',
  error: 'bg-red-500',
}

export function detailPage({
  title, subtitle, badge, avatar, actions, onBack,
  fields, tabs, activeTab, onTabChange, timeline, className,
}: DetailPageProps): React.ReactElement {
  return (
    <div className={cn('space-y-6', className)}>
      {/* Header */}
      <div className="flex items-start justify-between border-b pb-4">
        <div className="flex items-start gap-4">
          {onBack && (
            <button onClick={onBack} className="mt-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md hover:bg-muted">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m15 18-6-6 6-6"/></svg>
            </button>
          )}
          {avatar && <div className="size-12 shrink-0 overflow-hidden rounded-full bg-muted">{avatar}</div>}
          <div className="space-y-1">
            <div className="flex items-center gap-3">
              <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
              {badge}
            </div>
            {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
          </div>
        </div>
        {actions && <div className="flex items-center gap-2">{actions}</div>}
      </div>

      {/* Fields grid */}
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        {fields.map((field, i) => (
          <div key={i} className={cn('space-y-1', field.span === 2 && 'md:col-span-2')}>
            <p className="text-sm text-muted-foreground">{field.label}</p>
            <div className="text-sm font-medium">{field.value}</div>
          </div>
        ))}
      </div>

      {/* Tabs */}
      {tabs && tabs.length > 0 && (
        <div className="space-y-4">
          <nav className="flex gap-4 border-b">
            {tabs.map((tab) => (
              <button
                key={tab.value}
                type="button"
                onClick={() => onTabChange?.(tab.value)}
                className={cn(
                  'inline-flex items-center gap-2 border-b-2 px-1 pb-3 text-sm font-medium transition-colors',
                  activeTab === tab.value ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'
                )}
              >
                {tab.label}
                {tab.count !== undefined && (
                  <span className="inline-flex h-5 items-center rounded-full bg-muted px-2 text-xs font-medium">{tab.count}</span>
                )}
              </button>
            ))}
          </nav>
          {tabs.find(t => t.value === activeTab)?.content}
        </div>
      )}

      {/* Timeline */}
      {timeline && timeline.length > 0 && (
        <div className="space-y-3">
          <h3 className="text-sm font-medium text-muted-foreground">Activity</h3>
          <div className="space-y-0">
            {timeline.map((event, i) => (
              <div key={event.id} className="flex gap-3 pb-4">
                <div className="flex flex-col items-center">
                  <div className={cn('mt-1 size-2.5 rounded-full', variantDotColors[event.variant || 'default'])} />
                  {i < timeline.length - 1 && <div className="flex-1 w-px bg-border" />}
                </div>
                <div className="flex-1 space-y-0.5 pb-2">
                  <p className="text-sm font-medium">{event.title}</p>
                  {event.description && <p className="text-xs text-muted-foreground">{event.description}</p>}
                  <p className="text-xs text-muted-foreground/70">{event.timestamp}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

export type { DetailPageProps, DetailField, DetailTab, TimelineEvent }