const BEndMobileAppView = ({ industry }) => {
  const seed = scenarios[industry].map(s => s.mobileTask).filter(Boolean);
  const [tasks, setTasks] = React.useState(seed);
  const [activeTask, setActiveTask] = React.useState(null);
  const [filter, setFilter] = React.useState('all');

  React.useEffect(() => {
    setTasks(scenarios[industry].map(s => s.mobileTask).filter(Boolean));
    setActiveTask(null);
    setFilter('all');
  }, [industry]);

  const handleComplete = (taskId) => {
    setTasks(prev => prev.map(t => t.id === taskId ? { ...t, status: 'completed' } : t));
    setActiveTask(null);
  };

  const pending = tasks.filter(t => t.status !== 'completed').length;
  const urgent = tasks.filter(t => t.status === 'urgent').length;
  const done = tasks.filter(t => t.status === 'completed').length;
  const shown = tasks.filter(t => filter === 'all' ? true : filter === 'urgent' ? t.status === 'urgent' : t.status === 'completed');

  return (
    <div className="animate-fade-in-up w-full max-w-5xl mx-auto flex flex-col lg:flex-row items-center lg:items-start justify-center gap-10">
      <div className="hidden lg:flex flex-col gap-4 w-[260px] pt-6 order-2 lg:order-1">
        <Kicker>Frontline · 一线接单</Kicker>
        <div className="surface-card rounded-2xl p-5">
          <div className="flex items-center gap-2.5 mb-2">
            <div className="w-8 h-8 rounded-lg ink-panel text-brand-300 flex items-center justify-center"><Icon name="tablet-smartphone" className="w-4 h-4" /></div>
            <div className="text-[14px] font-bold text-slate-900">实时工单 PDA</div>
          </div>
          <p className="text-[12px] text-slate-500 font-medium leading-relaxed">网关解析后，按优先级直推一线手持设备。</p>
        </div>
        <div className="surface-card rounded-2xl p-5 space-y-3.5">
          {[['route', '优先级路由', 'P0 突破队列直达'], ['timer', 'SLA 倒计时', '逾时自动升级'], ['check-circle', '一键闭环', '结果实时回传']].map(([ic, t, d]) => (
            <div key={t} className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-lg bg-brand-50 border border-brand-100 flex items-center justify-center text-brand-600 shrink-0"><Icon name={ic} className="w-4 h-4" /></div>
              <div className="min-w-0"><div className="text-[12.5px] font-bold text-slate-900">{t}</div><div className="text-[11px] text-slate-400 font-medium">{d}</div></div>
            </div>
          ))}
        </div>
      </div>

      <div className="phone-stage phone-stage-pda flex justify-center mt-6 order-1 lg:order-2">
        <div className="phone-shell-pda bg-white rounded-[3rem] border-[12px] border-slate-900 shadow-2xl relative flex flex-col overflow-hidden">
          <div className="absolute top-0 inset-x-0 h-7 bg-slate-900 rounded-b-3xl w-36 mx-auto z-30 flex justify-center items-end pb-2">
            <div className="w-12 h-1 bg-slate-700 rounded-full" />
          </div>

          <div className="bg-white px-5 pt-12 pb-4 border-b border-slate-200 z-10">
            <div className="flex items-start justify-between">
              <div>
                <div className="flex items-center gap-2">
                  <div className="font-display text-[22px] font-semibold tracking-tight text-slate-900">工作流管家</div>
                  <span className="inline-flex items-center rounded-md bg-brand-50 border border-brand-200 px-2 py-0.5 text-[11px] font-bold text-brand-700 tnum">{pending} 待办</span>
                </div>
                <div className="text-[12px] text-slate-500 mt-1.5 font-semibold">{industry === 'restaurant' ? '南山旗舰店 · 楼面主管' : '中心店 · 大堂副理'}</div>
              </div>
              <div className="w-10 h-10 rounded-xl bg-slate-50 border border-slate-200 flex items-center justify-center shadow-sm relative text-slate-700">
                <Icon name="bell" className="w-5 h-5" />
                {urgent > 0 && <div className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border border-white pulse-glow" />}
              </div>
            </div>
            <div className="grid grid-cols-3 gap-2 mt-5">
              <QueueMetric label="待处理" value={pending} tone="ink" />
              <QueueMetric label="加急" value={urgent} tone={urgent > 0 ? 'risk' : 'muted'} />
              <QueueMetric label="已完成" value={done} tone="muted" />
            </div>
            <div className="mt-4 flex gap-1.5 bg-slate-50 p-1 rounded-xl border border-slate-200">
              {[['all', '全部'], ['urgent', '加急'], ['completed', '已完成']].map(([k, l]) => (
                <button key={k} onClick={() => setFilter(k)} className={`flex-1 py-1.5 rounded-lg text-[12px] font-bold transition-all cursor-pointer ${filter === k ? 'bg-white text-slate-900 shadow-sm border border-slate-200' : 'text-slate-500'}`}>{l}</button>
              ))}
            </div>
          </div>

          <div className="flex-1 overflow-y-auto bg-[#f4f1ea] p-4 space-y-3 no-scrollbar">
            <div className="flex items-center justify-between px-1">
              <div className="text-[11px] font-bold text-slate-500 uppercase tracking-kicker">流转队列</div>
              <div className="text-[11px] font-mono font-semibold text-slate-400">{shown.length} ITEMS</div>
            </div>
            {shown.length === 0 ? (
              <div className="flex flex-col items-center text-slate-400 mt-16">
                <Icon name="inbox" className="w-10 h-10 mb-3 opacity-50" />
                <span className="text-sm font-semibold">该分类暂无工单</span>
              </div>
            ) : shown.map(task => <TaskCard key={task.id} task={task} onSelect={setActiveTask} />)}
          </div>

          <div className="bg-white border-t border-slate-200 px-6 py-3 pb-8 flex justify-between items-center shadow-[0_-10px_20px_rgba(28,26,22,0.03)] z-10">
            <MobileNavItem icon="list-todo" label="待办" active />
            <MobileNavItem icon="message-square" label="消息" />
            <MobileNavItem icon="bar-chart-3" label="绩效" />
            <MobileNavItem icon="user-circle" label="我的" />
          </div>

          {activeTask && (
            <TaskDetailSheet task={activeTask} onClose={() => setActiveTask(null)} onComplete={() => handleComplete(activeTask.id)} />
          )}
        </div>
      </div>
    </div>
  );
};

const QueueMetric = ({ label, value, tone }) => {
  const color = tone === 'risk' ? 'text-red-600' : tone === 'muted' ? 'text-slate-400' : 'text-slate-900';
  return (
    <div className="rounded-xl border border-slate-200 bg-slate-50 px-3 py-2.5">
      <div className={`font-display text-[22px] font-semibold leading-none tnum ${color}`}>{value}</div>
      <div className="text-[10px] font-semibold text-slate-500 mt-1.5">{label}</div>
    </div>
  );
};

const SlaChip = ({ minutes }) => (
  <span className={`inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-bold tnum ${minutes <= 8 ? 'bg-red-50 text-red-600 border border-red-200' : 'bg-amber-50 text-amber-700 border border-amber-200'}`}>
    <Icon name="timer" className="w-3 h-3" /> SLA {minutes}min
  </span>
);

const TaskCard = ({ task, onSelect }) => {
  const completed = task.status === 'completed';
  const urgent = task.status === 'urgent';
  return (
    <div
      onClick={() => !completed && onSelect(task)}
      className={`bg-white rounded-2xl p-4 shadow-sm border transition-all ${completed ? 'border-slate-200 opacity-60 cursor-not-allowed' : urgent ? 'border-red-200 shadow-[0_8px_24px_-12px_rgba(192,57,43,0.35)] cursor-pointer active:scale-[0.99]' : 'border-slate-200 hover:border-brand-300 cursor-pointer active:scale-[0.99]'}`}
    >
      <div className="flex justify-between items-start gap-3">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2 mb-1">
            <span className={`h-2 w-2 rounded-full shrink-0 ${urgent ? 'bg-red-500' : completed ? 'bg-slate-300' : 'bg-brand-500'}`} />
            <div className="text-[15px] font-bold text-slate-900 truncate">{task.title}</div>
          </div>
          <div className="text-[11px] text-slate-500 font-semibold flex items-center gap-2">
            <span className="font-mono">{task.id}</span> · {task.time}
          </div>
        </div>
        {completed
          ? <span className="shrink-0 rounded-md bg-slate-100 px-2 py-1 text-[11px] font-bold text-slate-500">已完结</span>
          : urgent
            ? <span className="shrink-0 rounded-md border border-red-200 bg-red-50 px-2 py-1 text-[11px] font-bold text-red-600">加急 P0</span>
            : <span className="shrink-0 rounded-md border border-brand-200 bg-brand-50 px-2 py-1 text-[11px] font-bold text-brand-700">新单</span>}
      </div>

      <div className="mt-3 rounded-xl border border-slate-200 bg-slate-50/70 p-3">
        <div className="text-xs font-bold text-slate-900 mb-1 flex items-center gap-1.5"><Icon name="user" className="w-3.5 h-3.5 text-slate-500" /> {task.customer}</div>
        <div className="text-[12px] text-slate-600 leading-relaxed font-medium">{task.detail}</div>
      </div>

      <div className="mt-3 flex items-center justify-between gap-2">
        <div className="flex gap-1.5 flex-wrap min-w-0">
          {task.tags.map((tag, i) => (
            <span key={i} className={`text-[10px] px-2 py-0.5 rounded-md border font-bold ${tag.includes('过敏') || tag.includes('P0') || tag.includes('食安') ? 'bg-red-50 border-red-200 text-red-600' : 'bg-white border-slate-200 text-slate-600'}`}>{tag}</span>
          ))}
        </div>
        {!completed && <SlaChip minutes={task.sla} />}
      </div>
    </div>
  );
};

const MobileNavItem = ({ icon, label, active = false }) => (
  <div className={`flex flex-col items-center gap-1 cursor-pointer ${active ? 'text-slate-900' : 'text-slate-400 hover:text-slate-600'}`}>
    <Icon name={icon} className="w-5 h-5" />
    <span className={`text-[10px] ${active ? 'font-bold' : 'font-medium'}`}>{label}</span>
    {active && <span className="h-0.5 w-4 rounded-full bg-brand-500" />}
  </div>
);

const ACTION_STEPS = {
  booking: ['核验包房低消标准（V1 ¥6800）', '确认忌口已同步后厨置顶', '放行定金支付链接给客户'],
  lead: ['查阅星空厅可用档期', '准备布展与定制菜单方案', '10 分钟内致电客户沟通'],
  risk: ['立即致电客户致歉与安抚', '启动留样复检 / 就医协助 SOP', '同步 GM 并准备赔付预案'],
  repair: ['携带工具立即上门维修', '客房保洁同步清理现场', '通知 AM 进行客情安抚与赔付']
};

const TaskDetailSheet = ({ task, onClose, onComplete }) => {
  const steps = ACTION_STEPS[task.type] || ['受理工单', '现场处置', '回传闭环'];
  return (
    <div className="absolute inset-0 z-50 flex flex-col justify-end animate-fade-in">
      <div className="absolute inset-0 bg-slate-900/45 backdrop-blur-sm" onClick={onClose} />
      <div className="bg-white w-full rounded-t-3xl shadow-2xl relative z-10 flex flex-col max-h-[88%] animate-fade-in-up">
        <div className="w-12 h-1.5 bg-slate-300 rounded-full mx-auto my-3" />
        <div className="px-6 pb-3 border-b border-slate-100 flex justify-between items-center">
          <h3 className="font-display text-[19px] font-semibold text-slate-900">工单处理详情</h3>
          <div className="p-1.5 cursor-pointer bg-slate-100 rounded-full hover:bg-slate-200 transition-colors" onClick={onClose}><Icon name="x" className="w-4 h-4 text-slate-500" /></div>
        </div>
        <div className="p-6 overflow-y-auto flex-1 space-y-5 no-scrollbar">
          <div>
            <div className="flex items-center gap-2 mb-1.5">
              <span className="text-[11px] font-mono font-bold text-slate-400">{task.id}</span>
              {task.status === 'urgent' && <Badge variant="destructive">P0 紧急</Badge>}
              <SlaChip minutes={task.sla} />
            </div>
            <div className="text-[19px] font-bold text-slate-900">{task.title}</div>
          </div>

          <div className="bg-slate-50 p-4 rounded-2xl border border-slate-200">
            <div className="flex items-center gap-3 mb-3">
              <div className="w-10 h-10 rounded-xl ink-panel text-brand-300 flex items-center justify-center"><Icon name="user" className="w-5 h-5" /></div>
              <div className="flex-1 min-w-0"><div className="font-bold text-sm text-slate-900 truncate">{task.customer}</div><div className="text-xs text-slate-500 font-medium tnum">138****8888</div></div>
              <div className="w-9 h-9 rounded-full bg-emerald-50 text-emerald-600 border border-emerald-200 flex items-center justify-center cursor-pointer hover:bg-emerald-100"><Icon name="phone" className="w-4 h-4" /></div>
            </div>
            <div className="text-[13px] text-slate-700 leading-relaxed font-medium">{task.detail}</div>
          </div>

          <div>
            <div className="text-[11px] text-slate-500 mb-2.5 font-bold uppercase tracking-kicker">AI 提取标签</div>
            <div className="flex gap-2 flex-wrap">
              {task.tags.map((tag, i) => <span key={i} className={`text-xs px-2.5 py-1 rounded-md font-bold border ${tag.includes('过敏') || tag.includes('P0') || tag.includes('食安') ? 'bg-red-50 border-red-200 text-red-600' : 'bg-white border-slate-200 text-slate-700'}`}>{tag}</span>)}
            </div>
          </div>

          <div className="rounded-2xl border border-brand-200 bg-brand-50/60 p-5 relative overflow-hidden">
            <Icon name="sparkles" className="absolute -right-3 -bottom-3 w-20 h-20 text-brand-200/50" />
            <div className="text-xs font-bold text-brand-800 mb-3 flex items-center gap-1.5 relative z-10"><Icon name="sparkles" className="w-4 h-4 text-brand-600" /> AI 建议处置流程</div>
            <div className="space-y-2.5 relative z-10">
              {steps.map((s, i) => (
                <div key={i} className="flex items-center gap-3">
                  <span className="w-5 h-5 rounded-md bg-white border border-brand-200 text-brand-700 text-[11px] font-bold flex items-center justify-center font-mono shrink-0">{i + 1}</span>
                  <span className="text-[13px] text-slate-700 font-medium">{s}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="p-5 bg-white border-t border-slate-100 shadow-[0_-10px_20px_rgba(28,26,22,0.02)] pb-8">
          <button onClick={onComplete} className="w-full bg-slate-900 text-slate-50 font-bold text-[15px] py-3.5 rounded-2xl shadow-md hover:bg-slate-800 active:scale-[0.98] transition-all flex items-center justify-center gap-2 cursor-pointer">
            <Icon name="check-circle" className="w-5 h-5 text-brand-300" /> 一键执行并完结工单
          </button>
        </div>
      </div>
    </div>
  );
};