import Taro from '@tarojs/taro';
import { CoverImage, CoverView, Image, View } from '@tarojs/components';
import ReleaseRoute from '../components/release-route';
import ReleaseBeBeing from '../components/release-be-being';
import CallingCar from '../components/calling-car';
import { formatDurationDisplay } from '../../../../utils/Robotaxi-public-method';

type Deps = {
  /** 是否安卓 */
  isAndroid: boolean;
  /** 行程状态 */
  tripStatus: number;
  /** 地图缩放等级 */
  mapScale: number;
  /** 地图 markers */
  markers: any[];
  /** 是否显示等待雷达 */
  shouldShowWaitingRadar: boolean;
  /** 等待雷达可见 */
  waitingRadarVisible: boolean;
  /** 等待雷达样式 */
  waitingRadarStyle: any;
  /** 等待雷达资源 */
  waitingRadarSrc: string;
  /** 车辆气泡可见 */
  carCalloutVisible: boolean;
  /** 车辆气泡样式 */
  carCalloutStyle: any;
  /** 到达气泡可见 */
  arriveCalloutVisible: boolean;
  /** 到达气泡样式 */
  arriveCalloutStyle: any;
  /** 到达态气泡渲染就绪（角度与缩放均就绪） */
  arrivedTooltipReady: boolean;
  /** 路线距离 */
  routeDistance: { value: number; unit: 'km' | 'm' } | null;
  /** 路线时长 */
  routeDuration: number | null;
  /** 自定义气泡图标 */
  customCalloutIconSrc: string;
  /** 上车点 */
  startSite: any;
  /** 下车点 */
  endSite: any;
  /** 发单 */
  callImmediately: () => void;
  /** 费用信息 */
  fareEstimate: any;
  /** 打开乘客须知 */
  handleOpenPassengerNotice: () => void;
  /** 步行时长 */
  walkingTime: number;
  /** 发单禁用 */
  isCallDisabled: boolean;
  /** 打开取消弹窗 */
  handleOpenCancelPopupByTripStatus: (status: number, durationDisplay?: any) => void;
  /** 取消超时 */
  handleOpenCancelPopupWithType: (type: number) => void;
  /** 行程状态设置 */
  setTripStatus: (value: number) => void;
  /** 完成倒计时启用 */
  finishCountdownEnabled: boolean;
  /** 订单 ID */
  orderId: string;
  /** 车辆信息 */
  vehicleInfo: any;
  /** 完成倒计时超时 */
  handleFinishCountdownTimeout: () => void;
  /** 重置版本 */
  resetDetailVersion: number;
  /** 价格版本 */
  priceUpdateVersion: number;
  /** 评价提交版本 */
  evaluateSubmitVersion: number;
  /** 评价关闭版本 */
  evaluateCloseVersion: number;
  /** 打开公告 */
  handleOpenAnnouncementsPopup: () => void;
  /** 打开结束弹窗 */
  handleOpenOverRoutePopup: () => void;
  /** 支付 */
  handlePay: () => void;
  /** 打开评价 */
  handleOpenEvaluatePopup: () => void;
  /** 详情展开回调 */
  handleToggleDetailFade: (expanded: boolean, hasFare: boolean) => void;
  /** 后备箱状态 */
  trunkStatus: boolean;
};

/**
 * 页面展示委托：地图覆盖物与行程卡片渲染。
 */
export default function useViewDelegates(deps: Deps) {
  /** 时长文案 */
  const durationDisplay = formatDurationDisplay(deps.routeDuration);

  /**
   * 渲染等待态气泡。
   */
  const renderWaitingCallout = (item: any, calloutKey: string) => (
    <CoverView slot='callout' marker-id={item.id} key={calloutKey} className='waiting-callout'>
      <CoverView className='waiting-callout-content'>
        <CoverView className={`waiting-callout-txt ${!deps.isAndroid && 'pr-6'}`}>
          {item.name}
          {!deps.isAndroid && <CoverView style={{ color: 'transparent' }}>占</CoverView>}
        </CoverView>
      </CoverView>
      <CoverImage className='waiting-radar' src={deps.waitingRadarSrc} />
    </CoverView>
  );

  /**
   * 渲染默认气泡。
   */
  const renderDefaultCallout = (item: any, calloutKey: string) => (
    <CoverView slot='callout' marker-id={item.id} key={calloutKey} className='custom-callout'>
      {(item.name !== '车辆位置' && !(item.id === 2 && [7].includes(deps.tripStatus))) && (
        <CoverView className={`custom-callout-content ${deps.isAndroid && 'txt-center '}`} style={{ zIndex: 1 }}>
          <CoverView style={{ lineHeight: '22px', display: 'flex', alignItems: 'center' }}>{item.name}</CoverView>
          {deps.isAndroid && <CoverView style={{ width: '2px' }}></CoverView>}
          {deps.tripStatus == 1 && <CoverImage className='custom-callout-icon' src={deps.customCalloutIconSrc} />}
        </CoverView>
      )}
      {(item.name === '车辆位置' && [4, 6].includes(deps.tripStatus) && !deps.isAndroid) && (
        <CoverView className='custom-callout-content' style={{ padding: '6px 10px', minWidth: '40px', justifyContent: 'center', zIndex: 2 }}>
          <CoverView className='car-time'>
            <CoverView className='car-time-num'>{deps.routeDistance?.value ?? 0}</CoverView>
            <CoverView>{deps.routeDistance?.unit === 'm' ? '米' : '公里'}</CoverView>
            <CoverView style={{ marginLeft: '2.5px' }} className='car-time-num'>{durationDisplay.value}</CoverView>
            <CoverView>{durationDisplay.unit}</CoverView>
          </CoverView>
        </CoverView>
      )}
      {(item.id === 2 && [7].includes(deps.tripStatus) && !deps.isAndroid && deps.arrivedTooltipReady) && (
        <CoverView className='custom-callout-content'>
          已到达
        </CoverView>
      )}
    </CoverView>
  );

  /**
   * 渲染单个 marker 气泡。
   */
  const renderMarkerCallout = (item: any, index: number) => {
    const calloutKey = `callout-${item.id}-${item.name || ''}`;
    const isWaiting = [2, 3].includes(deps.tripStatus) && index === 0;
    if (isWaiting) return renderWaitingCallout(item, calloutKey);
    if (item.name === '车辆位置' && deps.isAndroid && [4, 6].includes(deps.tripStatus)) return null;
    return renderDefaultCallout(item, calloutKey);
  };

  /**
   * 渲染地图覆盖层。
   */
  const renderMapOverlays = () => (
    <>
      {!(deps.isAndroid && [1, 5, 8, 9, 10].includes(deps.tripStatus)) && deps.markers.map(renderMarkerCallout)}
      {deps.shouldShowWaitingRadar && deps.waitingRadarVisible && (
        <Image className="waiting-radar-img" src={deps.waitingRadarSrc} webp={true} style={deps.waitingRadarStyle} />
      )}
      {deps.isAndroid && deps.carCalloutVisible && (
        <View className="car-callout-android" style={deps.carCalloutStyle}>
          <View className="custom-callout-content" style={{ padding: '6px 10px' }}>
            <View className="car-time" style={{ alignItems: 'flex-end' }}>
              <View className="car-time-num">{deps.routeDistance?.value ?? 0}</View>
              <View style={{ flexShrink: 0 }}>{deps.routeDistance?.unit === 'm' ? '米' : '公里'}</View>
              <View style={{ marginLeft: '2.5px' }} className="car-time-num">{durationDisplay.value}</View>
              <View style={{ flexShrink: 0 }}>{durationDisplay.unit}</View>
            </View>
          </View>
        </View>
      )}
      {deps.isAndroid && deps.arriveCalloutVisible && deps.arrivedTooltipReady && (
        <View className="car-callout-android" style={deps.arriveCalloutStyle}>
          <View className="custom-callout-content">
            已到达
          </View>
        </View>
      )}
    </>
  );

  /**
   * 渲染底部行程卡片。
   */
  const renderTripCard = () => {
    if (deps.tripStatus == 1 && deps.startSite && deps.endSite) {
      return (
        <ReleaseRoute
          startSite={deps.startSite}
          endSite={deps.endSite}
          callImmediately={deps.callImmediately}
          fareEstimate={deps.fareEstimate}
          handleOpenPassengerNotice={deps.handleOpenPassengerNotice}
          walkingTime={deps.walkingTime}
          isCallDisabled={deps.isCallDisabled}
        />
      );
    }
    if (deps.tripStatus == 2) {
      return (
        <ReleaseBeBeing
          handleOpenCancelPopup={() => deps.handleOpenCancelPopupByTripStatus(2)}
          onFinish={() => {
            deps.setTripStatus(3);
            Taro.setStorageSync('tripStatus', 3);
          }}
        />
      );
    }
    if (deps.tripStatus >= 3 && deps.tripStatus !== 10) {
      return (
        <CallingCar
          key={deps.tripStatus}
          orderId={deps.orderId}
          tripStatus={deps.tripStatus}
          finishCountdownEnabled={deps.finishCountdownEnabled}
          vehicleInfo={deps.vehicleInfo}
          handleOpenCancelPopup={(displayInfo) => deps.handleOpenCancelPopupByTripStatus(deps.tripStatus, displayInfo)}
          handleCancelTimeout={() => deps.handleOpenCancelPopupWithType(4)}
          handleFinishTimeout={deps.handleFinishCountdownTimeout}
          resetDetailVersion={deps.resetDetailVersion}
          priceUpdateVersion={deps.priceUpdateVersion}
          evaluateSubmitVersion={deps.evaluateSubmitVersion}
          evaluateCloseVersion={deps.evaluateCloseVersion}
          handleOpenAnnouncementsPopup={deps.handleOpenAnnouncementsPopup}
          handleOpenOverRoutePopup={deps.handleOpenOverRoutePopup}
          handlePay={deps.handlePay}
          handleOpenEvaluatePopup={deps.handleOpenEvaluatePopup}
          estimatedWaitMinutes={deps.fareEstimate?.waitingTime}
          routeDurationSeconds={deps.routeDuration}
          onToggleDetailFade={deps.handleToggleDetailFade}
          orderTrunkStatus={deps.trunkStatus}
        />
      );
    }
    return null;
  };

  return {
    durationDisplay,
    renderMapOverlays,
    renderTripCard
  };
}