import { Link } from 'react-router-dom';

import { Badge } from '@/components/ui/Badge';
import { MachineThumbnail } from '@/components/catalogue/MachineThumbnail';
import { appConfig } from '@/config/appConfig';
import type { CatalogueViewMode, MachineRegistryItem } from '@/types/catalogue';
import { cn } from '@/utils/classNames';
import {
  categoryShortLabel,
  difficultyToTone,
  partCountLabel,
  phaseLabel
} from '@/utils/format';

export interface MachineCardProps {
  readonly machine: MachineRegistryItem;
  readonly isFavourite: boolean;
  readonly onToggleFavourite: (slug: string) => void;
  readonly viewMode?: CatalogueViewMode;
}

function BookmarkIcon({ filled }: { readonly filled: boolean }) {
  return (
    <svg className="size-4" viewBox="0 0 24 24" fill={filled ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2">
      <path d="M6 4.75A2.75 2.75 0 0 1 8.75 2h6.5A2.75 2.75 0 0 1 18 4.75V21l-6-3.75L6 21V4.75Z" strokeLinejoin="round" />
    </svg>
  );
}

export function MachineCard({
  isFavourite,
  machine,
  onToggleFavourite,
  viewMode = 'comfortable'
}: MachineCardProps) {
  const compact = viewMode === 'compact';
  const visibleTags = machine.tags.slice(0, appConfig.catalogue.maxVisibleCardTags);

  return (
    <article
      className={cn(
        'group relative flex h-full overflow-hidden rounded-3xl border border-border/70 bg-panel/72 shadow-panel backdrop-blur-xl transition duration-300 hover:-translate-y-1 hover:border-accent/45 hover:shadow-glow',
        compact ? 'min-h-[280px]' : 'min-h-[420px]',
      )}
    >
      <button
        type="button"
        aria-pressed={isFavourite}
        aria-label={isFavourite ? `Remove ${machine.title} from favourites` : `Save ${machine.title} to favourites`}
        onClick={() => onToggleFavourite(machine.slug)}
        className={cn(
          'interactive-ring absolute right-4 top-4 z-20 inline-flex size-10 items-center justify-center rounded-2xl border border-border/70 bg-bg/70 text-muted shadow-sm backdrop-blur transition duration-200 hover:border-accent/45 hover:text-foreground',
          isFavourite && 'border-warm/45 bg-warm/15 text-warm',
        )}
      >
        <BookmarkIcon filled={isFavourite} />
      </button>

      <Link
        to={`/machines/${machine.slug}`}
        className="interactive-ring flex min-w-0 flex-1 flex-col rounded-3xl focus-visible:outline-offset-[-2px]"
        aria-label={`Open ${machine.title} reference page`}
      >
        <MachineThumbnail machine={machine} compact={compact} className={compact ? 'm-3 mb-0' : 'm-4 mb-0'} />

        <div className={cn('flex flex-1 flex-col', compact ? 'p-4' : 'p-5')}>
          <div className="mb-3 flex flex-wrap items-center gap-2">
            <Badge tone="neutral" size="sm">
              {categoryShortLabel(machine.category)}
            </Badge>
            <Badge tone={difficultyToTone(machine.difficulty)} size="sm">
              {machine.difficulty}
            </Badge>
            <Badge tone={machine.releasePhase === 'core' ? 'accent' : 'warm'} size="sm">
              {phaseLabel(machine.releasePhase)}
            </Badge>
          </div>

          <div className="space-y-2">
            <h2 className="text-balance text-xl font-black tracking-[-0.03em] text-foreground">
              {machine.title}
            </h2>
            <p className="text-sm font-semibold text-accent">{machine.subtitle}</p>
            <p className={cn('text-sm leading-6 text-muted', compact && 'line-clamp-2')}>
              {machine.shortDescription}
            </p>
          </div>

          <dl className="mt-5 grid grid-cols-3 gap-2 text-xs tabular-nums">
            <div className="rounded-2xl border border-border/60 bg-surface/55 p-3">
              <dt className="text-subtle">Parts</dt>
              <dd className="mt-1 font-bold text-foreground">{machine.estimatedPartCount}</dd>
            </div>
            <div className="rounded-2xl border border-border/60 bg-surface/55 p-3">
              <dt className="text-subtle">Complexity</dt>
              <dd className="mt-1 font-bold text-foreground">{machine.complexity}/5</dd>
            </div>
            <div className="rounded-2xl border border-border/60 bg-surface/55 p-3">
              <dt className="text-subtle">Facts</dt>
              <dd className="mt-1 font-bold text-foreground">{machine.facts.length}</dd>
            </div>
          </dl>

          <div className="mt-4 flex flex-wrap gap-2">
            {visibleTags.map((tag) => (
              <span
                key={tag}
                className="rounded-full border border-border/60 bg-surface/55 px-2.5 py-1 text-xs font-medium text-muted"
              >
                {tag}
              </span>
            ))}
          </div>

          <div className="mt-auto flex items-center justify-between gap-3 pt-5 text-xs font-semibold text-muted">
            <span>{partCountLabel(machine.parts.length)} annotated</span>
            <span className="text-accent transition group-hover:translate-x-0.5">Inspect →</span>
          </div>
        </div>
      </Link>
    </article>
  );
}