Parsons/src/components/molecules/ComparisonColumnCard/ComparisonColumnCard.tsx

import React from 'react';
import Box from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import StarRoundedIcon from '@mui/icons-material/StarRounded';
import VerifiedOutlinedIcon from '@mui/icons-material/VerifiedOutlined';
import type { SxProps, Theme } from '@mui/material/styles';
import { Typography } from '../../atoms/Typography';
import { Button } from '../../atoms/Button';
import { Badge } from '../../atoms/Badge';
import { Card } from '../../atoms/Card';
import { Divider } from '../../atoms/Divider';
import { Link } from '../../atoms/Link';
import type { ComparisonPackage } from '../../organisms/ComparisonTable';

// ─── Types ───────────────────────────────────────────────────────────────────

export interface ComparisonColumnCardProps {
  /** Package data to render — same shape used by ComparisonTable */
  pkg: ComparisonPackage;
  /** Called when the user clicks the CTA (Make Arrangement / Make Enquiry) */
  onArrange: (packageId: string) => void;
  /** Called when the user clicks Remove — hidden when not provided or for recommended packages */
  onRemove?: (packageId: string) => void;
  /** MUI sx prop for outer wrapper overrides */
  sx?: SxProps<Theme>;
}

// ─── Helpers ────────────────────────────────────────────────────────────────

function formatPrice(amount: number): string {
  return `$${amount.toLocaleString('en-AU', { minimumFractionDigits: amount % 1 !== 0 ? 2 : 0 })}`;
}

// ─── Component ──────────────────────────────────────────────────────────────

/**
 * Desktop column header card for the ComparisonTable.
 *
 * Shows provider info (verified badge, name, location, rating), package name,
 * total price, CTA button, and optional Remove link. The verified badge floats
 * above the card's top edge. Recommended packages get a copper banner and warm
 * selected card state.
 *
 * Used as the sticky header for each column in the desktop comparison grid.
 * Mobile comparison uses ComparisonPackageCard instead.
 */
export const ComparisonColumnCard = React.forwardRef<HTMLDivElement, ComparisonColumnCardProps>(
  ({ pkg, onArrange, onRemove, sx }, ref) => {
    return (
      <Box
        ref={ref}
        role="columnheader"
        aria-label={pkg.isRecommended ? `${pkg.name} (Recommended)` : pkg.name}
        sx={[
          {
            position: 'relative',
            overflow: 'visible',
            display: 'flex',
            flexDirection: 'column',
          },
          ...(Array.isArray(sx) ? sx : [sx]),
        ]}
      >
        {/* Floating verified badge — overlaps card top edge */}
        {pkg.provider.verified && (
          <Badge
            color="brand"
            variant="soft"
            size="small"
            icon={<VerifiedOutlinedIcon sx={{ fontSize: 14 }} />}
            sx={{
              position: 'absolute',
              top: -12,
              left: '50%',
              transform: 'translateX(-50%)',
              zIndex: 1,
              boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
            }}
          >
            Verified
          </Badge>
        )}

        <Card
          variant="outlined"
          selected={pkg.isRecommended}
          padding="none"
          sx={{ overflow: 'hidden', flex: 1, display: 'flex', flexDirection: 'column' }}
        >
          {pkg.isRecommended && (
            <Box sx={{ bgcolor: 'var(--fa-color-brand-600)', py: 0.75, textAlign: 'center' }}>
              <Typography
                variant="labelSm"
                sx={{
                  color: 'var(--fa-color-white)',
                  fontWeight: 600,
                  letterSpacing: '0.05em',
                  textTransform: 'uppercase',
                }}
              >
                Recommended
              </Typography>
            </Box>
          )}

          <Box
            sx={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              textAlign: 'center',
              px: 2.5,
              py: 2.5,
              pt: pkg.provider.verified ? 3 : 2.5,
              gap: 0.5,
              flex: 1,
            }}
          >
            {/* Provider name (truncated with tooltip) */}
            <Tooltip
              title={pkg.provider.name}
              arrow
              placement="top"
              disableHoverListener={pkg.provider.name.length < 24}
            >
              <Typography
                variant="label"
                sx={{
                  fontWeight: 600,
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  maxWidth: '100%',
                }}
              >
                {pkg.provider.name}
              </Typography>
            </Tooltip>

            {/* Location */}
            <Typography variant="caption" color="text.secondary">
              {pkg.provider.location}
            </Typography>

            {/* Rating */}
            {pkg.provider.rating != null && (
              <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5 }}>
                <StarRoundedIcon
                  sx={{ fontSize: 16, color: 'var(--fa-color-brand-500)' }}
                  aria-hidden
                />
                <Typography variant="body2" color="text.secondary">
                  {pkg.provider.rating}
                  {pkg.provider.reviewCount != null && ` (${pkg.provider.reviewCount})`}
                </Typography>
              </Box>
            )}

            <Divider sx={{ width: '100%', my: 1 }} />

            <Typography variant="h6" component="p">
              {pkg.name}
            </Typography>

            <Typography variant="caption" color="text.secondary" sx={{ mt: 0.5 }}>
              Total package price
            </Typography>
            <Typography variant="h5" sx={{ color: 'primary.main', fontWeight: 700 }}>
              {formatPrice(pkg.price)}
            </Typography>

            {/* Spacer pushes CTA to bottom across all cards */}
            <Box sx={{ flex: 1 }} />

            <Button
              variant={pkg.provider.verified ? 'contained' : 'soft'}
              color={pkg.provider.verified ? 'primary' : 'secondary'}
              size="medium"
              onClick={() => onArrange(pkg.id)}
              sx={{ mt: 1.5, px: 4 }}
            >
              {pkg.provider.verified ? 'Make Arrangement' : 'Make Enquiry'}
            </Button>

            {!pkg.isRecommended && onRemove && (
              <Link
                component="button"
                variant="body2"
                color="text.secondary"
                underline="hover"
                onClick={() => onRemove(pkg.id)}
                sx={{ mt: 0.5 }}
              >
                Remove
              </Link>
            )}
          </Box>
        </Card>
      </Box>
    );
  },
);

ComparisonColumnCard.displayName = 'ComparisonColumnCard';
export default ComparisonColumnCard;