pn-new-crm/src/components/berths/berth-card.tsx

'use client';

import { Activity, Anchor, MapPin, MoreHorizontal, Pencil } from 'lucide-react';
import { useRouter, useParams } from 'next/navigation';

import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { TagBadge } from '@/components/shared/tag-badge';
import { ListCard, ListCardAvatar, ListCardMeta } from '@/components/shared/list-card';
import { cn } from '@/lib/utils';
import type { BerthRow } from './berth-columns';
import { mooringLetterDot } from './mooring-letter-tone';

const STATUS_VARIANTS: Record<string, string> = {
  available: 'bg-green-100 text-green-800 border-green-200',
  under_offer: 'bg-yellow-100 text-yellow-800 border-yellow-200',
  sold: 'bg-red-100 text-red-800 border-red-200',
};

const STATUS_LABELS: Record<string, string> = {
  available: 'Available',
  under_offer: 'Under Offer',
  sold: 'Sold',
};

function formatPrice(price: string, currency: string): string {
  try {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: currency || 'USD',
      maximumFractionDigits: 0,
    }).format(Number(price));
  } catch {
    return `${currency} ${price}`;
  }
}

interface BerthCardProps {
  berth: BerthRow;
}

export function BerthCard({ berth }: BerthCardProps) {
  const router = useRouter();
  const params = useParams<{ portSlug: string }>();
  const portSlug = params?.portSlug ?? '';

  const statusLabel = STATUS_LABELS[berth.status] ?? berth.status;
  const statusColor =
    STATUS_VARIANTS[berth.status] ?? 'bg-muted text-muted-foreground border-muted';
  // Accent stripe groups visually by dock (A-row, B-row, ...). Status is
  // already conveyed by the pill below, so the stripe is dock-keyed.
  const accentClass = mooringLetterDot(berth.mooringNumber) ?? 'bg-slate-300';

  // Dimensions string
  let dimText: string | null = null;
  if (berth.lengthM || berth.widthM) {
    const l = berth.lengthM ?? '?';
    const w = berth.widthM ?? '?';
    dimText = `${l}m × ${w}m`;
  }

  const metaParts: string[] = [];
  if (dimText) metaParts.push(dimText);
  if (berth.price) metaParts.push(formatPrice(berth.price, berth.priceCurrency));

  const tags = berth.tags ?? [];

  return (
    <ListCard
      href={`/${portSlug}/berths/${berth.id}`}
      ariaLabel={`Berth ${berth.mooringNumber}`}
      accentClassName={accentClass}
      actions={
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="h-9 w-9"
              onClick={(e) => e.stopPropagation()}
              aria-label={`Actions for berth ${berth.mooringNumber}`}
            >
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem
              onClick={(e) => {
                e.stopPropagation();
                router.push(`/${portSlug}/berths/${berth.id}`);
              }}
            >
              <Activity className="mr-2 h-3.5 w-3.5" />
              View details
            </DropdownMenuItem>
            <DropdownMenuItem
              onClick={(e) => {
                e.stopPropagation();
                router.push(`/${portSlug}/berths/${berth.id}?edit=true`);
              }}
            >
              <Pencil className="mr-2 h-3.5 w-3.5" />
              Edit
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      }
    >
      <div className="flex items-start gap-3">
        <ListCardAvatar icon={<Anchor className="h-5 w-5" />} />
        <div className="min-w-0 flex-1">
          {/* Title row + spacer for actions button */}
          <div className="flex items-start justify-between gap-2">
            <h3 className="truncate text-base font-semibold tracking-tight text-foreground">
              {berth.mooringNumber}
            </h3>
            <span aria-hidden className="block h-9 w-9 shrink-0" />
          </div>

          {/* Area subtitle */}
          {berth.area ? (
            <p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
              <MapPin className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
              <span className="truncate">{berth.area}</span>
            </p>
          ) : null}

          {/* Dimensions · Price meta line */}
          {metaParts.length > 0 ? (
            <div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
              {metaParts.map((part, i) => (
                <span key={part} className="inline-flex items-center gap-1">
                  {i > 0 ? <span aria-hidden>·</span> : null}
                  <ListCardMeta>{part}</ListCardMeta>
                </span>
              ))}
            </div>
          ) : null}

          {/* Status pill */}
          <div className="mt-1.5">
            <span
              className={cn(
                'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium',
                statusColor,
              )}
            >
              {statusLabel}
            </span>
          </div>

          {/* Tags */}
          {tags.length > 0 ? (
            <div className="mt-2 flex flex-wrap gap-1">
              {tags.slice(0, 2).map((tag) => (
                <TagBadge key={tag.id} name={tag.name} color={tag.color} />
              ))}
              {tags.length > 2 ? (
                <span className="inline-flex items-center rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">
                  +{tags.length - 2}
                </span>
              ) : null}
            </div>
          ) : null}
        </div>
      </div>
    </ListCard>
  );
}