/**
 * 店长工作台 - 客服（静态页）
 */

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { MessageSquare, Clock, CheckCircle2, AlertCircle } from 'lucide-react';

type TicketType = '商品' | '订单' | '物流' | '售后';
type TicketStatus = '待处理' | '待接单' | '处理中' | '已完结';

interface ServiceTicket {
  id: string;
  time: string;
  customerName: string;
  type: TicketType;
  content: string;
  specialist: string;
  status: TicketStatus;
}

const MOCK_TICKETS: ServiceTicket[] = [
  { id: '1', time: '2026-05-25 09:12', customerName: '杭州明远商贸', type: '订单', content: '订单 ORD-20260524018 支付成功但未生成发货单', specialist: '—', status: '待处理' },
  { id: '2', time: '2026-05-25 08:45', customerName: '苏州锦程供应链', type: '物流', content: '物流单号 SF1234567890 在途超过 5 天无更新', specialist: '李客服', status: '处理中' },
  { id: '3', time: '2026-05-24 17:30', customerName: '张先生', type: '商品', content: '咨询 SKU-QJ-8842 批量采购价与起订量', specialist: '王专员', status: '已完结' },
  { id: '4', time: '2026-05-24 16:08', customerName: '宁波海联实业', type: '售后', content: '申请退货 12 件，外包装完好，需核实退款金额', specialist: '—', status: '待接单' },
  { id: '5', time: '2026-05-24 14:22', customerName: '陈女士', type: '订单', content: '重复扣款，同一订单被支付两次', specialist: '赵客服', status: '处理中' },
  { id: '6', time: '2026-05-24 11:55', customerName: '无锡恒泰机电', type: '商品', content: '商品详情页规格参数与实物不符，要求更正', specialist: '王专员', status: '已完结' },
  { id: '7', time: '2026-05-23 18:40', customerName: '刘先生', type: '物流', content: '收货地址已变更，请拦截原包裹并改派', specialist: '李客服', status: '待处理' },
  { id: '8', time: '2026-05-23 15:18', customerName: '温州瓯越贸易', type: '售后', content: '换货商品已寄出，询问新件发出时间', specialist: '周专员', status: '处理中' },
  { id: '9', time: '2026-05-23 10:02', customerName: '黄女士', type: '订单', content: '发票抬头信息填写错误，需重开增值税专用发票', specialist: '赵客服', status: '已完结' },
  { id: '10', time: '2026-05-22 16:33', customerName: '嘉兴嘉禾批发', type: '商品', content: '库存显示有货，下单提示缺货', specialist: '—', status: '待接单' },
  { id: '11', time: '2026-05-22 13:47', customerName: '孙先生', type: '物流', content: '包裹破损 2 件，需安排补发并理赔', specialist: '李客服', status: '待处理' },
  { id: '12', time: '2026-05-22 09:20', customerName: '绍兴越兴商贸', type: '售后', content: '维修进度查询，工单 AS-20260520007', specialist: '周专员', status: '已完结' },
  { id: '13', time: '2026-05-21 17:05', customerName: '吴女士', type: '订单', content: '优惠券未抵扣，订单实付金额高于预期', specialist: '王专员', status: '处理中' },
  { id: '14', time: '2026-05-21 11:38', customerName: '金华义乌小商品', type: '商品', content: '申请上架定制款样品，需提供报价周期', specialist: '—', status: '待接单' },
  { id: '15', time: '2026-05-20 15:52', customerName: '郑先生', type: '物流', content: '签收显示本人签收，客户反馈未收到货物', specialist: '李客服', status: '已完结' },
];

const TYPE_VARIANT: Record<TicketType, 'default' | 'secondary' | 'outline' | 'destructive'> = {
  商品: 'secondary',
  订单: 'default',
  物流: 'outline',
  售后: 'destructive',
};

const STATUS_VARIANT: Record<TicketStatus, 'default' | 'secondary' | 'outline' | 'destructive'> = {
  待处理: 'destructive',
  待接单: 'outline',
  处理中: 'default',
  已完结: 'secondary',
};

export function ManagerServiceDeskPage() {
  const pendingCount = MOCK_TICKETS.filter((t) => t.status === '待处理').length;
  const inProgressCount = MOCK_TICKETS.filter((t) => t.status === '处理中').length;
  const doneTodayCount = MOCK_TICKETS.filter((t) => t.status === '已完结' && t.time.startsWith('2026-05-25')).length;

  return (
    <div className="h-full overflow-auto space-y-4">
      <div>
        <h2 className="text-lg font-semibold tracking-tight">客服</h2>
        <p className="text-sm text-muted-foreground mt-1">
          客服工单与会话概览
        </p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {[
          { label: '待处理工单', value: String(pendingCount), icon: AlertCircle, desc: '等待客服响应' },
          { label: '进行中会话', value: String(inProgressCount), icon: MessageSquare, desc: '当前在线对话' },
          { label: '今日已完结', value: String(doneTodayCount), icon: CheckCircle2, desc: '本日处理完成' },
          { label: '平均响应时长', value: '18 分钟', icon: Clock, desc: '首次回复耗时（模拟）' },
        ].map((item) => (
          <Card key={item.label}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">{item.label}</CardTitle>
              <item.icon className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{item.value}</div>
              <p className="text-xs text-muted-foreground mt-1">{item.desc}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <Card>
        <CardHeader>
          <CardTitle>工单与会话</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="rounded-md border overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="whitespace-nowrap w-[140px]">时间</TableHead>
                  <TableHead className="whitespace-nowrap min-w-[120px]">客户名称</TableHead>
                  <TableHead className="whitespace-nowrap w-[88px]">工单类型</TableHead>
                  <TableHead className="min-w-[240px]">工单内容</TableHead>
                  <TableHead className="whitespace-nowrap w-[100px]">处理专员</TableHead>
                  <TableHead className="whitespace-nowrap w-[96px]">工单状态</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {MOCK_TICKETS.map((ticket) => (
                  <TableRow key={ticket.id}>
                    <TableCell className="text-muted-foreground text-sm whitespace-nowrap">
                      {ticket.time}
                    </TableCell>
                    <TableCell className="font-medium whitespace-nowrap">{ticket.customerName}</TableCell>
                    <TableCell>
                      <Badge variant={TYPE_VARIANT[ticket.type]}>{ticket.type}</Badge>
                    </TableCell>
                    <TableCell className="text-sm max-w-md">{ticket.content}</TableCell>
                    <TableCell className="text-sm whitespace-nowrap">
                      {ticket.specialist}
                    </TableCell>
                    <TableCell>
                      <Badge variant={STATUS_VARIANT[ticket.status]}>{ticket.status}</Badge>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

export default ManagerServiceDeskPage;
