// GUARDiA Signage 공용 UI 키트 (Tailwind NCloud 다크 콘솔). 색상은 tailwind 토큰만 사용.
import { type ReactNode } from 'react'
import { Icon, type IconName } from '../lib/icons'

export function PageHeader({ title, subtitle, actions }: { title: string; subtitle?: string; actions?: ReactNode }) {
  return (
    <div className="flex items-end justify-between mb-5">
      <div>
        <h1 className="text-xl font-semibold text-white">{title}</h1>
        {subtitle && <p className="text-sm text-gray-400 mt-1">{subtitle}</p>}
      </div>
      {actions && <div className="flex gap-2">{actions}</div>}
    </div>
  )
}

export function Toolbar({ children }: { children: ReactNode }) {
  return <div className="bg-panel border border-edge rounded-lg p-3 flex flex-wrap gap-2 items-center mb-4">{children}</div>
}

export function Button({
  children, onClick, variant = 'primary', type = 'button', disabled, icon,
}: {
  children: ReactNode; onClick?: () => void; variant?: 'primary' | 'ghost' | 'danger'
  type?: 'button' | 'submit'; disabled?: boolean; icon?: IconName
}) {
  const v: Record<string, string> = {
    primary: 'bg-brand hover:bg-brand2 text-white',
    ghost:   'bg-card border border-edge text-gray-300 hover:border-brand/60',
    danger:  'bg-red-500/90 hover:bg-red-500 text-white',
  }
  return (
    <button type={type} onClick={onClick} disabled={disabled}
      className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded text-sm font-medium disabled:opacity-40 ${v[variant]}`}>
      {icon && <Icon name={icon} size={14} />}{children}
    </button>
  )
}

export function TextInput({ value, onChange, placeholder, type = 'text', className }: {
  value: string; onChange: (v: string) => void; placeholder?: string; type?: string; className?: string
}) {
  return (
    <input type={type} value={value} placeholder={placeholder} onChange={e => onChange(e.target.value)}
      className={`bg-ink border border-edge rounded px-3 py-1.5 text-sm text-gray-200 outline-none focus:border-brand ${className || ''}`} />
  )
}

export function Select({ value, onChange, children, className }: {
  value: string; onChange: (v: string) => void; children: ReactNode; className?: string
}) {
  return (
    <select value={value} onChange={e => onChange(e.target.value)}
      className={`bg-ink border border-edge rounded px-3 py-1.5 text-sm text-gray-200 outline-none focus:border-brand ${className || ''}`}>
      {children}
    </select>
  )
}

export function Field({ label, children }: { label: string; children: ReactNode }) {
  return (
    <label className="block mb-3">
      <span className="block text-xs text-gray-400 mb-1">{label}</span>
      {children}
    </label>
  )
}

export interface Column<T> {
  key: string
  header: string
  render?: (row: T) => ReactNode
  align?: 'left' | 'center' | 'right'
}

export function Table<T extends Record<string, any>>({ columns, rows, rowKey, empty = '데이터가 없습니다.' }: {
  columns: Column<T>[]; rows: T[]; rowKey: (row: T) => string | number; empty?: string
}) {
  return (
    <div className="bg-card border border-edge rounded-lg overflow-x-auto">
      <table className="w-full text-sm">
        <thead className="bg-panel border-b border-edge">
          <tr>
            {columns.map(c => (
              <th key={c.key} className={`px-4 py-3 text-xs text-gray-400 font-medium text-${c.align || 'left'}`}>{c.header}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 ? (
            <tr><td colSpan={columns.length} className="px-4 py-10 text-center text-gray-500">{empty}</td></tr>
          ) : rows.map(row => (
            <tr key={rowKey(row)} className="border-b border-edge/70 hover:bg-edge/30">
              {columns.map(c => (
                <td key={c.key} className={`px-4 py-2.5 text-gray-300 text-${c.align || 'left'}`}>
                  {c.render ? c.render(row) : String(row[c.key] ?? '')}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export function Modal({ title, onClose, children, wide }: { title: string; onClose: () => void; children: ReactNode; wide?: boolean }) {
  return (
    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4" onClick={onClose}>
      <div className={`bg-card border border-edge rounded-lg p-6 w-full ${wide ? 'max-w-3xl' : 'max-w-md'} max-h-[88vh] overflow-auto`}
        onClick={e => e.stopPropagation()}>
        <div className="flex justify-between items-center mb-4">
          <h2 className="font-semibold text-white">{title}</h2>
          <button onClick={onClose} className="text-gray-400 hover:text-white"><Icon name="close" size={18} /></button>
        </div>
        {children}
      </div>
    </div>
  )
}

const TONE: Record<string, string> = {
  green:  'bg-green-500/15 text-green-400',
  red:    'bg-red-500/15 text-red-400',
  yellow: 'bg-yellow-500/15 text-yellow-400',
  orange: 'bg-orange-500/15 text-orange-400',
  blue:   'bg-brand/15 text-brand',
  gray:   'bg-gray-500/15 text-gray-400',
}
export function Badge({ tone = 'gray', children }: { tone?: keyof typeof TONE | string; children: ReactNode }) {
  return <span className={`px-2 py-0.5 rounded text-xs ${TONE[tone] || TONE.gray}`}>{children}</span>
}

export function StatCard({ title, value, icon, color = 'brand', sub }: {
  title: string; value: number | string; icon: IconName; color?: string; sub?: string
}) {
  const map: Record<string, string> = {
    brand: 'text-brand bg-brand/10', green: 'text-green-400 bg-green-400/10',
    red: 'text-red-400 bg-red-400/10', orange: 'text-orange-400 bg-orange-400/10',
    yellow: 'text-yellow-400 bg-yellow-400/10', accent: 'text-accent bg-accent/10',
  }
  const cls = map[color] || map.brand
  return (
    <div className="bg-card border border-edge rounded-lg p-4 flex items-center gap-4">
      <div className={`p-3 rounded-lg ${cls}`}><Icon name={icon} size={20} /></div>
      <div>
        <p className="text-xs text-gray-400">{title}</p>
        <p className={`text-2xl font-bold ${cls.split(' ')[0]}`}>{value}</p>
        {sub && <p className="text-xs text-gray-500">{sub}</p>}
      </div>
    </div>
  )
}

export function Spinner({ label = '로딩 중...' }: { label?: string }) {
  return <div className="p-8 text-center text-gray-400 text-sm">{label}</div>
}

export const TENANTS = ['ZIOINFO', 'TENANT_A', 'TENANT_B', 'EMART']
