'use client';

import Link from 'next/link';
import { X, Briefcase, User, MapPin, Banknote, Star, ArrowRight, Clock, CalendarDays, Images } from 'lucide-react';
import { JOB_STATUS_LABELS, type JobStatus } from '@ehandyhire/shared';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import type { MapMarker } from '@/components/map/MapView';
import { WorkerAvatar } from '@/components/workers/WorkerProfileDisplay';
import { getUploadUrl } from '@/lib/api';
import { formatDate, cn } from '@/lib/utils';

interface MapPinDetailProps {
  marker: MapMarker;
  onClose: () => void;
}

const statusVariants: Record<string, 'default' | 'secondary' | 'success' | 'warning' | 'destructive'> = {
  OPEN: 'success',
  QUOTED: 'warning',
  ACCEPTED: 'default',
  IN_PROGRESS: 'warning',
  COMPLETED: 'secondary',
  CANCELLED: 'destructive',
};

function jobStatusLabel(status?: string) {
  if (!status) return 'Job';
  return JOB_STATUS_LABELS[status as JobStatus] ?? status.replace(/_/g, ' ');
}

export function MapPinDetail({ marker, onClose }: MapPinDetailProps) {
  const isJob = marker.type === 'job';
  const statusKey = marker.status ?? 'OPEN';
  const portfolioHref = `${marker.href}#portfolio`;
  const hasPortfolio = !isJob && (marker.portfolioCount ?? 0) > 0;
  const previewImages = marker.portfolioImages ?? [];
  const extraPortfolioCount = Math.max(0, (marker.portfolioCount ?? 0) - previewImages.length);

  return (
    <div className="map-pin-detail overflow-hidden border border-[#e2ddd2] bg-[#fffdf9] shadow-xl">
      <div
        className={cn(
          'flex items-center justify-between gap-2 px-4 py-2.5 text-white text-xs font-semibold uppercase tracking-wide',
          isJob ? 'bg-[var(--home-steel)]' : 'bg-[var(--home-ink)]'
        )}
      >
        <span className="flex items-center gap-2">
          {isJob ? (
            <Briefcase className="h-3.5 w-3.5 text-white" />
          ) : (
            <User className="h-3.5 w-3.5 text-white" />
          )}
          {isJob ? 'Job posting' : 'Worker profile'}
        </span>
        {isJob && marker.status && (
          <Badge
            variant={statusVariants[statusKey] ?? 'secondary'}
            className="normal-case tracking-normal text-[10px] px-2 py-0.5 rounded-none bg-white/15 text-white border-white/20 hover:bg-white/15"
          >
            {jobStatusLabel(marker.status)}
          </Badge>
        )}
      </div>

      <div className="relative p-4 pt-3">
        <button
          type="button"
          onClick={onClose}
          className="absolute top-2 right-2 flex h-8 w-8 items-center justify-center text-slate-400 hover:bg-[var(--home-sand)] hover:text-slate-700 transition-colors"
          aria-label="Close"
        >
          <X className="h-4 w-4" />
        </button>

        <div className="flex items-start gap-3 pr-8">
          {!isJob && (
            <WorkerAvatar
              user={{
                firstName: marker.firstName ?? marker.title,
                lastName: marker.lastName ?? '',
                avatarUrl: marker.avatarUrl,
              }}
              size="md"
              className="shrink-0"
            />
          )}

          <div className="min-w-0 flex-1">
            {marker.category && (
              <Badge variant="secondary" className="mb-2 normal-case tracking-normal rounded-none">
                {marker.category}
              </Badge>
            )}

            <h3 className="home-display font-bold text-slate-900 text-base leading-snug line-clamp-2">
              {marker.title}
            </h3>

            {marker.subtitle && (
              <p className="text-sm text-muted mt-1 line-clamp-2">{marker.subtitle}</p>
            )}
          </div>
        </div>

        <div className="mt-3 space-y-2 border-t border-[#e2ddd2] pt-3">
          {isJob && (marker.postedAt || marker.dateNeeded) && (
            <div className="flex flex-wrap gap-x-4 gap-y-1.5 text-sm text-slate-600">
              {marker.postedAt && (
                <div className="flex items-center gap-2">
                  <Clock className="h-4 w-4 shrink-0 text-slate-400" />
                  <span>
                    Posted <span className="font-medium text-slate-900">{formatDate(marker.postedAt)}</span>
                  </span>
                </div>
              )}
              {marker.dateNeeded && (
                <div className="flex items-center gap-2">
                  <CalendarDays className="h-4 w-4 shrink-0 text-slate-400" />
                  <span>
                    Needed by <span className="font-medium text-slate-900">{formatDate(marker.dateNeeded)}</span>
                  </span>
                </div>
              )}
            </div>
          )}

          {marker.location && (
            <div className="flex items-start gap-2 text-sm text-slate-600">
              <MapPin className="h-4 w-4 shrink-0 text-[var(--home-amber)] mt-0.5" />
              <span className="line-clamp-2">{marker.location}</span>
            </div>
          )}

          {isJob && marker.budget && (
            <div className="flex items-center gap-2 text-sm">
              <Banknote className="h-4 w-4 shrink-0 text-[var(--home-amber)]" />
              <span className="font-bold text-[var(--home-amber)]">{marker.budget}</span>
              <span className="text-muted text-xs">budget</span>
            </div>
          )}

          {!isJob && marker.rating != null && marker.rating > 0 && (
            <div className="flex items-center gap-1.5 text-sm">
              <Star className="h-4 w-4 fill-[var(--home-amber)] text-[var(--home-amber)]" />
              <span className="font-semibold text-slate-900">{marker.rating.toFixed(1)}</span>
              <span className="text-muted text-xs">rating</span>
            </div>
          )}

          {!isJob && marker.serviceAreas && (
            <div className="flex items-start gap-2 text-sm text-slate-600">
              <MapPin className="h-4 w-4 shrink-0 text-[var(--home-amber)] mt-0.5" />
              <span className="line-clamp-2">{marker.serviceAreas}</span>
            </div>
          )}

          {hasPortfolio && (
            <div>
              <div className="flex items-center gap-1.5 text-xs font-semibold text-[var(--home-amber)] uppercase tracking-wide mb-2">
                <Images className="h-3.5 w-3.5" />
                Portfolio
              </div>
              <div className="flex gap-2">
                {previewImages.map((img) => (
                  <Link
                    key={img.id}
                    href={portfolioHref}
                    onClick={onClose}
                    className="block shrink-0 overflow-hidden border border-[#e2ddd2] bg-slate-100 hover:opacity-90 transition-opacity"
                  >
                    <img
                      src={getUploadUrl(img.url)}
                      alt={img.title || 'Portfolio photo'}
                      className="h-14 w-14 object-cover"
                    />
                  </Link>
                ))}
                {extraPortfolioCount > 0 && (
                  <Link
                    href={portfolioHref}
                    onClick={onClose}
                    className="flex h-14 w-14 shrink-0 items-center justify-center border border-dashed border-[#d6d0c4] bg-[var(--home-sand)] text-xs font-semibold text-[var(--home-ink)] hover:border-[var(--home-amber)] transition-colors"
                  >
                    +{extraPortfolioCount}
                  </Link>
                )}
              </div>
            </div>
          )}
        </div>

        <div className={cn('mt-4 flex gap-2', hasPortfolio ? 'flex-col sm:flex-row' : '')}>
          <Link href={marker.href} className={cn(hasPortfolio ? 'flex-1' : 'block w-full')} onClick={onClose}>
            <Button className="worker-cta-amber w-full gap-2 rounded-none" size="sm">
              {isJob ? 'View job details' : 'View worker profile'}
              <ArrowRight className="h-4 w-4" />
            </Button>
          </Link>
          {hasPortfolio && (
            <Link href={portfolioHref} className="flex-1" onClick={onClose}>
              <Button
                variant="outline"
                className="w-full gap-2 rounded-none border-[#d6d0c4]"
                size="sm"
              >
                View portfolio
                <ArrowRight className="h-4 w-4" />
              </Button>
            </Link>
          )}
        </div>
      </div>
    </div>
  );
}