import { useCallback, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import {
  Alert,
  Button,
  Descriptions,
  Form,
  Input,
  InputNumber,
  Modal,
  Popconfirm,
  Select,
  Space,
  Switch,
  Table,
  Tag,
  Typography,
  message,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {
  WAREHOUSE_FULFILLMENT_MODE_LABELS,
  WAREHOUSE_MANAGER_LABELS,
  WAREHOUSE_STATUS_LABELS,
  WarehouseFulfillmentMode,
  WarehouseManagerType,
  WarehouseStatus,
  type FulfillmentProviderDto,
} from '@dukang/shared-types';
import { request, type Paginated } from '../lib/api';
import { ADMIN_OPTIONS_PAGE_SIZE, fmtTime } from '../lib/constants';
import { useAdminList } from '../lib/useAdminList';

type Row = {
  id: string;
  cityId: string;
  cityName: string;
  cityCode: string;
  name: string;
  address: string;
  contactName: string;
  contactPhone: string;
  managerType: WarehouseManagerType;
  partnerAccountId: string | null;
  partnerCompanyName?: string | null;
  status: string;
  fulfillmentMode?: string;
  fulfillmentProviderId?: string | null;
  fulfillmentProviderName?: string | null;
  manualCarrierLabel?: string | null;
  manualQueryUrlTemplate?: string | null;
  lng?: number | null;
  lat?: number | null;
  createdAt: string;
};

type CityOption = { id: string; name: string; code: string };
type PartnerOption = { id: string; companyName: string };

const MANAGER_OPTIONS = Object.entries(WAREHOUSE_MANAGER_LABELS).map(([value, label]) => ({ value, label }));
const STATUS_OPTIONS = Object.entries(WAREHOUSE_STATUS_LABELS).map(([value, label]) => ({ value, label }));

function FulfillmentFields({
  mode,
  providerOptions,
  onModeChange,
}: {
  mode: WarehouseFulfillmentMode;
  providerOptions: FulfillmentProviderDto[];
  onModeChange: (mode: WarehouseFulfillmentMode) => void;
}) {
  const autoShip = mode === WarehouseFulfillmentMode.API_AUTO;
  return (
    <>
      <Form.Item
        name="fulfillmentMode"
        label="支付后自动发货"
        extra={
          autoShip
            ? '同城订单支付成功后，自动推送仓配承运商（如小飞侠）并进入配送中'
            : '支付后仅分配仓库，保持待发货，由仓管或总部手工填运单'
        }
        getValueProps={(v) => ({ checked: v === WarehouseFulfillmentMode.API_AUTO })}
        getValueFromEvent={(checked: boolean) =>
          checked ? WarehouseFulfillmentMode.API_AUTO : WarehouseFulfillmentMode.MANUAL
        }
      >
        <Switch
          checkedChildren="开"
          unCheckedChildren="关"
          onChange={(checked) => {
            onModeChange(
              checked ? WarehouseFulfillmentMode.API_AUTO : WarehouseFulfillmentMode.MANUAL,
            );
          }}
        />
      </Form.Item>
      {autoShip && (
        <Form.Item
          name="fulfillmentProviderId"
          label="仓配承运商"
          rules={[{ required: true, message: '自动发货须选择承运商' }]}
        >
          <Select
            placeholder={providerOptions.length ? '选择已注册承运商' : '请先在仓配管理注册'}
            options={providerOptions.map((p) => ({ value: p.id, label: `${p.name} (${p.code})` }))}
          />
        </Form.Item>
      )}
      {!autoShip && (
        <>
          <Form.Item name="manualCarrierLabel" label="默认承运商名称">
            <Input placeholder="如 顺丰速运" />
          </Form.Item>
          <Form.Item
            name="manualQueryUrlTemplate"
            label="物流查询链接模板"
            extra="可用 {trackingNo} 占位符"
          >
            <Input placeholder="https://example.com/track?no={trackingNo}" />
          </Form.Item>
        </>
      )}
      <Space>
        <Form.Item name="lng" label="经度">
          <InputNumber step={0.001} placeholder="API推单寄件坐标" />
        </Form.Item>
        <Form.Item name="lat" label="纬度">
          <InputNumber step={0.001} />
        </Form.Item>
      </Space>
    </>
  );
}

export default function CityWarehousesPage() {
  const [filterForm] = Form.useForm();
  const [createForm] = Form.useForm();
  const [editForm] = Form.useForm();
  const [filters, setFilters] = useState<Record<string, string>>({});
  const { data, loading, page, pageSize, setPage, setPageSize, reload } = useAdminList<Row>(
    '/admin/city-warehouses',
    () => {
      const qs = new URLSearchParams();
      if (filters.name) qs.set('name', filters.name);
      if (filters.cityId) qs.set('cityId', filters.cityId);
      if (filters.managerType) qs.set('managerType', filters.managerType);
      if (filters.status) qs.set('status', filters.status);
      return qs;
    },
    [filters],
  );
  const [cities, setCities] = useState<CityOption[]>([]);
  const [partners, setPartners] = useState<PartnerOption[]>([]);
  const [createOpen, setCreateOpen] = useState(false);
  const [editOpen, setEditOpen] = useState(false);
  const [editRow, setEditRow] = useState<Row | null>(null);
  const [createManagerType, setCreateManagerType] = useState<WarehouseManagerType>(WarehouseManagerType.HQ);
  const [editManagerType, setEditManagerType] = useState<WarehouseManagerType>(WarehouseManagerType.HQ);
  const [createCityId, setCreateCityId] = useState<string | undefined>();
  const [createFulfillmentMode, setCreateFulfillmentMode] = useState<WarehouseFulfillmentMode>(
    WarehouseFulfillmentMode.MANUAL,
  );
  const [editFulfillmentMode, setEditFulfillmentMode] = useState<WarehouseFulfillmentMode>(
    WarehouseFulfillmentMode.MANUAL,
  );
  const [providerOptions, setProviderOptions] = useState<FulfillmentProviderDto[]>([]);

  const loadCities = useCallback(async () => {
    const res = await request<Paginated<CityOption>>(`/admin/cities?pageSize=${ADMIN_OPTIONS_PAGE_SIZE}`);
    setCities(res.items);
  }, []);

  const loadPartners = useCallback(async (cityId: string) => {
    const res = await request<Paginated<PartnerOption>>(
      `/admin/partners?pageSize=${ADMIN_OPTIONS_PAGE_SIZE}&cityId=${cityId}`,
    );
    setPartners(res.items);
  }, []);

  useEffect(() => {
    void loadCities();
    void request<FulfillmentProviderDto[]>('/admin/fulfillment-providers/active-api')
      .then(setProviderOptions)
      .catch(() => {});
  }, [loadCities]);

  async function openEdit(row: Row) {
    setEditRow(row);
    setEditManagerType(row.managerType);
    await loadPartners(row.cityId);
    editForm.setFieldsValue({
      name: row.name,
      address: row.address,
      contactName: row.contactName,
      contactPhone: row.contactPhone,
      managerType: row.managerType,
      partnerAccountId: row.partnerAccountId,
      status: row.status,
      fulfillmentMode: row.fulfillmentMode ?? WarehouseFulfillmentMode.MANUAL,
      fulfillmentProviderId: row.fulfillmentProviderId ?? undefined,
      manualCarrierLabel: row.manualCarrierLabel ?? undefined,
      manualQueryUrlTemplate: row.manualQueryUrlTemplate ?? undefined,
      lng: row.lng ?? undefined,
      lat: row.lat ?? undefined,
    });
    setEditFulfillmentMode((row.fulfillmentMode as WarehouseFulfillmentMode) ?? WarehouseFulfillmentMode.MANUAL);
    setEditOpen(true);
  }

  function onManagerTypeChange(
    v: WarehouseManagerType,
    form: typeof createForm,
    setType: (t: WarehouseManagerType) => void,
  ) {
    setType(v);
    if (v !== WarehouseManagerType.PARTNER) {
      form.setFieldValue('partnerAccountId', undefined);
    }
  }

  const columns: ColumnsType<Row> = [
    {
      title: '城市',
      width: 100,
      render: (_, row) => (
        <span title={row.cityCode}>
          {row.cityName}
        </span>
      ),
    },
    { title: '仓库', dataIndex: 'name', width: 140, ellipsis: true },
    { title: '地址', dataIndex: 'address', width: 180, ellipsis: true },
    { title: '联系人', dataIndex: 'contactName', width: 90 },
    { title: '电话', dataIndex: 'contactPhone', width: 120 },
    {
      title: '管仓',
      width: 90,
      render: (_, row) => WAREHOUSE_MANAGER_LABELS[row.managerType] || row.managerType,
    },
    {
      title: '合伙人',
      dataIndex: 'partnerCompanyName',
      width: 120,
      ellipsis: true,
      render: (v, row) =>
        v && row.partnerAccountId ? (
          <Link to="/city-partners">{v}</Link>
        ) : (
          '—'
        ),
    },
    {
      title: '自动发货',
      width: 130,
      render: (_, row) =>
        row.fulfillmentMode === 'API_AUTO' ? (
          <Tag color="blue">{row.fulfillmentProviderName || '自动'}</Tag>
        ) : (
          <Tag>{WAREHOUSE_FULFILLMENT_MODE_LABELS[WarehouseFulfillmentMode.MANUAL]}</Tag>
        ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 80,
      render: (s) => (
        <Tag color={s === WarehouseStatus.ACTIVE ? 'green' : 'default'}>
          {WAREHOUSE_STATUS_LABELS[s as WarehouseStatus] || s}
        </Tag>
      ),
    },
    { title: '创建', dataIndex: 'createdAt', width: 150, render: fmtTime },
    {
      title: '操作',
      width: 120,
      fixed: 'right',
      render: (_, row) => (
        <Space size={0}>
          <Button type="link" size="small" onClick={() => void openEdit(row)}>
            编辑
          </Button>
          <Popconfirm
            title="确定删除该仓库？"
            description="删除后将解除关联合伙人的管仓绑定"
            onConfirm={async () => {
              await request(`/admin/city-warehouses/${row.id}`, { method: 'DELETE' });
              message.success('已删除');
              void reload();
            }}
          >
            <Button type="link" size="small" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Space style={{ marginBottom: 16, width: '100%', justifyContent: 'space-between' }}>
        <Typography.Title level={4} style={{ margin: 0 }}>仓库</Typography.Title>
        <Button
          type="primary"
          onClick={() => {
            createForm.resetFields();
            setCreateManagerType(WarehouseManagerType.HQ);
            setCreateCityId(undefined);
            setCreateFulfillmentMode(WarehouseFulfillmentMode.MANUAL);
            createForm.setFieldsValue({
              managerType: WarehouseManagerType.HQ,
              status: WarehouseStatus.ACTIVE,
              fulfillmentMode: WarehouseFulfillmentMode.MANUAL,
            });
            setCreateOpen(true);
          }}
        >
          新增仓库
        </Button>
      </Space>

      <Alert
        type="info"
        showIcon
        style={{ marginBottom: 16 }}
        message="同城有仓订单：支付后按「自动发货」开关决定是否推仓配 API；关闭则待人工填单。跨城/无仓仍走总部快递填单。"
      />

      <Form
        form={filterForm}
        layout="inline"
        style={{ marginBottom: 16 }}
        onFinish={(v) => {
          setFilters(v);
          setPage(1);
        }}
      >
        <Form.Item name="name" label="仓库名">
          <Input allowClear />
        </Form.Item>
        <Form.Item name="cityId" label="城市">
          <Select
            allowClear
            showSearch
            optionFilterProp="label"
            style={{ width: 140 }}
            options={cities.map((c) => ({ value: c.id, label: c.name }))}
          />
        </Form.Item>
        <Form.Item name="managerType" label="管仓">
          <Select allowClear style={{ width: 120 }} options={MANAGER_OPTIONS} />
        </Form.Item>
        <Form.Item name="status" label="状态">
          <Select allowClear style={{ width: 100 }} options={STATUS_OPTIONS} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form>

      <Table
        rowKey="id"
        loading={loading}
        columns={columns}
        dataSource={data?.items ?? []}
        scroll={{ x: 1400 }}
        pagination={{
          current: page,
          pageSize,
          total: data?.total ?? 0,
          showSizeChanger: true,
          onChange: (p, ps) => {
            setPage(p);
            setPageSize(ps);
          },
        }}
      />

      <Modal
        title="新增仓库"
        open={createOpen}
        width={520}
        onCancel={() => setCreateOpen(false)}
        onOk={async () => {
          const v = await createForm.validateFields();
          await request(`/admin/cities/${v.cityId}/warehouses`, {
            method: 'POST',
            body: JSON.stringify(v),
          });
          message.success('已创建');
          setCreateOpen(false);
          void reload();
        }}
      >
        <Form form={createForm} layout="vertical">
          <Form.Item name="cityId" label="开城城市" rules={[{ required: true }]}>
            <Select
              showSearch
              optionFilterProp="label"
              options={cities.map((c) => ({ value: c.id, label: `${c.name} (${c.code})` }))}
              onChange={(id) => {
                setCreateCityId(id);
                createForm.setFieldValue('partnerAccountId', undefined);
                void loadPartners(id);
              }}
            />
          </Form.Item>
          <Form.Item name="name" label="仓库名" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="address" label="地址" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="contactName" label="联系人" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="contactPhone" label="联系电话" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="managerType" label="管仓类型" rules={[{ required: true }]}>
            <Select
              options={MANAGER_OPTIONS}
              onChange={(v) => onManagerTypeChange(v, createForm, setCreateManagerType)}
            />
          </Form.Item>
          {createManagerType === WarehouseManagerType.PARTNER && createCityId && (
            <Form.Item name="partnerAccountId" label="管仓合伙人" rules={[{ required: true }]}>
              <Select
                showSearch
                optionFilterProp="label"
                placeholder={partners.length ? '选择合伙人' : '该城市暂无合伙人'}
                options={partners.map((p) => ({ value: p.id, label: p.companyName }))}
              />
            </Form.Item>
          )}
          <Form.Item name="status" label="状态" initialValue={WarehouseStatus.ACTIVE}>
            <Select options={STATUS_OPTIONS} />
          </Form.Item>
          <FulfillmentFields
            mode={createFulfillmentMode}
            providerOptions={providerOptions}
            onModeChange={setCreateFulfillmentMode}
          />
        </Form>
      </Modal>

      <Modal
        title="编辑仓库"
        open={editOpen}
        width={520}
        onCancel={() => setEditOpen(false)}
        onOk={async () => {
          if (!editRow) return;
          const v = await editForm.validateFields();
          await request(`/admin/city-warehouses/${editRow.id}`, {
            method: 'PUT',
            body: JSON.stringify(v),
          });
          message.success('已更新');
          setEditOpen(false);
          void reload();
        }}
      >
        {editRow && (
          <Descriptions column={1} size="small" bordered style={{ marginBottom: 16 }}>
            <Descriptions.Item label="所属城市">
              {editRow.cityName}（{editRow.cityCode}）
            </Descriptions.Item>
          </Descriptions>
        )}
        <Form form={editForm} layout="vertical">
          <Form.Item name="name" label="仓库名" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="address" label="地址" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="contactName" label="联系人" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="contactPhone" label="联系电话" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="managerType" label="管仓类型" rules={[{ required: true }]}>
            <Select
              options={MANAGER_OPTIONS}
              onChange={(v) => onManagerTypeChange(v, editForm, setEditManagerType)}
            />
          </Form.Item>
          {editManagerType === WarehouseManagerType.PARTNER && editRow && (
            <Form.Item name="partnerAccountId" label="管仓合伙人" rules={[{ required: true }]}>
              <Select
                showSearch
                optionFilterProp="label"
                options={partners.map((p) => ({ value: p.id, label: p.companyName }))}
              />
            </Form.Item>
          )}
          <Form.Item name="status" label="状态">
            <Select options={STATUS_OPTIONS} />
          </Form.Item>
          <FulfillmentFields
            mode={editFulfillmentMode}
            providerOptions={providerOptions}
            onModeChange={setEditFulfillmentMode}
          />
        </Form>
      </Modal>
    </div>
  );
}