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

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

/** Props for the FA VenueCard molecule */
export interface VenueCardProps {
  /** Venue display name */
  name: string;
  /** Venue photo URL — always present for venues */
  imageUrl: string;
  /** Location text (suburb, city) */
  location: string;
  /** Venue capacity (seating/standing) */
  capacity?: number;
  /** Venue hire price in dollars */
  price?: number;
  /** Whether this card is the selected venue (brand border + warm bg) */
  selected?: boolean;
  /** Click handler — entire card is clickable */
  onClick?: () => void;
  /** HTML/ARIA passthrough for radiogroup patterns */
  role?: string;
  'aria-checked'?: boolean;
  tabIndex?: number;
  /** MUI sx prop for style overrides */
  sx?: SxProps<Theme>;
}

// ─── Constants ───────────────────────────────────────────────────────────────

const IMAGE_HEIGHT = 'var(--fa-venue-card-image-height)';
const CONTENT_PADDING = 'var(--fa-venue-card-content-padding)';
const CONTENT_GAP = 'var(--fa-venue-card-content-gap)';

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

/**
 * Venue listing card for the FA design system.
 *
 * Displays a service venue in the venue select screen's scrollable list.
 * Venues always have a photo, location, and typically capacity + price.
 * Simpler than ProviderCard — no verification tiers, no logo, no
 * capability badges.
 *
 * Composes: Card (interactive, padding="none"), Typography.
 *
 * Usage:
 * ```tsx
 * <VenueCard
 *   name="West Chapel"
 *   imageUrl="/images/west-chapel.jpg"
 *   location="Strathfield"
 *   capacity={100}
 *   price={900}
 *   onClick={() => navigate(`/venues/west-chapel`)}
 * />
 * ```
 */
export const VenueCard = React.forwardRef<HTMLDivElement, VenueCardProps>(
  (
    {
      name,
      imageUrl,
      location,
      capacity,
      price,
      selected = false,
      onClick,
      role,
      'aria-checked': ariaChecked,
      tabIndex,
      sx,
    },
    ref,
  ) => {
    return (
      <Card
        ref={ref}
        interactive
        selected={selected}
        padding="none"
        onClick={onClick}
        role={role}
        aria-checked={ariaChecked}
        tabIndex={tabIndex}
        sx={[
          {
            overflow: 'hidden',
            '&:hover': {
              backgroundColor: 'background.paper',
            },
          },
          ...(Array.isArray(sx) ? sx : [sx]),
        ]}
      >
        {/* ── Image area ── */}
        <Box
          role="img"
          aria-label={`Photo of ${name}`}
          sx={{
            height: IMAGE_HEIGHT,
            backgroundImage: `url(${imageUrl})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundColor: 'var(--fa-color-surface-subtle)',
          }}
        />

        {/* ── Content area ── */}
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            gap: CONTENT_GAP,
            p: CONTENT_PADDING,
          }}
        >
          {/* Venue name */}
          <Typography variant="h5" maxLines={2}>
            {name}
          </Typography>

          {/* Meta row: location + capacity */}
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              gap: 2,
              flexWrap: 'wrap',
            }}
          >
            {/* Location */}
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
              <LocationOnOutlinedIcon sx={{ fontSize: 14, color: 'text.secondary' }} />
              <Typography variant="caption" color="text.secondary">
                {location}
              </Typography>
            </Box>

            {/* Capacity */}
            {capacity != null && (
              <Box
                sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}
                aria-label={`Capacity: ${capacity} guests`}
              >
                <PeopleOutlinedIcon sx={{ fontSize: 14, color: 'text.secondary' }} aria-hidden />
                <Typography variant="caption" color="text.secondary">
                  {capacity} guests
                </Typography>
              </Box>
            )}
          </Box>

          {/* Price */}
          {price != null && (
            <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5, mt: 0.5 }}>
              <Typography variant="body2" color="text.secondary">
                From
              </Typography>
              <Typography variant="h6" component="span" color="primary" sx={{ fontWeight: 600 }}>
                ${price.toLocaleString('en-AU')}
              </Typography>
            </Box>
          )}
        </Box>
      </Card>
    );
  },
);

VenueCard.displayName = 'VenueCard';
export default VenueCard;
