import React from 'react';
import Box from '@mui/material/Box';
import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
import StarRoundedIcon from '@mui/icons-material/StarRounded';
import type { SxProps, Theme } from '@mui/material/styles';
import { Card } from '../../atoms/Card';
import { Typography } from '../../atoms/Typography';

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

/** Props for the FA NearbyPackageCard molecule */
export interface NearbyPackageCardProps {
  /** Package display name */
  packageName: string;
  /** Package price in dollars */
  price: number;
  /** Provider display name */
  providerName: string;
  /** Provider location (suburb, city) */
  location: string;
  /** Provider rating (e.g. 4.5). Omit to hide. */
  rating?: number;
  /** Number of reviews */
  reviewCount?: number;
  /** Click handler — navigates to that provider's PackagesStep with this package loaded */
  onClick?: () => void;
  /** MUI sx prop */
  sx?: SxProps<Theme>;
}

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

/**
 * Compact card representing a package offered by a nearby verified provider.
 *
 * Surfaced in the "Similar packages from verified providers nearby" section
 * of the unverified-tier PackagesStep pages. Clicking the card is a route
 * change to that verified provider's PackagesStep with this package loaded.
 *
 * Composes Card + Typography.
 */
export const NearbyPackageCard = React.forwardRef<HTMLDivElement, NearbyPackageCardProps>(
  ({ packageName, price, providerName, location, rating, reviewCount, onClick, sx }, ref) => {
    return (
      <Card
        ref={ref}
        interactive={!!onClick}
        padding="none"
        onClick={onClick}
        sx={[{ p: 'var(--fa-card-padding-compact)' }, ...(Array.isArray(sx) ? sx : [sx])]}
      >
        {/* Package name + price */}
        <Box
          sx={{
            display: 'flex',
            alignItems: 'flex-start',
            justifyContent: 'space-between',
            gap: 2,
            mb: 1,
          }}
        >
          <Typography variant="h6" component="span">
            {packageName}
          </Typography>
          <Typography
            variant="labelLg"
            component="span"
            color="primary"
            sx={{ whiteSpace: 'nowrap' }}
          >
            ${price.toLocaleString('en-AU')}
          </Typography>
        </Box>

        {/* Provider info */}
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap' }}>
          <Typography variant="body2" color="text.secondary">
            {providerName}
          </Typography>
          {rating != null && (
            <>
              <Typography variant="body2" color="text.secondary">
                &middot;
              </Typography>
              <StarRoundedIcon sx={{ fontSize: 14, color: 'warning.main' }} aria-hidden />
              <Typography variant="caption" color="text.secondary">
                {rating}
                {reviewCount != null ? ` (${reviewCount})` : ''}
              </Typography>
            </>
          )}
          <Typography variant="body2" color="text.secondary">
            &middot;
          </Typography>
          <LocationOnOutlinedIcon sx={{ fontSize: 14, color: 'text.secondary' }} aria-hidden />
          <Typography variant="caption" color="text.secondary">
            {location}
          </Typography>
        </Box>
      </Card>
    );
  },
);

NearbyPackageCard.displayName = 'NearbyPackageCard';
export default NearbyPackageCard;