import React, { useMemo } from 'react';
import { cn, fmt } from '@/lib/utils';
import { AlertCircle, CheckCircle2, Clock, TrendingUp, Settings2, type LucideIcon } from 'lucide-react';
import type { Dollars } from '@/lib/money';

type CardType = 'starting' | 'paid' | 'remaining' | 'overdue';

interface CardDef {
  label: string;
  icon: LucideIcon;
  bar: string;
  glow: string;
  borderActive?: string;
  valueClass: string;
  activateWhen: (v: number) => boolean;
}

const CARD_DEFS: Record<CardType, CardDef> = {
  starting:  {
    label: 'Starting',
    icon: TrendingUp,
    bar: 'from-slate-400 to-slate-300',
    glow: '',
    valueClass: 'text-foreground',
    activateWhen: () => true,
  },
  paid:      {
    label: 'Total Paid',
    icon: CheckCircle2,
    bar: 'from-emerald-500 to-emerald-300',
    glow: 'shadow-[0_4px_20px_rgba(16,185,129,0.15)]',
    borderActive: 'border-emerald-400/40',
    valueClass: 'text-emerald-600 dark:text-emerald-100',
    activateWhen: (v) => v > 0,
  },
  remaining: {
    label: 'Remaining',
    icon: Clock,
    bar: 'from-blue-400 to-indigo-300',
    glow: '',
    valueClass: 'text-foreground',
    activateWhen: () => true,
  },
  overdue:   {
    label: 'Overdue',
    icon: AlertCircle,
    bar: 'from-rose-400 to-orange-300',
    glow: 'shadow-[0_4px_20px_rgba(251,113,133,0.10)]',
    borderActive: 'border-rose-400/35',
    valueClass: 'text-red-500 dark:text-rose-100',
    activateWhen: (v) => v > 0,
  },
};

interface SummaryCardProps {
  type: CardType;
  value?: Dollars;
  onEdit?: () => void;
  hint?: string;
}

export const SummaryCard = React.memo(function SummaryCard({ type, value, onEdit, hint }: SummaryCardProps) {
  const def = useMemo(() => CARD_DEFS[type], [type]);
  const isActive = useMemo(() => def.activateWhen(value || 0), [def, value]);
  const Icon = useMemo(() => def.icon, [def]);

  return (
    <div className={cn(
      'flex-1 min-w-0 relative overflow-hidden rounded-xl border border-border/80',
      'bg-card/95 px-5 py-4 shadow-sm shadow-black/15 transition-all duration-300',
      isActive && def.glow,
      isActive && def.borderActive,
    )}>
      <div className={cn(
        'absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r',
        def.bar,
        !isActive && (type === 'paid' || type === 'overdue') && 'opacity-30',
      )} />
      <div className="flex items-center gap-2 mb-3">
        <Icon className={cn('h-4 w-4', isActive ? def.valueClass : 'text-muted-foreground')} />
        <p className="text-xs font-semibold uppercase tracking-normal text-muted-foreground">
          {def.label}
        </p>
        {type === 'starting' && onEdit && (
          <button
            onClick={onEdit}
            className="ml-auto h-4 w-4 text-muted-foreground hover:text-foreground transition-colors"
            title="Edit monthly starting amounts"
            aria-label="Edit monthly starting amounts"
          >
            <Settings2 className="h-4 w-4" />
          </button>
        )}
      </div>
      <p className={cn(
        'tracker-number text-[1.75rem] font-bold leading-none',
        isActive ? def.valueClass : 'text-foreground',
      )}>
        {fmt(value)}
      </p>
      {hint && <p className="mt-2 text-xs font-medium text-muted-foreground">{hint}</p>}
    </div>
  );
});

SummaryCard.displayName = 'SummaryCard';