'use client';

import { useEffect, useState, type ReactNode } from 'react';
import { Star, MapPin, MessageCircle } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { formatWorkerRate } from '@/lib/rateType';
import { getUploadUrl } from '@/lib/api';
import { resolveWorkerAreaLabel } from '@/lib/geocode';
import { useAuth } from '@/contexts/AuthContext';
import { useRegion } from '@/contexts/RegionContext';
import {
  WorkerProfileBadges,
  WorkerSkillsBadges,
  WorkerAvatar,
} from '@/components/workers/WorkerProfileDisplay';
import { SaveWorkerButton } from '@/components/workers/SaveWorkerButton';
import { isRecentlyActive } from '@/lib/lastActive';
import { cn } from '@/lib/utils';

interface WorkerCardUser {
  firstName: string;
  lastName: string;
  avatarUrl?: string | null;
  lastActiveAt?: string | Date | null;
}

function WorkerActiveDot({ active, size = 'md' }: { active: boolean; size?: 'sm' | 'md' }) {
  if (!active) return null;
  return (
    <span
      className={cn(
        'absolute bottom-0 right-0 rounded-full bg-emerald-500 ring-2 ring-white',
        size === 'sm' ? 'h-2 w-2' : 'h-2.5 w-2.5'
      )}
      title="Active now"
      aria-label="Active now"
    />
  );
}

type WorkerCardCoverMode = 'portfolio' | 'avatar' | 'placeholder';

function WorkerCardCover({
  user,
  portfolioUrl,
  isVerified,
  isStudent,
  heightClass,
  badgesCompact = false,
}: {
  user: WorkerCardUser;
  portfolioUrl?: string | null;
  isVerified: boolean;
  isStudent?: boolean;
  heightClass: string;
  badgesCompact?: boolean;
}) {
  const [coverMode, setCoverMode] = useState<WorkerCardCoverMode>(() => {
    if (portfolioUrl) return 'portfolio';
    if (user.avatarUrl) return 'avatar';
    return 'placeholder';
  });

  useEffect(() => {
    if (portfolioUrl) setCoverMode('portfolio');
    else if (user.avatarUrl) setCoverMode('avatar');
    else setCoverMode('placeholder');
  }, [portfolioUrl, user.avatarUrl]);

  const handleImageError = () => {
    setCoverMode((current) => {
      if (current === 'portfolio' && user.avatarUrl) return 'avatar';
      return 'placeholder';
    });
  };

  return (
    <div className={cn('relative overflow-hidden bg-[var(--home-sand)]', heightClass)}>
      {coverMode === 'portfolio' && portfolioUrl ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={getUploadUrl(portfolioUrl)}
          alt=""
          onError={handleImageError}
          className="absolute inset-0 h-full w-full object-cover object-center"
        />
      ) : coverMode === 'avatar' && user.avatarUrl ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={getUploadUrl(user.avatarUrl)}
          alt=""
          onError={handleImageError}
          className="absolute inset-0 h-full w-full object-cover object-center"
        />
      ) : (
        <div
          className="absolute inset-0"
          style={{
            backgroundImage:
              'linear-gradient(135deg, rgba(12,25,41,0.05) 0%, transparent 50%), linear-gradient(rgba(12,25,41,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(12,25,41,0.06) 1px, transparent 1px)',
            backgroundSize: 'auto, 24px 24px, 24px 24px',
          }}
          aria-hidden
        />
      )}
      <WorkerProfileBadges
        isVerified={isVerified}
        isStudent={isStudent}
        compact={badgesCompact}
        tone="onMedia"
        className={cn('absolute z-10', badgesCompact ? 'top-1.5 right-1.5' : 'top-2 right-2')}
      />
    </div>
  );
}

interface WorkerCardProps {
  worker: {
    id: string;
    headline?: string;
    experienceYears: number;
    hourlyRate?: number | string;
    rateType?: string | null;
    averageRating: number;
    totalReviews: number;
    isVerified: boolean;
    isStudent?: boolean;
    otherSkills?: string | null;
    user: WorkerCardUser;
    skills?: { category: { name: string; slug: string; id?: string } }[];
    serviceAreas?: { area: string }[];
    portfolioImages?: { url: string }[];
  };
  compact?: boolean;
  /** Compact on mobile, full card on lg+ (for 2-col browse grid) */
  responsive?: boolean;
  /** Show Message + Save on customer browse listings */
  customerActions?: boolean;
}

function WorkerCardActions({ workerId }: { workerId: string }) {
  const router = useRouter();
  const { user } = useAuth();
  const customerProfile = user?.customerProfile as { isVerified?: boolean } | undefined;
  const needsVerification =
    user?.role === 'CUSTOMER' && customerProfile?.isVerified !== true;

  const openMessage = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (!user) {
      router.push(`/login?redirect=${encodeURIComponent(`/workers/${workerId}`)}`);
      return;
    }
    if (user.role !== 'CUSTOMER') {
      router.push(`/workers/${workerId}`);
      return;
    }
    if (needsVerification) {
      router.push('/customer/verification');
      return;
    }
    router.push(`/customer/messages?workerId=${workerId}`);
  };

  return (
    <div
      className="mt-3 flex gap-2 border-t border-border pt-3"
      onClick={(e) => e.stopPropagation()}
    >
      <Button
        type="button"
        size="sm"
        variant="outline"
        className="h-8 min-w-0 flex-1 gap-1 px-2 text-xs"
        onClick={openMessage}
      >
        <MessageCircle className="h-3.5 w-3.5 shrink-0" />
        {needsVerification ? 'Verify to message' : 'Message'}
      </Button>
      <div className="min-w-0 flex-1">
        <SaveWorkerButton
          workerId={workerId}
          variant="button"
          className="h-8 w-full px-2 text-xs"
        />
      </div>
    </div>
  );
}

export function WorkerCard({
  worker,
  compact = false,
  responsive = false,
  customerActions = false,
  regionSlug,
}: WorkerCardProps & { regionSlug?: string }) {
  const { slug: contextSlug } = useRegion();
  const effectiveRegionSlug = regionSlug ?? contextSlug;
  const areaLabel = resolveWorkerAreaLabel(worker.serviceAreas, effectiveRegionSlug);
  const portfolioUrl = worker.portfolioImages?.[0]?.url;
  const showCompact = compact || responsive;
  const profileHref = `/workers/${worker.id}`;
  const isActiveNow = isRecentlyActive(worker.user.lastActiveAt);

  const coverLink = (children: ReactNode, className: string) =>
    customerActions ? (
      <Link href={profileHref} className={className}>
        {children}
      </Link>
    ) : (
      <div className={className}>{children}</div>
    );

  const nameLink = (children: ReactNode, className: string) =>
    customerActions ? (
      <Link href={profileHref} className={className}>
        {children}
      </Link>
    ) : (
      <div className={className}>{children}</div>
    );

  const compactCard = (
    <Card className="worker-card rounded-none shadow-none h-full active:scale-[0.99]">
      {coverLink(
        <WorkerCardCover
          user={worker.user}
          portfolioUrl={portfolioUrl}
          isVerified={worker.isVerified}
          isStudent={worker.isStudent}
          heightClass="h-20"
          badgesCompact
        />,
        'block'
      )}
      <CardContent className="px-2.5 pb-2.5 pt-3">
        <div className="flex flex-col items-center text-center">
          <div className="relative -mt-6 shrink-0">
            <WorkerAvatar user={worker.user} size="xs" className="ring-4" />
            <WorkerActiveDot active={isActiveNow} size="sm" />
          </div>
          {nameLink(
            <h3 className="font-bold text-slate-900 text-sm leading-tight line-clamp-2 hover:text-[var(--home-amber)]">
              {worker.user.firstName} {worker.user.lastName}
            </h3>,
            'mt-0'
          )}
          <div className="flex items-center gap-1 mt-1">
            <Star className="worker-card-star h-3.5 w-3.5" />
            <span className="text-xs font-semibold">{worker.averageRating.toFixed(1)}</span>
            <span className="text-[10px] text-slate-400">({worker.totalReviews})</span>
          </div>
          <WorkerSkillsBadges
            skills={worker.skills}
            otherSkills={worker.otherSkills}
            limit={1}
            className="mt-1.5 justify-center"
            badgeClassName="text-[10px] px-1.5 py-0 max-w-full truncate"
          />
          {worker.hourlyRate && (
            <span className="worker-card-rate mt-1.5 text-xs">
              {formatWorkerRate(Number(worker.hourlyRate), worker.rateType)}
            </span>
          )}
          {customerActions ? <WorkerCardActions workerId={worker.id} /> : null}
        </div>
      </CardContent>
    </Card>
  );

  const fullCard = (
    <Card className="worker-card rounded-none shadow-none h-full active:scale-[0.99]">
      {coverLink(
        <WorkerCardCover
          user={worker.user}
          portfolioUrl={portfolioUrl}
          isVerified={worker.isVerified}
          isStudent={worker.isStudent}
          heightClass="h-36"
        />,
        'block'
      )}
      <CardContent className="p-4">
        <div className="flex items-start gap-3">
          <div className="relative shrink-0">
            {customerActions ? (
              <Link href={profileHref} className="block">
                <WorkerAvatar user={worker.user} size="sm" />
              </Link>
            ) : (
              <WorkerAvatar user={worker.user} size="sm" />
            )}
            <WorkerActiveDot active={isActiveNow} />
          </div>
          <div className="flex-1 min-w-0">
            {nameLink(
              <h3 className="font-bold text-slate-900 truncate hover:text-[var(--home-amber)]">
                {worker.user.firstName} {worker.user.lastName}
              </h3>,
              'block'
            )}
            <p className="text-sm text-muted truncate">{worker.headline}</p>
            <div className="flex items-center gap-1 mt-1">
              <Star className="worker-card-star h-4 w-4" />
              <span className="text-sm font-semibold">{worker.averageRating.toFixed(1)}</span>
              <span className="text-xs text-slate-400">({worker.totalReviews})</span>
            </div>
          </div>
        </div>
        <WorkerSkillsBadges
          skills={worker.skills}
          otherSkills={worker.otherSkills}
          limit={2}
          className="mt-3"
        />
        <div className="flex items-center justify-between mt-3 text-sm">
          <span className="flex items-center gap-1 text-muted">
            <MapPin className="h-3.5 w-3.5" />
            {areaLabel}
          </span>
          {worker.hourlyRate && (
            <span className="worker-card-rate">
              {formatWorkerRate(Number(worker.hourlyRate), worker.rateType)}
            </span>
          )}
        </div>
        {customerActions ? <WorkerCardActions workerId={worker.id} /> : null}
      </CardContent>
    </Card>
  );

  const wrapCard = (card: ReactNode, className = 'block h-full') =>
    customerActions ? (
      <div className={className}>{card}</div>
    ) : (
      <Link href={profileHref} className={className}>
        {card}
      </Link>
    );

  if (responsive) {
    return (
      <div className="h-full">
        <div className="h-full lg:hidden">{wrapCard(compactCard)}</div>
        <div className="hidden h-full lg:block">{wrapCard(fullCard)}</div>
      </div>
    );
  }

  if (showCompact) {
    return wrapCard(compactCard, 'block');
  }

  return wrapCard(fullCard, 'block');
}