import React from 'react';
import Box from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import type { SxProps, Theme } from '@mui/material/styles';
import { Typography } from '../../atoms/Typography';

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

/** Props for the FA LineItem molecule */
export interface LineItemProps {
  /** Item name/label */
  name: string;
  /** Optional tooltip text explaining the item (shown via info icon) */
  info?: string;
  /** Price in dollars — omit for complimentary/included items */
  price?: number;
  /** Whether the price is an allowance (shows asterisk) */
  isAllowance?: boolean;
  /** Custom price display — overrides `price` formatting (e.g. "Included", "TBC") */
  priceLabel?: string;
  /** Visual weight — "default" for regular items, "total" for summary rows */
  variant?: 'default' | 'total';
  /** MUI sx prop for the root element */
  sx?: SxProps<Theme>;
}

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

/**
 * A single line item showing a name, optional info tooltip, and optional price.
 *
 * Used in package contents, order summaries, and invoices. The `info` prop
 * renders a small info icon with a tooltip — used by providers to explain
 * what each inclusion covers.
 *
 * Composes Typography + Tooltip.
 *
 * Usage:
 * ```tsx
 * <LineItem name="Professional Service Fee" info="Covers all coordination..." price={1500} />
 * <LineItem name="Allowance for Coffin" price={1500} isAllowance info="Can be upgraded..." />
 * <LineItem name="Dressing Fee" info="Included in this package" />
 * <LineItem name="Total" price={2700} variant="total" />
 * ```
 */
export const LineItem = React.forwardRef<HTMLDivElement, LineItemProps>(
  ({ name, info, price, isAllowance = false, priceLabel, variant = 'default', sx }, ref) => {
    const isTotal = variant === 'total';

    const formattedPrice = priceLabel
      ?? (price != null ? `$${price.toLocaleString('en-AU')}${isAllowance ? '*' : ''}` : undefined);

    return (
      <Box
        ref={ref}
        sx={[
          {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            gap: 2,
            ...(isTotal && {
              pt: 1.5,
              mt: 1.5,
              borderTop: '1px solid',
              borderColor: 'divider',
            }),
          },
          ...(Array.isArray(sx) ? sx : [sx]),
        ]}
      >
        {/* Name + optional info icon */}
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, minWidth: 0 }}>
          <Typography
            variant={isTotal ? 'h6' : 'body2'}
            sx={{
              fontWeight: isTotal ? 600 : 400,
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            }}
          >
            {name}
          </Typography>

          {info && (
            <Tooltip title={info} arrow placement="top">
              <InfoOutlinedIcon
                aria-label="More information"
                sx={{
                  fontSize: 16,
                  color: 'text.secondary',
                  cursor: 'help',
                  flexShrink: 0,
                }}
              />
            </Tooltip>
          )}
        </Box>

        {/* Price */}
        {formattedPrice && (
          <Typography
            variant={isTotal ? 'h6' : 'body2'}
            sx={{
              fontWeight: isTotal ? 600 : 400,
              whiteSpace: 'nowrap',
              flexShrink: 0,
              ...(isTotal && { color: 'primary.main' }),
            }}
          >
            {formattedPrice}
          </Typography>
        )}
      </Box>
    );
  },
);

LineItem.displayName = 'LineItem';
export default LineItem;