import { X } from 'lucide-react'

export function PageHeader({ title, subtitle, actions }:
  { title: string; subtitle?: string; actions?: React.ReactNode }) {
  return (
    <div className="flex items-center justify-between mb-6">
      <div>
        <h1 className="text-xl font-bold">{title}</h1>
        {subtitle && <p className="text-sm text-slate-400 mt-0.5">{subtitle}</p>}
      </div>
      {actions && <div className="flex items-center gap-2">{actions}</div>}
    </div>
  )
}

export function Field({ label, children, hint }:
  { label: string; children: React.ReactNode; hint?: string }) {
  return (
    <div>
      <label className="block text-xs text-slate-400 mb-1">{label}</label>
      {children}
      {hint && <p className="text-[11px] text-slate-500 mt-1">{hint}</p>}
    </div>
  )
}

export function Modal({ title, onClose, children, wide }:
  { title: string; onClose: () => void; children: React.ReactNode; wide?: boolean }) {
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={onClose}>
      <div
        className={`bg-panel border border-edge rounded-2xl p-6 ${wide ? 'w-[760px]' : 'w-[480px]'} max-h-[90vh] overflow-auto`}
        onClick={e => e.stopPropagation()}
      >
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-bold">{title}</h2>
          <button onClick={onClose} className="text-slate-400 hover:text-slate-200"><X size={18} /></button>
        </div>
        {children}
      </div>
    </div>
  )
}

export function Btn({ children, onClick, variant = 'primary', size = 'md', disabled, title, type }: {
  children: React.ReactNode; onClick?: () => void; variant?: 'primary' | 'ghost' | 'danger'
  size?: 'sm' | 'md'; disabled?: boolean; title?: string; type?: 'button' | 'submit'
}) {
  const base = 'inline-flex items-center gap-1.5 rounded-lg font-semibold transition-colors disabled:opacity-50'
  const sz = size === 'sm' ? 'px-2.5 py-1 text-xs' : 'px-3 py-2 text-sm'
  const vr = variant === 'primary' ? 'bg-brand text-ink hover:bg-brand/90'
    : variant === 'danger' ? 'bg-rose-500/90 text-white hover:bg-rose-500'
    : 'bg-card border border-edge text-slate-300 hover:border-brand'
  return (
    <button type={type || 'button'} onClick={onClick} disabled={disabled} title={title} className={`${base} ${sz} ${vr}`}>
      {children}
    </button>
  )
}

export function Empty({ msg = '데이터가 없습니다.', colSpan }: { msg?: string; colSpan?: number }) {
  if (colSpan) return <tr><td colSpan={colSpan} className="py-6 text-center text-slate-500 text-sm">{msg}</td></tr>
  return <div className="py-8 text-center text-slate-500 text-sm bg-card border border-edge rounded-xl">{msg}</div>
}

export function Card({ title, icon, children, className = '' }:
  { title?: string; icon?: React.ReactNode; children: React.ReactNode; className?: string }) {
  return (
    <div className={`bg-card border border-edge rounded-xl p-4 ${className}`}>
      {title && (
        <h3 className="text-sm font-semibold mb-3 flex items-center gap-1.5">{icon}{title}</h3>
      )}
      {children}
    </div>
  )
}

export function StatCard({ label, value, icon, color = 'text-brand', unit }:
  { label: string; value: number | string; icon?: React.ReactNode; color?: string; unit?: string }) {
  return (
    <div className="bg-card border border-edge rounded-xl p-4">
      <div className="flex items-center gap-1.5 text-xs text-slate-400">{icon} {label}</div>
      <div className={`text-2xl font-bold mt-2 ${color}`}>
        {typeof value === 'number' ? value.toLocaleString() : value}
        {unit && <span className="text-sm font-normal text-slate-500 ml-1">{unit}</span>}
      </div>
    </div>
  )
}

/** 표 컨테이너 */
export function TableWrap({ children }: { children: React.ReactNode }) {
  return <div className="bg-card border border-edge rounded-xl overflow-hidden"><table className="w-full text-sm">{children}</table></div>
}

/** JSON 입력 토글 — 문자열/객체 모두 허용 */
export function safeJson(v: any, fallback: any = []) {
  if (v == null) return fallback
  if (typeof v === 'object') return v
  try { return JSON.parse(v) } catch { return fallback }
}
export function jsonStr(v: any) {
  if (v == null) return ''
  if (typeof v === 'string') return v
  try { return JSON.stringify(v, null, 2) } catch { return '' }
}

/** PII 마스킹 — 전화/이메일 부분 노출 */
export function maskValue(v?: string) {
  if (!v) return '-'
  if (v.includes('@')) {
    const [id, dom] = v.split('@')
    return `${id.slice(0, 2)}***@${dom}`
  }
  if (v.length > 4) return v.slice(0, 3) + '****' + v.slice(-2)
  return '***'
}
