import { BadgeCheck, GraduationCap } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { UserAvatar, avatarSizeClasses } from '@/components/ui/UserAvatar';
import { cn } from '@/lib/utils';

export function WorkerAvatar({
  user,
  size = 'sm',
  className,
  rounded = 'full',
}: {
  user: { firstName: string; lastName: string; avatarUrl?: string | null };
  size?: keyof typeof avatarSizeClasses;
  className?: string;
  rounded?: 'full' | '2xl' | 'none';
}) {
  return (
    <UserAvatar
      firstName={user.firstName}
      lastName={user.lastName}
      avatarUrl={user.avatarUrl}
      size={size}
      rounded={rounded}
      ringClassName={rounded === 'none' ? 'ring-2 ring-white/20 shadow-none' : 'ring-2 ring-white shadow-sm'}
      className={className}
    />
  );
}

export interface WorkerSkillCategory {
  id?: string;
  name: string;
  slug?: string;
}

export interface WorkerSkillItem {
  category: WorkerSkillCategory;
}

export function getListedWorkerSkills(skills?: WorkerSkillItem[]): WorkerSkillItem[] {
  return skills?.filter((s) => s.category.slug !== 'other') ?? [];
}

export function getPrimaryWorkerCategory(skills?: WorkerSkillItem[]) {
  return getListedWorkerSkills(skills)[0]?.category;
}

interface VerifiedBadgeProps {
  /** Icon-only mark for photo covers / tight layouts */
  compact?: boolean;
  /** default: light surfaces · onDark: profile heroes · onMedia: listing photo overlays */
  tone?: 'default' | 'onDark' | 'onMedia';
  className?: string;
}

/** Public trust mark for verified workers (listings + profile). */
export function VerifiedBadge({
  compact = false,
  tone = 'default',
  className,
}: VerifiedBadgeProps) {
  const mediaTone = tone === 'onMedia' || (compact && tone === 'default');

  if (mediaTone) {
    return (
      <span
        title="Verified identity"
        aria-label="Verified identity"
        className={cn(
          'inline-flex shrink-0 items-center justify-center rounded-full',
          'bg-[var(--home-amber)] text-white',
          'shadow-[0_2px_8px_rgba(12,25,41,0.28)] ring-2 ring-white',
          compact ? 'h-6 w-6' : 'h-7 w-7',
          className
        )}
      >
        <BadgeCheck
          className={cn(compact ? 'h-3.5 w-3.5' : 'h-4 w-4')}
          strokeWidth={2.25}
          aria-hidden
        />
      </span>
    );
  }

  if (tone === 'onDark') {
    return (
      <span
        title="Verified identity"
        className={cn(
          'inline-flex shrink-0 items-center gap-1 border border-amber-400/45',
          'bg-amber-400/15 px-2 py-0.5 text-[11px] font-semibold tracking-wide text-amber-300',
          'shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]',
          compact && 'gap-0 px-1.5',
          className
        )}
      >
        <BadgeCheck
          className={cn('shrink-0 text-amber-400', compact ? 'h-3 w-3' : 'h-3.5 w-3.5')}
          strokeWidth={2.25}
          aria-hidden
        />
        {!compact && <span>Verified</span>}
      </span>
    );
  }

  return (
    <span
      title="Verified identity"
      className={cn(
        'inline-flex shrink-0 items-center gap-1 border border-[var(--home-amber)]/35',
        'bg-[linear-gradient(180deg,rgba(245,158,11,0.16),rgba(217,119,6,0.1))]',
        'px-2 py-0.5 text-[11px] font-semibold tracking-wide text-[var(--home-ink)]',
        'shadow-[0_1px_2px_rgba(12,25,41,0.06)]',
        compact && 'gap-0 px-1.5',
        className
      )}
    >
      <BadgeCheck
        className={cn('shrink-0 text-[var(--home-amber)]', compact ? 'h-3 w-3' : 'h-3.5 w-3.5')}
        strokeWidth={2.25}
        aria-hidden
      />
      {!compact && <span>Verified</span>}
    </span>
  );
}

interface WorkerProfileBadgesProps {
  isVerified?: boolean;
  isStudent?: boolean;
  className?: string;
  compact?: boolean;
  /** Passed through to the verified mark */
  tone?: VerifiedBadgeProps['tone'];
}

export function WorkerProfileBadges({
  isVerified,
  isStudent,
  className,
  compact = false,
  tone = 'default',
}: WorkerProfileBadgesProps) {
  if (!isVerified && !isStudent) return null;

  return (
    <div className={cn('flex flex-wrap items-center gap-1.5', className)}>
      {isVerified && <VerifiedBadge compact={compact} tone={tone} />}
      {isStudent && (
        <Badge
          variant="secondary"
          className={cn(
            'gap-1 normal-case tracking-normal',
            compact && 'px-1.5 py-0.5 text-[10px]',
            tone === 'onDark' && 'border border-white/20 bg-white/10 text-slate-200'
          )}
        >
          <GraduationCap className={cn('h-3 w-3', compact && 'h-2.5 w-2.5')} />
          {!compact && 'Student'}
          {compact && <span className="sr-only">Student</span>}
        </Badge>
      )}
    </div>
  );
}

interface WorkerSkillsBadgesProps {
  skills?: WorkerSkillItem[];
  otherSkills?: string | null;
  limit?: number;
  className?: string;
  badgeClassName?: string;
  showOverflow?: boolean;
}

export function WorkerSkillsBadges({
  skills,
  otherSkills,
  limit,
  className,
  badgeClassName,
  showOverflow = false,
}: WorkerSkillsBadgesProps) {
  const listed = getListedWorkerSkills(skills);
  const other = otherSkills?.trim();
  const visible = limit != null ? listed.slice(0, limit) : listed;
  const overflow = limit != null ? Math.max(listed.length - limit, 0) : 0;

  if (visible.length === 0 && !other) return null;

  return (
    <div className={cn('flex flex-wrap gap-1', className)}>
      {visible.map((s) => (
        <Badge
          key={s.category.id ?? s.category.slug ?? s.category.name}
          variant="secondary"
          className={badgeClassName}
        >
          {s.category.name}
        </Badge>
      ))}
      {other && (
        <Badge variant="secondary" className={badgeClassName}>
          {other}
        </Badge>
      )}
      {showOverflow && overflow > 0 && (
        <span className="text-xs text-muted self-center">+{overflow}</span>
      )}
    </div>
  );
}

export function getWorkerSkillLabel(
  skills?: WorkerSkillItem[],
  otherSkills?: string | null
): string | undefined {
  const listed = getListedWorkerSkills(skills);
  if (listed[0]?.category.name) return listed[0].category.name;
  return otherSkills?.trim() || undefined;
}