/**
 * Figma 样式餐桌/圆桌卡片：上下小条 + 白底卡片 + 状态色边框
 * 供 Floor Map Story 与 Sales Grid 平面图复用
 */
import React from 'react';
import { Avatar } from 'antd';
import { UserOutlined, ClockCircleOutlined, TeamOutlined, AuditOutlined, FieldTimeOutlined, EnvironmentOutlined } from '@ant-design/icons';
import { locales } from '@pisell/utils';
var I18N_CARD = 'pisell-floor-map-layout.card-placeholder';
var I18N_FIGMA = 'pisell-floor-map-layout.figma-card';

/** Figma 设计 token（Pisell 2.0 Component Library） */
var FIGMA = {
  white: '#FFFFFF',
  gray200: '#EAECF0',
  gray400: '#98A2B3',
  gray700: '#344054',
  gray900: '#101828',
  shadowSm: '0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1)',
  fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
  barFillAvailable: '#EAECF0',
  reserved: '#9254de',
  waiting: '#fa8c16',
  dining: '#1890ff',
  billed: '#52c41a',
  availableSoon: '#f5222d'
};
var STATUS_BORDER = {
  available: FIGMA.gray200,
  reserved: FIGMA.reserved,
  waiting: FIGMA.waiting,
  dining: FIGMA.dining,
  billed: FIGMA.billed,
  availableSoon: FIGMA.availableSoon
};

/** 方桌/圆桌卡片展示用数据结构（与 Figma 设计一致，支持桌号/状态/人数/区域等） */

var STATUS_MAP = {
  available: 'available',
  reserved: 'reserved',
  waiting: 'waiting',
  dining: 'dining',
  billed: 'billed',
  availableSoon: 'availableSoon',
  空闲: 'available',
  已预订: 'reserved',
  等待: 'waiting',
  用餐中: 'dining',
  已结账: 'billed',
  即将可用: 'availableSoon'
};

/** 从 merged item + dataSources 得到卡片数据 */
export function getFigmaTableCardFromMerged(item, dataSources) {
  var _binding$recordId;
  var el = item._sceneElement;
  var binding = el === null || el === void 0 ? void 0 : el.dataBinding;
  var titleFromElement = (el === null || el === void 0 ? void 0 : el.name) != null && String(el.name).trim() ? String(el.name).trim() : '';
  var kindLabel = locales.getText(item.elementKind === 'roundTable' ? "".concat(I18N_FIGMA, ".kind-round-table") : "".concat(I18N_FIGMA, ".kind-square-table"));
  var hasDataSource = Boolean((binding === null || binding === void 0 ? void 0 : binding.dataSourceKey) && String(binding.dataSourceKey).trim() !== '');
  var rid = (binding === null || binding === void 0 ? void 0 : binding.recordId) != null ? String(binding.recordId).trim() : '';
  var boundToData = Boolean(hasDataSource && rid !== '');
  var list = binding !== null && binding !== void 0 && binding.dataSourceKey ? dataSources[binding.dataSourceKey] : undefined;
  var record = boundToData && list ? list.find(function (r) {
    return r.id === rid;
  }) : undefined;
  var hasLiveRow = Boolean(record);
  if (!hasLiveRow) {
    /** 记录缺失或与「未选数据源」占位同一视觉（虚线 #bfbfbf），便于识别为待处理态 */
    var borderColor = '#bfbfbf';
    var hint = !hasDataSource || !rid ? hasDataSource ? locales.getText("".concat(I18N_CARD, ".hint-select-row")) : locales.getText("".concat(I18N_CARD, ".hint-bind-datasource")) : rid.startsWith('new_') ? locales.getText("".concat(I18N_CARD, ".hint-new-slot")).replace(/\{kind\}/g, kindLabel) : locales.getText("".concat(I18N_CARD, ".hint-row-not-found"));
    return {
      id: item.id,
      isNoDataPlaceholder: true,
      placeholderBorderColor: borderColor,
      placeholderHint: hint,
      placeholderTitle: titleFromElement || kindLabel
    };
  }
  var displayId = (_binding$recordId = binding === null || binding === void 0 ? void 0 : binding.recordId) !== null && _binding$recordId !== void 0 ? _binding$recordId : item.id;
  var rawStatus = record === null || record === void 0 ? void 0 : record.status;
  var status = rawStatus && STATUS_MAP[rawStatus] || 'available';
  return {
    id: displayId,
    displayName: record === null || record === void 0 ? void 0 : record.name,
    status: status,
    customerName: record === null || record === void 0 ? void 0 : record.customerName,
    reserveTime: record === null || record === void 0 ? void 0 : record.reserveTime,
    guests: record === null || record === void 0 ? void 0 : record.guests,
    capacity: record === null || record === void 0 ? void 0 : record.capacity,
    dishes: record === null || record === void 0 ? void 0 : record.dishes,
    duration: record === null || record === void 0 ? void 0 : record.duration,
    area: record === null || record === void 0 ? void 0 : record.area
  };
}

/** 根据 item id 得到小条数量：S=1, M=2, L=3, X=3, XL=4 */
function getBarCountFromItemId(id) {
  var upper = id.toUpperCase();
  if (upper.startsWith('XL-') || id.endsWith('-XL')) return 4;
  if (upper.startsWith('L-') || upper.startsWith('X-') || id.endsWith('-L') || id.endsWith('-X')) return 3;
  if (upper.startsWith('M-') || id.endsWith('-M')) return 2;
  return 1;
}
var CARD_BAR_WIDTH = 80;
var CARD_BAR_HEIGHT = 12;
function CardBars(_ref) {
  var count = _ref.count,
    position = _ref.position,
    barColor = _ref.barColor;
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'row',
      gap: 30,
      justifyContent: 'center',
      flexShrink: 0,
      padding: position === 'top' ? '0 0 4px 0' : '4px 0 0 0'
    }
  }, Array.from({
    length: count
  }, function (_, i) {
    return /*#__PURE__*/React.createElement("div", {
      key: i,
      style: {
        width: CARD_BAR_WIDTH,
        height: CARD_BAR_HEIGHT,
        borderRadius: 6,
        background: barColor
      }
    });
  }));
}
function FigmaCardRow(_ref2) {
  var icon = _ref2.icon,
    children = _ref2.children;
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 4,
      fontFamily: FIGMA.fontFamily,
      fontSize: 14,
      lineHeight: '20px',
      fontWeight: 400,
      color: FIGMA.gray700,
      flexShrink: 0,
      minHeight: '20px'
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      flexShrink: 0,
      color: FIGMA.gray400,
      fontSize: 14
    }
  }, icon), /*#__PURE__*/React.createElement("span", {
    style: {
      flexShrink: 0
    }
  }, children));
}

/** 人数、区域等通用信息行（与表格列绑定：可坐人数、区域） */
function TableCardInfoRows(_ref3) {
  var cardItem = _ref3.cardItem;
  var hasCapacity = cardItem.capacity != null;
  var hasArea = cardItem.area != null && cardItem.area !== '';
  if (!hasCapacity && !hasArea) return null;
  return /*#__PURE__*/React.createElement(React.Fragment, null, hasCapacity && /*#__PURE__*/React.createElement(FigmaCardRow, {
    icon: /*#__PURE__*/React.createElement(TeamOutlined, null)
  }, /*#__PURE__*/React.createElement("span", null, locales.getText("".concat(I18N_FIGMA, ".capacity-seats")).replace(/\{n\}/g, String(cardItem.capacity)))), hasArea && /*#__PURE__*/React.createElement(FigmaCardRow, {
    icon: /*#__PURE__*/React.createElement(EnvironmentOutlined, null)
  }, /*#__PURE__*/React.createElement("span", null, cardItem.area)));
}

/** 方桌卡片内容区（与 renderFigmaStyleTableCard 共用，展示桌号/状态/人数/区域） */
function TableCardContent(_ref4) {
  var _cardItem$status, _cardItem$displayName, _cardItem$displayName2;
  var cardItem = _ref4.cardItem;
  var status = (_cardItem$status = cardItem.status) !== null && _cardItem$status !== void 0 ? _cardItem$status : 'available';
  var borderColor = STATUS_BORDER[status];
  var isAvailable = status === 'available';
  return /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1,
      minHeight: 0,
      padding: 8,
      boxSizing: 'border-box',
      background: FIGMA.white,
      border: isAvailable ? "4px solid ".concat(FIGMA.gray200) : "4px solid ".concat(borderColor),
      borderRadius: 8,
      boxShadow: FIGMA.shadowSm,
      display: 'flex',
      flexDirection: 'column',
      justifyContent: isAvailable ? 'flex-start' : 'center',
      alignItems: isAvailable ? 'stretch' : 'center',
      gap: 4
    }
  }, isAvailable ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1,
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      minHeight: 0,
      gap: 4
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 600,
      fontSize: 18,
      lineHeight: '24px',
      color: FIGMA.gray700,
      letterSpacing: 0
    }
  }, (_cardItem$displayName = cardItem.displayName) !== null && _cardItem$displayName !== void 0 ? _cardItem$displayName : cardItem.id), /*#__PURE__*/React.createElement(TableCardInfoRows, {
    cardItem: cardItem
  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 600,
      fontSize: 18,
      lineHeight: '24px',
      color: FIGMA.gray900,
      letterSpacing: 0,
      textAlign: 'center'
    }
  }, (_cardItem$displayName2 = cardItem.displayName) !== null && _cardItem$displayName2 !== void 0 ? _cardItem$displayName2 : cardItem.id), status === 'reserved' && (cardItem.customerName != null && cardItem.customerName !== '' || cardItem.reserveTime != null && cardItem.reserveTime !== '') && /*#__PURE__*/React.createElement(React.Fragment, null, cardItem.customerName != null && cardItem.customerName !== '' && /*#__PURE__*/React.createElement(FigmaCardRow, {
    icon: /*#__PURE__*/React.createElement(Avatar, {
      size: 16,
      icon: /*#__PURE__*/React.createElement(UserOutlined, null),
      style: {
        backgroundColor: FIGMA.gray200
      }
    })
  }, /*#__PURE__*/React.createElement("span", null, cardItem.customerName)), cardItem.reserveTime != null && cardItem.reserveTime !== '' && /*#__PURE__*/React.createElement(FigmaCardRow, {
    icon: /*#__PURE__*/React.createElement(ClockCircleOutlined, null)
  }, /*#__PURE__*/React.createElement("span", null, cardItem.reserveTime))), (status === 'dining' || status === 'waiting' || status === 'billed' || status === 'availableSoon') && cardItem.guests != null && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FigmaCardRow, {
    icon: /*#__PURE__*/React.createElement(TeamOutlined, null)
  }, /*#__PURE__*/React.createElement("span", null, locales.getText("".concat(I18N_FIGMA, ".guests-count")).replace(/\{n\}/g, String(cardItem.guests)))), cardItem.dishes && /*#__PURE__*/React.createElement(FigmaCardRow, {
    icon: /*#__PURE__*/React.createElement(AuditOutlined, null)
  }, /*#__PURE__*/React.createElement("span", null, cardItem.dishes)), cardItem.duration && /*#__PURE__*/React.createElement(FigmaCardRow, {
    icon: /*#__PURE__*/React.createElement(FieldTimeOutlined, null)
  }, /*#__PURE__*/React.createElement("span", null, cardItem.duration))), /*#__PURE__*/React.createElement(TableCardInfoRows, {
    cardItem: cardItem
  })));
}

/** 无数据占位：与蘸料摆台 Story 中占位卡片视觉对齐（虚线框 + #fafafa） */
function renderTableKindNoDataPlaceholder(cardItem, shape) {
  var _cardItem$placeholder, _cardItem$placeholder2, _cardItem$placeholder3;
  var borderColor = (_cardItem$placeholder = cardItem.placeholderBorderColor) !== null && _cardItem$placeholder !== void 0 ? _cardItem$placeholder : '#bfbfbf';
  var title = (_cardItem$placeholder2 = cardItem.placeholderTitle) !== null && _cardItem$placeholder2 !== void 0 ? _cardItem$placeholder2 : locales.getText("".concat(I18N_FIGMA, ".default-table"));
  var hint = (_cardItem$placeholder3 = cardItem.placeholderHint) !== null && _cardItem$placeholder3 !== void 0 ? _cardItem$placeholder3 : '';
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: '100%',
      height: '100%',
      boxSizing: 'border-box',
      padding: '8px 10px',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      minHeight: 0,
      fontSize: 11,
      lineHeight: 1.35,
      background: '#fafafa',
      borderRadius: shape === 'circle' ? '50%' : 8,
      border: "2px dashed ".concat(borderColor),
      boxShadow: 'none',
      overflow: 'hidden'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 600,
      color: '#595959',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
      textAlign: shape === 'circle' ? 'center' : undefined
    }
  }, title), hint ? /*#__PURE__*/React.createElement("div", {
    style: {
      color: '#8c8c8c',
      marginTop: 6,
      flexShrink: 0,
      fontSize: 10,
      textAlign: shape === 'circle' ? 'center' : undefined
    }
  }, hint) : null);
}

/** 渲染 Figma 样式的方桌卡片（上下小条 + 白底卡片 + 状态边框） */
export function renderFigmaStyleTableCard(cardItem) {
  var _cardItem$status2;
  if (cardItem.isNoDataPlaceholder) {
    return renderTableKindNoDataPlaceholder(cardItem, 'rect');
  }
  var status = (_cardItem$status2 = cardItem.status) !== null && _cardItem$status2 !== void 0 ? _cardItem$status2 : 'available';
  var borderColor = STATUS_BORDER[status];
  var isAvailable = status === 'available';
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: '100%',
      height: '100%',
      boxSizing: 'border-box',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-start',
      gap: 0,
      fontFamily: FIGMA.fontFamily,
      overflow: 'hidden'
    }
  }, /*#__PURE__*/React.createElement(CardBars, {
    count: getBarCountFromItemId(cardItem.id),
    position: "top",
    barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
  }), /*#__PURE__*/React.createElement(TableCardContent, {
    cardItem: cardItem
  }), /*#__PURE__*/React.createElement(CardBars, {
    count: getBarCountFromItemId(cardItem.id),
    position: "bottom",
    barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
  }));
}

/** 渲染 Figma 样式的圆桌卡片（圆形轮廓，展示桌号/状态/人数/区域） */
export function renderFigmaStyleRoundTableCard(cardItem) {
  var _cardItem$status3, _cardItem$displayName3, _cardItem$displayName4;
  if (cardItem.isNoDataPlaceholder) {
    return renderTableKindNoDataPlaceholder(cardItem, 'circle');
  }
  var status = (_cardItem$status3 = cardItem.status) !== null && _cardItem$status3 !== void 0 ? _cardItem$status3 : 'available';
  var borderColor = STATUS_BORDER[status];
  var isAvailable = status === 'available';
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: '100%',
      height: '100%',
      boxSizing: 'border-box',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      gap: 0,
      fontFamily: FIGMA.fontFamily,
      overflow: 'hidden',
      borderRadius: '50%',
      border: isAvailable ? "4px solid ".concat(FIGMA.gray200) : "4px solid ".concat(borderColor),
      background: FIGMA.white,
      boxShadow: FIGMA.shadowSm,
      padding: 8
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1,
      minHeight: 0,
      display: 'flex',
      flexDirection: 'column',
      justifyContent: isAvailable ? 'flex-start' : 'center',
      alignItems: 'center',
      width: '100%',
      overflow: 'hidden',
      gap: 2
    }
  }, isAvailable ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 600,
      fontSize: 16,
      lineHeight: '22px',
      color: FIGMA.gray700,
      textAlign: 'center'
    }
  }, (_cardItem$displayName3 = cardItem.displayName) !== null && _cardItem$displayName3 !== void 0 ? _cardItem$displayName3 : cardItem.id), (cardItem.capacity != null || cardItem.area != null && cardItem.area !== '') && /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      gap: 2,
      fontSize: 12,
      lineHeight: '18px',
      color: FIGMA.gray700
    }
  }, cardItem.capacity != null && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(TeamOutlined, {
    style: {
      marginRight: 4
    }
  }), locales.getText("".concat(I18N_FIGMA, ".capacity-seats")).replace(/\{n\}/g, String(cardItem.capacity))), cardItem.area != null && cardItem.area !== '' && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(EnvironmentOutlined, {
    style: {
      marginRight: 4
    }
  }), cardItem.area))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 600,
      fontSize: 16,
      lineHeight: '22px',
      color: FIGMA.gray900,
      textAlign: 'center'
    }
  }, (_cardItem$displayName4 = cardItem.displayName) !== null && _cardItem$displayName4 !== void 0 ? _cardItem$displayName4 : cardItem.id), status === 'reserved' && cardItem.customerName && /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 12,
      color: FIGMA.gray700,
      marginTop: 2
    }
  }, cardItem.customerName), (status === 'dining' || status === 'waiting' || status === 'billed') && cardItem.guests != null && /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 12,
      color: FIGMA.gray700,
      marginTop: 2
    }
  }, locales.getText("".concat(I18N_FIGMA, ".guests-count")).replace(/\{n\}/g, String(cardItem.guests))), (cardItem.capacity != null || cardItem.area != null && cardItem.area !== '') && /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 12,
      color: FIGMA.gray700,
      marginTop: 2
    }
  }, cardItem.capacity != null && locales.getText("".concat(I18N_FIGMA, ".capacity-seats")).replace(/\{n\}/g, String(cardItem.capacity)), cardItem.capacity != null && cardItem.area && ' · ', cardItem.area))));
}

/** 返回用于 renderItemByKind.table 的渲染函数（方桌） */
export function getRenderItemByKindTable(dataSources) {
  return function (item) {
    var cardItem = getFigmaTableCardFromMerged(item, dataSources);
    return renderFigmaStyleTableCard(cardItem);
  };
}

/** 返回用于 renderItemByKind.roundTable 的渲染函数（圆桌） */
export function getRenderItemByKindRoundTable(dataSources) {
  return function (item) {
    var cardItem = getFigmaTableCardFromMerged(item, dataSources);
    return renderFigmaStyleRoundTableCard(cardItem);
  };
}