import {
  Clock,
  Package,
  Truck,
  CheckCircle2,
  XCircle,
  HelpCircle,
  ShieldCheck,
  RotateCcw,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { Order } from '@/types';

type OrderStatus = Order['status'];

const config: Record<
  OrderStatus,
  { label: string; icon: React.ReactNode; className: string }
> = {
  pending: {
    label: 'Menunggu',
    icon: <Clock className="w-3 h-3" />,
    className: 'text-amber-700 bg-amber-50 border-amber-200',
  },
  confirmed: {
    label: 'Dikonfirmasi',
    icon: <ShieldCheck className="w-3 h-3" />,
    className: 'text-cyan-700 bg-cyan-50 border-cyan-200',
  },
  processing: {
    label: 'Diproses',
    icon: <Package className="w-3 h-3" />,
    className: 'text-blue-700 bg-blue-50 border-blue-200',
  },
  shipped: {
    label: 'Dikirim',
    icon: <Truck className="w-3 h-3" />,
    className: 'text-purple-700 bg-purple-50 border-purple-200',
  },
  delivered: {
    label: 'Terkirim',
    icon: <CheckCircle2 className="w-3 h-3" />,
    className: 'text-green-700 bg-green-50 border-green-200',
  },
  completed: {
    label: 'Selesai',
    icon: <CheckCircle2 className="w-3 h-3" />,
    className: 'text-emerald-700 bg-emerald-50 border-emerald-200',
  },
  cancelled: {
    label: 'Dibatalkan',
    icon: <XCircle className="w-3 h-3" />,
    className: 'text-red-700 bg-red-50 border-red-200',
  },
  refunded: {
    label: 'Dikembalikan',
    icon: <RotateCcw className="w-3 h-3" />,
    className: 'text-fuchsia-700 bg-fuchsia-50 border-fuchsia-200',
  },
};

interface StatusBadgeProps {
  status: OrderStatus;
  className?: string;
}

export function OrderStatusBadge({ status, className }: StatusBadgeProps) {
  // Gunakan fallback jika status tidak ditemukan di config
  const c = config[status] || {
    label: status || 'Tidak Diketahui',
    icon: <HelpCircle className="w-3 h-3" />,
    className: 'text-gray-700 bg-gray-50 border-gray-200',
  };

  return (
    <span
      className={cn(
        'inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-full border',
        c.className,
        className
      )}
    >
      {c.icon}
      {c.label}
    </span>
  );
}

// User status badge
type UserStatus = 'active' | 'inactive' | 'suspended';

const userStatusConfig: Record<
  UserStatus,
  { label: string; className: string }
> = {
  active: {
    label: 'Aktif',
    className: 'text-green-700 bg-green-50 border-green-200',
  },
  inactive: {
    label: 'Tidak Aktif',
    className: 'text-gray-600 bg-gray-100 border-gray-200',
  },
  suspended: {
    label: 'Disuspend',
    className: 'text-red-700 bg-red-50 border-red-200',
  },
};

interface UserStatusBadgeProps {
  status: UserStatus;
  className?: string;
}

export function UserStatusBadge({ status, className }: UserStatusBadgeProps) {
  // Tambahkan perlindungan yang sama untuk UserStatusBadge
  const c = userStatusConfig[status] || {
    label: status || 'Unknown',
    className: 'text-gray-700 bg-gray-50 border-gray-200',
  };

  return (
    <span
      className={cn(
        'inline-flex items-center text-xs font-medium px-2.5 py-1 rounded-full border',
        c.className,
        className
      )}
    >
      {c.label}
    </span>
  );
}