import React, {useMemo, useState} from 'react';
import {Search, Truck, Plane, Inbox} from 'lucide-react';

const labels = {
  RECEIVING:'接收正常',GOOD:'正常',CONNECTED:'服务连接正常',STALE:'数据已过期',
  NOT_RECEIVED:'未接收',MISSING:'未采到',ERROR:'数据异常',WAITING:'等待数据同步',
  INVALID_TIME:'时间异常',INVALID_VALUE:'数值异常',AMBIGUOUS:'来源不明确',
  online:'在线',offline:'离线',UNKNOWN:'未接入',
};
export function Status({state='UNKNOWN', label}) {
  const tone = ['RECEIVING','GOOD','CONNECTED','online'].includes(state) ? 'good' : ['STALE','INVALID_TIME','AMBIGUOUS'].includes(state) ? 'warn' : ['ERROR','INVALID_VALUE'].includes(state) ? 'bad' : 'muted';
  return <span className={`status status-${tone}`}><i />{label || labels[state] || labels.UNKNOWN}</span>;
}
export function Panel({title,children,extra,className=''}) {
  return <section className={`panel ${className}`}>{(title||extra)&&<div className="panel-title"><h2>{title}</h2>{extra&&<div className="panel-extra">{extra}</div>}</div>}{children}</section>;
}
export function Empty({title='暂无数据',description,icon:Icon=Inbox}) {
  return <div className="empty-state"><Icon size={35} strokeWidth={1.4}/><strong>{title}</strong>{description&&<p>{description}</p>}</div>;
}
export function EquipmentIcon({equipment,size=25}) {
  const air=/无人机|航空|飞行|UAV/i.test(`${equipment?.name||''} ${equipment?.code||''} ${equipment?.type||''}`);
  const Icon=air?Plane:Truck;
  return <Icon size={size} strokeWidth={1.7}/>;
}
export function EquipmentList({equipments=[],selectedId,onSelect,title='实装列表',emptyText='暂无已绑定装备'}) {
  const [search,setSearch]=useState('');
  const filtered=useMemo(()=>equipments.filter(item=>`${item.name||''} ${item.code||''}`.toLowerCase().includes(search.trim().toLowerCase())),[equipments,search]);
  return <Panel title={title} className="equipment-list"><label className="search-input"><Search size={17}/><input type="search" aria-label="搜索装备名称或编号" placeholder="搜索装备名称或编号" value={search} onChange={event=>setSearch(event.target.value)}/></label><div className="equipment-rows">{filtered.map(item=><button type="button" className={`equipment-row ${selectedId===item.id?'selected':''}`} key={item.id} onClick={()=>onSelect?.(item.id)} aria-pressed={selectedId===item.id}><EquipmentIcon equipment={item}/><span className="equipment-row-copy"><strong>{item.name||item.code||'未命名装备'}</strong><small>{item.code||item.participantCode||'—'}</small></span><Status state={item.state}/></button>)}</div>{!filtered.length&&<Empty title={search?'无匹配装备':emptyText} description={search?'请调整名称或编号。':'绑定装备后将在此显示。'}/>}</Panel>;
}
export function EquipmentHeader({equipment,statusLabel}) {
  if(!equipment)return null;
  return <Panel className="equipment-header"><div className="equipment-heading"><EquipmentIcon equipment={equipment} size={46}/><div><h2>{equipment.name||equipment.code||'未命名装备'}</h2><p>{equipment.code||'—'}<span>·</span>{equipment.type||'实装装备'}</p></div><Status state={equipment.state} label={statusLabel}/></div><div className="equipment-updated">最近接收 <time>{formatTime(equipment.lastReceivedAt)}</time></div></Panel>;
}
export function formatTime(value) {
  if(value===null||value===undefined||value==='')return '—';
  const date=new Date(value);
  if(Number.isNaN(date.getTime()))return '—';
  return new Intl.DateTimeFormat('zh-CN',{timeZone:'Asia/Shanghai',hour:'2-digit',minute:'2-digit',second:'2-digit',hour12:false}).format(date);
}