import React, { useEffect, useState } from 'react';
import {
  Button, Card, Form, Input, InputNumber, message, Modal, Popconfirm, Select, Space, Switch, Table, Tabs, Tag, Typography,
} from 'antd';
import {
  MenuOutlined, PlusOutlined, EditOutlined, DeleteOutlined,
  HomeOutlined, PlayCircleOutlined, WalletOutlined, RobotOutlined,
  SettingOutlined, BellOutlined, UserOutlined, AppstoreOutlined,
  FileTextOutlined, StarOutlined, HeartOutlined, CameraOutlined,
  DashboardOutlined, CalculatorOutlined, DollarOutlined, GiftOutlined,
  ThunderboltOutlined, FireOutlined, CloudOutlined, SmileOutlined,
  TrophyOutlined, RocketOutlined, BulbOutlined, CodeOutlined,
  PictureOutlined, VideoCameraOutlined, AudioOutlined,
  MailOutlined, PhoneOutlined, GlobalOutlined, ShoppingCartOutlined,
  TeamOutlined, BarChartOutlined, PieChartOutlined, LineChartOutlined,
  SecurityScanOutlined, ApiOutlined, DatabaseOutlined, CloudServerOutlined,
} from '@ant-design/icons';
import { getMenuConfigs, saveMenuConfig, deleteMenuConfig } from '../api';

const ICON_MAP: Record<string, React.ReactNode> = {
  HomeOutlined: <HomeOutlined />, PlayCircleOutlined: <PlayCircleOutlined />,
  WalletOutlined: <WalletOutlined />, RobotOutlined: <RobotOutlined />,
  SettingOutlined: <SettingOutlined />, BellOutlined: <BellOutlined />,
  UserOutlined: <UserOutlined />, AppstoreOutlined: <AppstoreOutlined />,
  FileTextOutlined: <FileTextOutlined />, StarOutlined: <StarOutlined />,
  HeartOutlined: <HeartOutlined />, CameraOutlined: <CameraOutlined />,
  DashboardOutlined: <DashboardOutlined />, CalculatorOutlined: <CalculatorOutlined />,
  DollarOutlined: <DollarOutlined />, GiftOutlined: <GiftOutlined />,
  ThunderboltOutlined: <ThunderboltOutlined />, FireOutlined: <FireOutlined />,
  CloudOutlined: <CloudOutlined />, SmileOutlined: <SmileOutlined />,
  TrophyOutlined: <TrophyOutlined />, RocketOutlined: <RocketOutlined />,
  BulbOutlined: <BulbOutlined />, CodeOutlined: <CodeOutlined />,
  PictureOutlined: <PictureOutlined />, VideoCameraOutlined: <VideoCameraOutlined />,
  AudioOutlined: <AudioOutlined />, MailOutlined: <MailOutlined />,
  PhoneOutlined: <PhoneOutlined />, GlobalOutlined: <GlobalOutlined />,
  ShoppingCartOutlined: <ShoppingCartOutlined />, TeamOutlined: <TeamOutlined />,
  BarChartOutlined: <BarChartOutlined />, PieChartOutlined: <PieChartOutlined />,
  LineChartOutlined: <LineChartOutlined />, SecurityScanOutlined: <SecurityScanOutlined />,
  ApiOutlined: <ApiOutlined />, DatabaseOutlined: <DatabaseOutlined />,
  CloudServerOutlined: <CloudServerOutlined />, MenuOutlined: <MenuOutlined />,
};

const ICON_OPTIONS = Object.keys(ICON_MAP).map(key => ({
  value: key,
  label: <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>{ICON_MAP[key]} {key.replace('Outlined', '')}</span>,
}));

const TYPE_COLORS: Record<string, string> = { page: 'blue', group: 'purple' };
const TYPE_LABELS: Record<string, string> = { page: '页面', group: '分组' };

const AdminMenuConfig: React.FC = () => {
  const [menus, setMenus] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState<string>('frontend');
  const [modal, setModal] = useState<{ open: boolean; menu: any | null }>({ open: false, menu: null });
  const [form] = Form.useForm();

  const load = async () => {
    setLoading(true);
    try {
      const data = await getMenuConfigs();
      setMenus(data);
    } catch { /* auth error handled by client */ }
    setLoading(false);
  };

  useEffect(() => { load(); }, []);

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      const payload = {
        label: values.label,
        path: values.path || '',
        icon: values.icon || '',
        sort_order: values.sortOrder ?? 0,
        is_active: values.isActive ?? true,
        parent_id: values.parentId || null,
        menu_type: values.menuType || 'page',
        menu_target: values.menuTarget || 'frontend',
        is_default: values.isDefault ?? false,
      };
      if (modal.menu?.id) {
        await saveMenuConfig({ ...payload, id: modal.menu.id });
      } else {
        await saveMenuConfig(payload);
      }
      message.success(modal.menu?.id ? '菜单已更新' : '菜单已添加');
      setModal({ open: false, menu: null });
      form.resetFields();
      load();
    } catch { /* validation */ }
  };

  const handleDelete = async (id: string) => {
    try {
      await deleteMenuConfig(id);
      message.success('菜单已删除');
      load();
    } catch (e: any) {
      message.error(e?.message || '删除失败');
    }
  };

  const openEdit = (menu?: any) => {
    setModal({ open: true, menu: menu || null });
    if (menu) {
      form.setFieldsValue({
        label: menu.label,
        path: menu.path,
        icon: menu.icon,
        sortOrder: menu.sortOrder ?? 0,
        isActive: menu.isActive ?? true,
        parentId: menu.parentId ?? '',
        menuType: menu.menuType ?? 'page',
        menuTarget: menu.menuTarget ?? 'frontend',
        isDefault: menu.isDefault ?? false,
      });
    } else {
      form.resetFields();
      form.setFieldsValue({ icon: 'HomeOutlined', sortOrder: menus.length, isActive: true, menuType: 'page', menuTarget: activeTab, isDefault: false });
    }
  };

  // Filter menus by active tab
  const filteredMenus = menus.filter(m => {
    const target = m.menuTarget ?? 'frontend';
    return target === activeTab || target === 'both';
  });

  // Build tree: groups first, then pages under groups
  const groups = filteredMenus.filter(m => m.menuType === 'group');
  const parentOptions = [
    { value: '', label: '顶级菜单' },
    ...groups.map(g => ({ value: g.id, label: g.label })),
  ];

  // Build flat display with indentation
  const displayMenus: any[] = [];
  const topLevel = filteredMenus.filter(m => !m.parentId);
  const childMap: Record<string, any[]> = {};
  filteredMenus.filter(m => m.parentId).forEach(m => {
    const pid = m.parentId;
    if (!childMap[pid]) childMap[pid] = [];
    childMap[pid].push(m);
  });
  topLevel.sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0)).forEach(m => {
    displayMenus.push({ ...m, _depth: 0 });
    (childMap[m.id] || []).sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0)).forEach(c => {
      displayMenus.push({ ...c, _depth: 1 });
    });
  });

  const columns = [
    { title: '排序', dataIndex: 'sortOrder', width: 60 },
    {
      title: '菜单名称', key: 'label', width: 180,
      render: (_: any, r: any) => (
        <span style={{ paddingLeft: r._depth * 20, fontWeight: r._depth === 0 ? 600 : 400 }}>
          {r._depth === 1 && <span style={{ color: '#cbd5e1', marginRight: 4 }}>└</span>}
          {r.label}
        </span>
      ),
    },
    { title: '路由路径', dataIndex: 'path', width: 160, render: (v: string) => v || <Typography.Text type="secondary">-</Typography.Text> },
    {
      title: '图标', dataIndex: 'icon', width: 100,
      render: (v: string) => v && ICON_MAP[v] ? (
        <span style={{ fontSize: 16, color: '#6366f1' }}>{ICON_MAP[v]}</span>
      ) : '-',
    },
    {
      title: '类型', dataIndex: 'menuType', width: 80,
      render: (v: string) => <Tag color={TYPE_COLORS[v] || 'default'}>{TYPE_LABELS[v] || v}</Tag>,
    },
    {
      title: '状态', dataIndex: 'isActive', width: 70,
      render: (v: boolean) => (
        <span style={{ color: v ? '#22c55e' : '#94a3b8' }}>{v ? '启用' : '停用'}</span>
      ),
    },
    ...(activeTab === 'frontend' ? [{
      title: '默认显示', dataIndex: 'isDefault', width: 80,
      render: (v: boolean) => v ? <Tag color="green">默认</Tag> : <Typography.Text type="secondary">-</Typography.Text>,
    }] : []),
    {
      title: '操作', key: 'action', width: 150,
      render: (_: any, r: any) => (
        <Space size={4}>
          <Button type="link" size="small" icon={<EditOutlined />} onClick={() => openEdit(r)}>编辑</Button>
          <Popconfirm title="确定删除该菜单？" onConfirm={() => handleDelete(r.id)}>
            <Button type="link" size="small" danger icon={<DeleteOutlined />}>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
          <Space>
            <MenuOutlined style={{ fontSize: 18, color: '#6366f1' }} />
            <Typography.Text strong style={{ fontSize: 16 }}>菜单配置</Typography.Text>
          </Space>
          <Button type="primary" icon={<PlusOutlined />} onClick={() => openEdit()} style={{ borderRadius: 8 }}>
            添加菜单
          </Button>
        </div>
        <Tabs
          activeKey={activeTab}
          onChange={setActiveTab}
          items={[
            { key: 'frontend', label: '前台菜单' },
            { key: 'admin', label: '后台菜单' },
          ]}
        />
        <Table
          columns={columns}
          dataSource={displayMenus}
          rowKey="id"
          loading={loading}
          pagination={false}
          scroll={{ x: 900 }}
        />
      </Card>

      <Modal
        title={<Space><MenuOutlined />{modal.menu?.id ? '编辑菜单' : '添加菜单'}</Space>}
        open={modal.open}
        onOk={handleSave}
        onCancel={() => { setModal({ open: false, menu: null }); form.resetFields(); }}
        okText="确认" cancelText="取消" width={520}
      >
        <Form form={form} layout="vertical">
          <Form.Item name="label" label="菜单名称" rules={[{ required: true, message: '请输入菜单名称' }]}>
            <Input placeholder="例如：我的项目" size="large" />
          </Form.Item>
          <Form.Item name="path" label="路由路径" tooltip="分组类型可留空">
            <Input placeholder="例如：/projects（分组可留空）" size="large" />
          </Form.Item>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="menuType" label="菜单类型" style={{ flex: 1 }} rules={[{ required: true }]}>
              <Select size="large" options={[
                { value: 'page', label: '页面' },
                { value: 'group', label: '分组' },
              ]} />
            </Form.Item>
            <Form.Item name="menuTarget" label="适用端" style={{ flex: 1 }} rules={[{ required: true }]}>
              <Select size="large" options={[
                { value: 'frontend', label: '前台' },
                { value: 'admin', label: '后台' },
                { value: 'both', label: '两者' },
              ]} />
            </Form.Item>
          </div>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="icon" label="图标" style={{ flex: 1 }} rules={[{ required: true }]}>
              <Select size="large" options={ICON_OPTIONS} />
            </Form.Item>
            <Form.Item name="sortOrder" label="排序" style={{ flex: 1 }}>
              <InputNumber min={0} max={100} style={{ width: '100%' }} size="large" placeholder="默认0" />
            </Form.Item>
          </div>
          <Form.Item name="parentId" label="上级菜单">
            <Select size="large" options={parentOptions} allowClear placeholder="顶级菜单" />
          </Form.Item>
          <Form.Item name="isActive" label="启用" valuePropName="checked">
            <Switch />
          </Form.Item>
          <Form.Item noStyle shouldUpdate={(prev, cur) => prev.menuTarget !== cur.menuTarget}>
            {({ getFieldValue }) =>
              getFieldValue('menuTarget') !== 'admin' ? (
                <Form.Item name="isDefault" label="新用户默认显示" valuePropName="checked" tooltip="开启后，新注册用户默认显示此菜单">
                  <Switch />
                </Form.Item>
              ) : null
            }
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default AdminMenuConfig;