import React from 'react'

// ─── StatCard ─────────────────────────────────────────────────────────────────

type IconGradient = 'teal' | 'green' | 'amber' | 'red'
type ChangeType = 'positive' | 'negative' | 'neutral'

const gradientClass: Record<IconGradient, string> = {
  teal: 'from-teal-400 to-teal-500',
  green: 'from-green-400 to-green-500',
  amber: 'from-amber-400 to-amber-500',
  red: 'from-red-400 to-red-500',
}

const changeClass: Record<ChangeType, string> = {
  positive: 'text-green-500',
  negative: 'text-red-500',
  neutral: 'text-slate-400',
}

export interface StatCardProps {
  icon: string
  iconGradient?: IconGradient
  label: string
  value: string | number
  change?: string | number
  changeType?: ChangeType
  progress?: number
  className?: string
}

export const StatCard: React.FC<StatCardProps> = ({
  icon,
  iconGradient = 'teal',
  label,
  value,
  change,
  changeType = 'neutral',
  progress,
  className = '',
}) => (
  <div className={`bg-white rounded-[14px] p-5 shadow-soft-md border border-teal-50 ${className}`}>
    <div className="flex items-center gap-2.5 mb-3">
      <div className={`w-10 h-10 rounded-[10px] bg-gradient-to-br ${gradientClass[iconGradient]} flex items-center justify-center`}>
        <span className="material-symbols-outlined text-white text-h2">{icon}</span>
      </div>
      <div>
        <p className="text-caption text-slate-400 font-bold uppercase tracking-wider">{label}</p>
        <p className="text-h1 font-black text-slate-900 leading-none mt-0.5">
          {value}
          {change != null && (
            <span className={`text-caption font-bold ml-1.5 ${changeClass[changeType]}`}>
              {change}
            </span>
          )}
        </p>
      </div>
    </div>
    {progress != null && (
      <div className="w-full h-1 bg-slate-100 rounded-full">
        <div
          className="h-full bg-gradient-to-r from-teal-400 to-teal-500 rounded-full"
          style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
        />
      </div>
    )}
  </div>
)

// ─── ToolCard ─────────────────────────────────────────────────────────────────

import type { BadgeStatus as BadgeStatusType } from './Badge'
import { BadgeStatus } from './Badge'

const statusLabel: Record<BadgeStatusType, string> = {
  active: '활성',
  'in-progress': '진행 중',
  pending: '대기',
  error: '오류',
  inactive: '비활성',
}

export interface ToolCardProps {
  icon: string
  status?: BadgeStatusType
  title: string
  description?: string
  tags?: string[]
  onClick?: () => void
  className?: string
}

export const ToolCard: React.FC<ToolCardProps> = ({
  icon,
  status,
  title,
  description,
  tags,
  onClick,
  className = '',
}) => (
  <div
    className={`bg-white rounded-[14px] p-5 shadow-soft-md border border-slate-100 ${onClick ? 'cursor-pointer hover:shadow-soft-lg transition-shadow' : ''} ${className}`}
    onClick={onClick}
  >
    <div className="flex justify-between items-start mb-3">
      <div className="w-10 h-10 rounded-[10px] bg-teal-50 flex items-center justify-center">
        <span className="material-symbols-outlined text-teal-500 text-h2">{icon}</span>
      </div>
      {status && (
        <BadgeStatus status={status}>{statusLabel[status]}</BadgeStatus>
      )}
    </div>
    <h3 className="text-sm font-bold text-slate-900 mb-1">{title}</h3>
    {description && (
      <p className="text-body-sm text-slate-500 leading-relaxed mb-3">{description}</p>
    )}
    {tags && tags.length > 0 && (
      <div className="flex gap-1.5 flex-wrap">
        {tags.map((tag) => (
          <span key={tag} className="px-2 py-0.5 bg-slate-100 text-slate-500 rounded-md text-caption font-semibold">
            {tag}
          </span>
        ))}
      </div>
    )}
  </div>
)

// ─── EmptyCard ────────────────────────────────────────────────────────────────

export interface EmptyCardProps {
  icon?: string
  label?: string
  description?: string
  onClick?: () => void
  minHeight?: string
  className?: string
}

export const EmptyCard: React.FC<EmptyCardProps> = ({
  icon = 'add',
  label = '새 항목 등록',
  description = '클릭하여 추가',
  onClick,
  minHeight = 'min-h-[160px]',
  className = '',
}) => (
  <div
    className={`bg-white rounded-[14px] border-2 border-dashed border-slate-200
      flex flex-col items-center justify-center text-center
      hover:border-teal-300 hover:bg-teal-50/30 transition-all duration-150
      ${onClick ? 'cursor-pointer' : ''}
      ${minHeight} ${className}`}
    onClick={onClick}
  >
    <div className="w-12 h-12 rounded-xl bg-slate-50 flex items-center justify-center mb-2.5">
      <span className="material-symbols-outlined text-slate-300 text-h1">{icon}</span>
    </div>
    <p className="text-body-sm font-bold text-slate-500">{label}</p>
    {description && (
      <p className="text-caption text-slate-400 mt-0.5">{description}</p>
    )}
  </div>
)