import type { Dispatch, SetStateAction } from 'react';
import { ArrowDown, ArrowUp, Minimize2, RotateCcw } from 'lucide-react';
import { motion } from 'motion/react';
import Blur from '../../../../components/Blur';
import type { MileageSourceGroup, MonitoringFilters, MonitoringStats, MonitoringVehicle } from '../../types';
import { vehicleStatisticTime } from '../oneos-time';
import { MILEAGE_SOURCE_META, vehicleSourceDisplay } from '../source-display';

type SortBy = 'today' | 'total' | 'statisticTime';
type SortOrder = 'asc' | 'desc';

export default function FullscreenMonitoring({
  forceLandscape,
  fullscreenStats,
  sortBy,
  sourcePriority,
  onRefresh,
  fullscreenLoading,
  onToggleFullscreen,
  filterTargetNames,
  onFilterTargetNamesChange,
  filterOptions,
  filterPlates,
  filterCustomer,
  onFilterCustomerChange,
  filterBrands,
  onFilterBrandsChange,
  filterRentStatus,
  onFilterRentStatusChange,
  filterDept,
  onFilterDeptChange,
  departments,
  sortOrder,
  onSortByChange,
  onSortOrderChange,
  fullscreenVehicles,
  isHighMileageAlert,
  relativeNow,
}: {
  forceLandscape: boolean;
  fullscreenStats: MonitoringStats;
  sortBy: SortBy;
  sourcePriority: MileageSourceGroup[];
  onRefresh: () => void;
  fullscreenLoading: boolean;
  onToggleFullscreen: () => void;
  filterTargetNames: string[];
  onFilterTargetNamesChange: Dispatch<SetStateAction<string[]>>;
  filterOptions: MonitoringFilters;
  filterPlates: string[];
  filterCustomer: string;
  onFilterCustomerChange: (value: string) => void;
  filterBrands: string[];
  onFilterBrandsChange: (value: string[]) => void;
  filterRentStatus: string;
  onFilterRentStatusChange: (value: string) => void;
  filterDept: string;
  onFilterDeptChange: (value: string) => void;
  departments: string[];
  sortOrder: SortOrder;
  onSortByChange: Dispatch<SetStateAction<SortBy>>;
  onSortOrderChange: Dispatch<SetStateAction<SortOrder>>;
  fullscreenVehicles: MonitoringVehicle[];
  isHighMileageAlert: (vehicle: MonitoringVehicle) => boolean;
  relativeNow: number;
}) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed z-[100] bg-slate-950 flex flex-col overflow-hidden"
      style={
        forceLandscape
          ? {
              // 小程序 webview 无法真横屏，强制 CSS 旋转 90 度模拟横屏
              top: 0,
              left: '100vw',
              width: '100vh',
              height: '100vw',
              transform: 'rotate(90deg)',
              transformOrigin: 'top left',
            }
          : { top: 0, left: 0, right: 0, bottom: 0 }
      }
    >
      {/* Top bar: compact inline KPI */}
      <div className="flex-shrink-0 px-3 py-2 border-b border-slate-800/60 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <div className="w-0.5 h-4 bg-blue-500 rounded-full"></div>
            <h2 className="text-white font-bold text-xs">全屏监控</h2>
          </div>
          <div className="flex items-center gap-3 text-[10px]">
            <span className="text-slate-500">区间 <span className="text-white font-black">{Math.round(fullscreenStats.totalToday).toLocaleString()}</span> <span className="text-blue-400">km</span></span>
            <span className="text-slate-700">|</span>
            <span className="text-slate-500">累计 <span className="text-white font-black">{Math.round(fullscreenStats.totalAll).toLocaleString()}</span> <span className="text-blue-400">km</span></span>
            <span className="text-slate-700">|</span>
            <span className="text-slate-500">车辆 <span className="text-white font-black">{fullscreenStats.vehicleCount}</span> 台</span>
            <span className="text-slate-700">|</span>
            <span className="text-slate-500">均 <span className="text-white font-black">{(fullscreenStats.vehicleCount > 0 ? (sortBy === 'total' ? fullscreenStats.totalAll : fullscreenStats.totalToday) / fullscreenStats.vehicleCount : 0).toFixed(0)}</span> <span className="text-blue-400">km</span></span>
            <span className="text-slate-700">|</span>
            <span className="text-slate-500">
              来源 <span className="text-white font-black">
                {sourcePriority.map(group => MILEAGE_SOURCE_META[group].label).join(' > ')}
              </span>
            </span>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={onRefresh}
            className={`p-1.5 text-slate-500 hover:text-blue-400 transition-colors ${fullscreenLoading ? 'animate-spin' : ''}`}
          >
            <RotateCcw size={13} />
          </button>
          <button onClick={onToggleFullscreen} className="p-1.5 text-slate-500 hover:text-white transition-colors">
            <Minimize2 size={14} />
          </button>
        </div>
      </div>

      {/* Batch selector + legend */}
      <div className="flex-shrink-0 px-3 py-1 border-b border-slate-800/60 flex items-center justify-between">
        <div className="flex items-center gap-1 overflow-x-auto no-scrollbar">
          <button
            onClick={() => onFilterTargetNamesChange([])}
            className={`px-2 py-0.5 rounded text-[8px] font-bold transition-all whitespace-nowrap ${filterTargetNames.length === 0 ? 'bg-blue-600 text-white' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'}`}
          >全部</button>
          {filterOptions.targetNames.map(n => (
            <button
              key={n}
              onClick={() => onFilterTargetNamesChange(prev => prev.includes(n) ? prev.filter(item => item !== n) : [...prev, n])}
              className={`px-2 py-0.5 rounded text-[8px] font-bold transition-all whitespace-nowrap ${filterTargetNames.includes(n) ? 'bg-blue-600 text-white' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'}`}
            >{n.replace(/交投|羚牛|恒运/, '').replace(/辆/, '台')}</button>
          ))}
        </div>
        <div className="flex items-center gap-2 text-[8px] text-slate-500 flex-shrink-0 ml-2">
          <span className="flex items-center gap-0.5"><span className="w-1.5 h-1.5 rounded-full bg-green-500 inline-block"></span>在线</span>
          <span className="flex items-center gap-0.5"><span className="w-1.5 h-1.5 rounded-full bg-slate-500 inline-block"></span>离线</span>
          <span className="flex items-center gap-0.5"><span className="w-1.5 h-1.5 rounded-full bg-amber-400 inline-block"></span>未对接</span>
        </div>
      </div>

      {/* Table Area */}
      <div className="flex-1 overflow-hidden flex flex-col">
        <div className="flex-1 overflow-auto relative">
          {fullscreenLoading && (
            <div className="absolute inset-0 bg-slate-950/60 z-20 flex items-center justify-center">
              <div className="flex items-center gap-2 text-slate-400 text-xs font-bold">
                <RotateCcw size={14} className="animate-spin" />
                加载中...
              </div>
            </div>
          )}
          <table className="w-full text-left border-collapse">
            <thead className="sticky top-0 bg-slate-900 z-10">
              <tr className="border-b border-slate-800/60">
                <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase w-12 text-center">状态</th>
                <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
                  <div className="flex flex-col gap-1">
                    <span>车牌号</span>
                    <span className="text-[9px] text-slate-500 font-normal">
                      {filterPlates.length === 0 ? '全部' : `已选 ${filterPlates.length}`}
                    </span>
                  </div>
                </th>
                <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
                  <div className="flex flex-col gap-1">
                    <span>客户</span>
                    <input
                      type="text"
                      className="bg-slate-800 border-none rounded px-2 py-0.5 text-[9px] text-slate-300 outline-none focus:ring-1 focus:ring-blue-500/30 w-20"
                      placeholder={filterCustomer === 'All' ? '全部' : filterCustomer}
                      defaultValue=""
                      onBlur={(e) => {
                        const val = e.target.value.trim();
                        onFilterCustomerChange(val || 'All');
                        e.target.value = '';
                      }}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter') {
                          const val = (e.target as HTMLInputElement).value.trim();
                          onFilterCustomerChange(val || 'All');
                          (e.target as HTMLInputElement).value = '';
                        }
                      }}
                    />
                  </div>
                </th>
                <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
                  <div className="flex flex-col gap-1">
                    <span>品牌</span>
                    <input
                      type="text"
                      className="bg-slate-800 border-none rounded px-2 py-0.5 text-[9px] text-slate-300 outline-none focus:ring-1 focus:ring-blue-500/30 w-16"
                      placeholder={filterBrands.length === 0 ? '全部' : `已选${filterBrands.length}`}
                      defaultValue=""
                      onBlur={(e) => {
                        const val = e.target.value.trim();
                        if (val) {
                          onFilterBrandsChange(filterBrands.includes(val) ? filterBrands.filter(b => b !== val) : [...filterBrands, val]);
                        }
                        e.target.value = '';
                      }}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter') {
                          const val = (e.target as HTMLInputElement).value.trim();
                          if (val) {
                            onFilterBrandsChange(filterBrands.includes(val) ? filterBrands.filter(b => b !== val) : [...filterBrands, val]);
                          }
                          (e.target as HTMLInputElement).value = '';
                        }
                      }}
                    />
                  </div>
                </th>
                <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
                  <div className="flex flex-col gap-1">
                    <span>租赁状态</span>
                    <select
                      className="bg-slate-800 border-none rounded px-2 py-0.5 text-[9px] text-slate-300 outline-none focus:ring-1 focus:ring-blue-500/30"
                      value={filterRentStatus}
                      onChange={(e) => onFilterRentStatusChange(e.target.value)}
                    >
                      <option value="All">全部状态</option>
                      {filterOptions.rentStatuses.map(s => <option key={s} value={s}>{s}</option>)}
                    </select>
                  </div>
                </th>
                <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
                  <div className="flex flex-col gap-1">
                    <span>部门</span>
                    <select
                      className="bg-slate-800 border-none rounded px-2 py-0.5 text-[9px] text-slate-300 outline-none focus:ring-1 focus:ring-blue-500/30"
                      value={filterDept}
                      onChange={(e) => onFilterDeptChange(e.target.value)}
                    >
                      <option value="All">全部部门</option>
                      <option value="__EMPTY__">无值</option>
                      {departments.map(d => <option key={d} value={d}>{d.replace('业务', '')}</option>)}
                    </select>
                  </div>
                </th>
                <th
                  className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase text-right cursor-pointer hover:text-blue-400 transition-colors"
                  onClick={() => {
                    if (sortBy === 'today') {
                      onSortOrderChange(sortOrder === 'desc' ? 'asc' : 'desc');
                    } else {
                      onSortByChange('today');
                      onSortOrderChange('desc');
                    }
                  }}
                >
                  <div className="flex items-center justify-end gap-1">
                    <span>区间里程</span>
                    {sortBy === 'today' && (
                      sortOrder === 'desc' ? <ArrowDown size={10} /> : <ArrowUp size={10} />
                    )}
                  </div>
                </th>
                <th
                  className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase text-right cursor-pointer hover:text-blue-400 transition-colors"
                  onClick={() => {
                    if (sortBy === 'total') {
                      onSortOrderChange(sortOrder === 'desc' ? 'asc' : 'desc');
                    } else {
                      onSortByChange('total');
                      onSortOrderChange('desc');
                    }
                  }}
                >
                  <div className="flex items-center justify-end gap-1">
                    <span>累计里程</span>
                    {sortBy === 'total' && (
                      sortOrder === 'desc' ? <ArrowDown size={10} /> : <ArrowUp size={10} />
                    )}
                  </div>
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-800/30">
              {fullscreenVehicles.map((v) => {
                const highMileageAlert = isHighMileageAlert(v);
                const statisticTime = vehicleStatisticTime(v, relativeNow);
                const sourceDisplay = vehicleSourceDisplay(v);
                return (
                <tr key={v.plate} className="hover:bg-slate-800/20 transition-colors">
                  <td className="px-3 py-2 text-center">
                    <div className={`w-2 h-2 rounded-full mx-auto ${v.isOnline ? 'bg-green-500 shadow-[0_0_6px_rgba(34,197,94,0.4)]' : (v.isDataSynced || v.totalKm != null) ? 'bg-slate-600' : 'bg-amber-400 animate-pulse'}`}></div>
                  </td>
                  <td className="px-3 py-2">
                    <div className="flex items-center gap-1.5">
                      <div className="text-xs font-bold text-white"><Blur>{v.plate}</Blur></div>
                      <span
                        className={`inline-flex shrink-0 rounded px-1.5 py-0.5 text-[7px] font-black ${sourceDisplay.className}`}
                        title={sourceDisplay.title}
                      >
                        {sourceDisplay.label}
                      </span>
                    </div>
                    <div className={`mt-0.5 text-[8px] font-bold ${statisticTime.color}`} title={statisticTime.title}>
                      {statisticTime.label}
                    </div>
                  </td>
                  <td className="px-3 py-2 text-[11px] text-slate-400"><Blur>{v.customer || '-'}</Blur></td>
                  <td className="px-3 py-2 text-[11px] text-slate-400">{v.brand || '-'}</td>
                  <td className="px-3 py-2 text-[11px] text-slate-400">{v.rentStatus || '-'}</td>
                  <td className="px-3 py-2 text-[11px] text-slate-400">{v.department || '-'}</td>
                  <td className="px-3 py-2 text-right">
                    <span className={`text-xs font-mono font-bold ${(v.isDataSynced || v.totalKm != null) ? (highMileageAlert ? 'text-red-400' : 'text-blue-400') : 'text-amber-400'}`}>
                      {(v.isDataSynced || v.totalKm != null) ? <>{v.mileageAnomaly ? '数据异常' : Math.max(0, v.dailyKm || 0).toLocaleString()} <span className={`text-[8px] ${highMileageAlert ? 'text-red-400/70' : 'text-slate-500'}`}>{v.mileageAnomaly ? '' : 'km'}</span></> : <span className="text-[8px] text-amber-500/50">未对接</span>}
                    </span>
                  </td>
                  <td className="px-3 py-2 text-right">
                    <span className={`text-xs font-mono font-bold ${v.isDataSynced ? 'text-slate-300' : 'text-slate-600'}`}>
                      {v.totalKm != null ? <>{v.totalKm.toLocaleString()} <span className="text-[8px] text-slate-500">km</span></> : <span className="text-[8px] text-amber-500/50">未对接</span>}
                    </span>
                  </td>
                </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </motion.div>
  );
}