import React from 'react';
import type { AppointmentStatus, PaymentStatus, SmsTemplateStatus, SettlementStatus } from '../../types';

const variants: Record<string, string> = {
  yellow: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-800 dark:text-yellow-300',
  blue:   'bg-blue-100   dark:bg-blue-400/10   text-blue-800   dark:text-blue-300',
  purple: 'bg-purple-100 dark:bg-purple-400/10 text-purple-800 dark:text-purple-300',
  orange: 'bg-orange-100 dark:bg-orange-400/10 text-orange-800 dark:text-orange-300',
  indigo: 'bg-indigo-100 dark:bg-indigo-400/10 text-indigo-800 dark:text-indigo-300',
  green:  'bg-green-100  dark:bg-green-400/10  text-green-800  dark:text-green-300',
  red:    'bg-red-100    dark:bg-red-400/10    text-red-800    dark:text-red-300',
  gray:   'bg-slate-100  dark:bg-slate-400/10  text-slate-700  dark:text-slate-400',
  rose:   'bg-rose-100   dark:bg-rose-400/10   text-rose-800   dark:text-rose-300',
};

const dots: Record<string, string> = {
  yellow: 'bg-yellow-500',
  blue:   'bg-blue-500',
  purple: 'bg-purple-500',
  orange: 'bg-orange-500',
  indigo: 'bg-indigo-500',
  green:  'bg-green-500',
  red:    'bg-red-500',
  gray:   'bg-slate-400',
  rose:   'bg-rose-500',
};

const appointmentMap: Record<AppointmentStatus, { color: string; label: string }> = {
  waiting_for_payment: { color: 'yellow', label: 'انتظار پرداخت' },
  reserved:            { color: 'blue',   label: 'رزرو شده' },
  checked_in:          { color: 'purple', label: 'ورود به مطب' },
  waiting:             { color: 'orange', label: 'صف انتظار' },
  in_progress:         { color: 'indigo', label: 'در حال ویزیت' },
  visited:             { color: 'green',  label: 'ویزیت شده' },
  completed:           { color: 'green',  label: 'تکمیل شده' },
  cancelled_by_user:   { color: 'red',    label: 'لغو بیمار' },
  cancelled_by_doctor: { color: 'red',    label: 'لغو پزشک' },
  cancelled_by_admin:  { color: 'red',    label: 'لغو ادمین' },
  auto_cancel_unpaid:  { color: 'gray',   label: 'لغو خودکار' },
  no_show:             { color: 'rose',   label: 'غیبت' },
};

const paymentMap: Record<PaymentStatus, { color: string; label: string }> = {
  pending:  { color: 'yellow', label: 'در انتظار' },
  received: { color: 'green',  label: 'موفق' },
  canceled: { color: 'red',    label: 'لغو شده' },
  refund:   { color: 'blue',   label: 'استرداد' },
};

const smsMap: Record<SmsTemplateStatus, { color: string; label: string }> = {
  draft:    { color: 'gray',   label: 'پیش‌نویس' },
  pending:  { color: 'yellow', label: 'در انتظار تأیید' },
  approved: { color: 'green',  label: 'تأیید شده' },
  rejected: { color: 'red',    label: 'رد شده' },
};

const settlementMap: Record<SettlementStatus, { color: string; label: string }> = {
  pending:  { color: 'yellow', label: 'در انتظار' },
  approved: { color: 'green',  label: 'تأیید شده' },
  rejected: { color: 'red',    label: 'رد شده' },
};

interface Props {
  type: 'appointment' | 'payment' | 'sms' | 'settlement' | 'active';
  value: string;
}

export default function StatusBadge({ type, value }: Props) {
  let color = 'gray';
  let label = value;

  if (type === 'appointment') {
    const m = appointmentMap[value as AppointmentStatus];
    if (m) { color = m.color; label = m.label; }
  } else if (type === 'payment') {
    const m = paymentMap[value as PaymentStatus];
    if (m) { color = m.color; label = m.label; }
  } else if (type === 'sms') {
    const m = smsMap[value as SmsTemplateStatus];
    if (m) { color = m.color; label = m.label; }
  } else if (type === 'settlement') {
    const m = settlementMap[value as SettlementStatus];
    if (m) { color = m.color; label = m.label; }
  } else if (type === 'active') {
    color = value === 'true' || value === 'active' ? 'green' : 'gray';
    label = value === 'true' || value === 'active' ? 'فعال' : 'غیرفعال';
  }

  return (
    <span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium ${variants[color] ?? variants.gray}`}>
      <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dots[color] ?? dots.gray}`} />
      {label}
    </span>
  );
}

export function ActiveBadge({ active }: { active: boolean }) {
  return <StatusBadge type="active" value={active ? 'active' : 'inactive'} />;
}