import { useEffect, useRef, useState } from 'react';
import { getInitials, formatCurrency } from '@/lib/formatters';
import type { ReactNode } from 'react';

// StatusBadge
export function StatusBadge({ status, text }: { status: 'paid' | 'due' | 'pending' | 'present' | 'absent' | 'active' | 'completed'; text?: string }) {
  const map: Record<string, { bg: string; text: string; label: string }> = {
    paid: { bg: 'bg-emerald-100', text: 'text-emerald-700', label: 'Paid' },
    due: { bg: 'bg-red-100', text: 'text-red-700', label: 'Due' },
    pending: { bg: 'bg-amber-100', text: 'text-amber-700', label: 'Pending' },
    present: { bg: 'bg-emerald-100', text: 'text-emerald-700', label: 'Present' },
    absent: { bg: 'bg-red-100', text: 'text-red-700', label: 'Absent' },
    active: { bg: 'bg-emerald-100', text: 'text-emerald-700', label: 'Active' },
    completed: { bg: 'bg-indigo-100', text: 'text-indigo-700', label: 'Completed' },
  };
  const s = map[status] || map.pending;
  return <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold ${s.bg} ${s.text}`}>{text || s.label}</span>;
}

// SkillLevelBadge
export function SkillLevelBadge({ level }: { level: string }) {
  const map: Record<string, { bg: string; text: string }> = {
    beginner: { bg: 'bg-blue-100', text: 'text-blue-700' },
    intermediate: { bg: 'bg-amber-100', text: 'text-amber-700' },
    advanced: { bg: 'bg-red-100', text: 'text-red-700' },
  };
  const s = map[level] || map.beginner;
  return <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase ${s.bg} ${s.text}`}>{level}</span>;
}

// Avatar
export function Avatar({ name, photoUrl, size = 'md' }: { name: string; photoUrl?: string; size?: 'sm' | 'md' | 'lg' | 'xl' }) {
  const sizeMap = { sm: 'w-9 h-9 text-xs', md: 'w-12 h-12 text-sm', lg: 'w-16 h-16 text-lg', xl: 'w-20 h-20 text-xl' };
  if (photoUrl) {
    return <img src={photoUrl} alt={name} className={`${sizeMap[size]} rounded-full object-cover border-2 border-white shadow-sm`} />;
  }
  return (
    <div className={`${sizeMap[size]} rounded-full brand-gradient flex items-center justify-center text-white font-bold shadow-sm`}>
      {getInitials(name)}
    </div>
  );
}

// ProgressRing
export function ProgressRing({ percentage, size = 56, strokeWidth = 4, color }: { percentage: number; size?: number; strokeWidth?: number; color?: string }) {
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - (Math.min(percentage, 100) / 100) * circumference;

  return (
    <svg width={size} height={size} className="-rotate-90">
      <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke="#E5E7EB" strokeWidth={strokeWidth} />
      <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke={color || '#F26522'} strokeWidth={strokeWidth}
        strokeDasharray={circumference} strokeDashoffset={offset} strokeLinecap="round"
        className="transition-all duration-700 ease-out" />
      <text x={size / 2} y={size / 2} textAnchor="middle" dominantBaseline="central" className="text-[10px] font-bold fill-gray-700 rotate-90" transform={`rotate(90 ${size / 2} ${size / 2})`}>
        {Math.round(percentage)}%
      </text>
    </svg>
  );
}

// EmptyState
export function EmptyState({ icon, title, description, action }: { icon: ReactNode; title: string; description: string; action?: ReactNode }) {
  return (
    <div className="flex flex-col items-center justify-center py-12 px-6 text-center">
      <div className="animate-float mb-4">{icon}</div>
      <h3 className="text-sm font-semibold text-gray-500 mb-1">{title}</h3>
      <p className="text-xs text-gray-400 mb-4">{description}</p>
      {action}
    </div>
  );
}

// SkeletonCard
export function SkeletonCard() {
  return (
    <div className="bg-white rounded-xl p-4 card-shadow space-y-3">
      <div className="flex items-center gap-3">
        <div className="w-12 h-12 rounded-full skeleton-shimmer" />
        <div className="flex-1 space-y-2">
          <div className="h-4 rounded-md skeleton-shimmer w-3/4" />
          <div className="h-3 rounded-md skeleton-shimmer w-1/2" />
        </div>
      </div>
    </div>
  );
}

// StatsCard
export function StatsCard({ icon, label, value, subtitle, trend, trendUp }: { icon: ReactNode; label: string; value: string | number; subtitle?: string; trend?: string; trendUp?: boolean }) {
  return (
    <div className="bg-white rounded-xl p-4 card-shadow">
      <div className="flex items-start justify-between mb-2">
        <div className="text-gray-400">{icon}</div>
        {trend && (
          <span className={`text-[10px] font-semibold px-1.5 py-0.5 rounded-full ${trendUp ? 'bg-emerald-100 text-emerald-600' : 'bg-red-100 text-red-600'}`}>
            {trendUp ? '+' : ''}{trend}
          </span>
        )}
      </div>
      <div className="text-2xl font-bold text-gray-900">{value}</div>
      <div className="text-xs text-gray-500 mt-0.5">{label}</div>
      {subtitle && <div className="text-[10px] text-gray-400 mt-1">{subtitle}</div>}
    </div>
  );
}

// WhatsAppButton
export function WhatsAppButton({ phone, message, size = 'md' }: { phone: string; message?: string; size?: 'sm' | 'md' | 'lg' }) {
  const sizeMap = { sm: 'w-8 h-8', md: 'w-11 h-11', lg: 'w-14 h-14' };
  const iconMap = { sm: 'w-4 h-4', md: 'w-5 h-5', lg: 'w-6 h-6' };
  const text = encodeURIComponent(message || 'Hello from SkatePro Academy!');
  return (
    <a href={`https://wa.me/${phone}?text=${text}`} target="_blank" rel="noopener noreferrer"
      className={`${sizeMap[size]} rounded-full bg-[#25D366] flex items-center justify-center shadow-md active:scale-95 transition-transform`}>
      <svg className={iconMap[size]} viewBox="0 0 24 24" fill="white">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
      </svg>
    </a>
  );
}

// SearchInput
export function SearchInput({ placeholder, value, onChange, className = '' }: { placeholder: string; value: string; onChange: (v: string) => void; className?: string }) {
  return (
    <div className={`relative ${className}`}>
      <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
        <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
      </svg>
      <input
        type="text" placeholder={placeholder} value={value} onChange={e => onChange(e.target.value)}
        className="w-full h-11 pl-10 pr-10 bg-gray-100 rounded-xl text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:bg-white focus:ring-2 focus:ring-orange-500/20 transition-all"
      />
      {value && (
        <button onClick={() => onChange('')} className="absolute right-3 top-1/2 -translate-y-1/2">
          <svg className="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path d="M18 6 6 18M6 6l12 12" /></svg>
        </button>
      )}
    </div>
  );
}

// FloatingActionButton
export function FAB({ onClick, icon }: { onClick: () => void; icon: ReactNode }) {
  return (
    <button onClick={onClick} className="fixed bottom-24 right-4 w-14 h-14 rounded-full brand-gradient button-shadow flex items-center justify-center text-white z-40 active:scale-90 transition-transform">
      {icon}
    </button>
  );
}

// SectionTitle
export function SectionTitle({ title, action }: { title: string; action?: ReactNode }) {
  return (
    <div className="flex items-center justify-between mb-3">
      <h2 className="text-base font-bold text-gray-900">{title}</h2>
      {action}
    </div>
  );
}
