import { Card, Table, Tag, Typography } from '@douyinfe/semi-ui';
import type { DashboardData } from '../types';

interface MovementRow {
  id: string;
  time: string;
  dir: string;
  material: string;
  qty: string;
  operator: string;
}

export function WarehouseBoard({ data }: { data: DashboardData }) {
  const { warehouse: w } = data;
  const rows: MovementRow[] = w.movements.map((m) => ({
    id: m.id,
    time: m.time,
    dir: m.type === 'in' ? '入库' : '出库',
    material: m.material,
    qty: `${m.qty}`,
    operator: m.operator,
  }));

  const columns = [
    { title: '时间', dataIndex: 'time' },
    {
      title: '方向',
      dataIndex: 'dir',
      render: (dir: string) => (
        <Tag color={dir === '入库' ? 'green' : 'blue'}>{dir}</Tag>
      ),
    },
    { title: '物料名称', dataIndex: 'material' },
    { title: '数量', dataIndex: 'qty' },
    { title: '操作人', dataIndex: 'operator' },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
      <Card title="库存总量" style={{ gridColumn: 'span 2' }}>
        <BigNumber value={w.totalStock} unit="件" color="#36a3f7" />
      </Card>
      <Card title="物料种类">
        <BigNumber value={w.materialTypes} unit="种" color="#00d68f" />
      </Card>
      <Card title="当日出入库">
        <div style={{ display: 'flex', gap: 24 }}>
          <TextStat color="#00d68f" value={w.inboundToday} label="入库" />
          <TextStat color="#36a3f7" value={w.outboundToday} label="出库" />
        </div>
      </Card>

      <Card title="出入库动态（实时）" style={{ gridColumn: 'span 4' }}>
        <Table
          columns={columns}
          dataSource={rows}
          pagination={false}
          rowKey="id"
          empty={<Typography.Text type="tertiary">暂无出入库记录</Typography.Text>}
        />
      </Card>
    </div>
  );
}

function TextStat({ value, label, color }: { value: number; label: string; color: string }) {
  return (
    <div>
      <div style={{ fontSize: 28, fontWeight: 600, color }}>{value}</div>
      <div style={{ color: '#8fa3bf', fontSize: 13 }}>{label}</div>
    </div>
  );
}

function BigNumber({
  value,
  unit,
  color,
}: {
  value: number;
  unit: string;
  color: string;
}) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
      <span style={{ fontSize: 36, fontWeight: 700, color }}>{value}</span>
      <span style={{ color: '#8fa3bf' }}>{unit}</span>
    </div>
  );
}