import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Alert,
  Button,
  Card,
  Collapse,
  Form,
  Input,
  InputNumber,
  Modal,
  Space,
  Switch,
  Table,
  Tag,
  Typography,
  message,
} from 'antd';
import type { MockSmsCodeItem, SystemConfigFieldMeta, SystemConfigFormResponse } from '@dukang/shared-types';
import { request, type HqProfile } from '../lib/api';
import { ConfigImageField, ConfigImageListField } from '../components/ConfigMediaFields';

const { TextArea } = Input;

function MockSmsCodePanel({ codes, loading }: { codes: MockSmsCodeItem[]; loading?: boolean }) {
  return (
    <div style={{ marginTop: -8, marginBottom: 16, marginLeft: 0 }}>
      <Typography.Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
        最近 Mock 验证码（写入数据库，最新 50 条）
      </Typography.Text>
      <Table<MockSmsCodeItem>
        size="small"
        rowKey="id"
        loading={loading}
        pagination={false}
        scroll={{ y: 240 }}
        locale={{ emptyText: '暂无记录，触发短信发送后将显示在此' }}
        columns={[
          {
            title: '时间',
            dataIndex: 'createdAt',
            width: 168,
            render: (v: string) => new Date(v).toLocaleString(),
          },
          { title: '手机号', dataIndex: 'phone', width: 120 },
          { title: '场景', dataIndex: 'scene', width: 160 },
          {
            title: '验证码',
            dataIndex: 'code',
            width: 88,
            render: (code: string) => (
              <Typography.Text copyable strong>
                {code}
              </Typography.Text>
            ),
          },
        ]}
        dataSource={codes}
      />
    </div>
  );
}

function renderField(
  field: SystemConfigFieldMeta,
  configuredSecrets: string[],
  extra?: ReactNode,
) {
  const isConfiguredSecret = field.secret && configuredSecrets.includes(field.key);

  if (field.type === 'boolean') {
    return (
      <div key={field.key}>
        <Form.Item
          name={field.key}
          label={
            <Space size={4}>
              <span>{field.label}</span>
              <Typography.Text type="secondary" code style={{ fontSize: 11 }}>
                {field.key}
              </Typography.Text>
              {field.requiresRestart ? <Tag color="orange">需重启</Tag> : <Tag color="green">即时</Tag>}
            </Space>
          }
          tooltip={field.description}
          valuePropName="checked"
          getValueFromEvent={(checked: boolean) => (checked ? 'true' : 'false')}
          getValueProps={(v: string) => ({ checked: v === 'true' || v === '1' })}
        >
          <Switch />
        </Form.Item>
        {extra}
      </div>
    );
  }

  if (field.type === 'image' || field.type === 'imageList') {
    return (
      <Form.Item
        key={field.key}
        name={field.key}
        label={
          <Space size={4} wrap>
            <span>{field.label}</span>
            <Typography.Text type="secondary" code style={{ fontSize: 11 }}>
              {field.key}
            </Typography.Text>
            {field.requiresRestart ? <Tag color="orange">需重启</Tag> : <Tag color="green">即时</Tag>}
          </Space>
        }
        tooltip={field.description}
        trigger="onChange"
        getValueFromEvent={(v: unknown) => (typeof v === 'string' ? v : '')}
        normalize={(v) => (typeof v === 'string' ? v : '')}
      >
        {field.type === 'image' ? (
          <ConfigImageField bizType="footer" />
        ) : (
          <ConfigImageListField bizType="swiper" />
        )}
      </Form.Item>
    );
  }

  const input =
    field.type === 'textarea' ? (
      <TextArea rows={3} placeholder={field.placeholder} />
    ) : field.type === 'number' ? (
      <InputNumber style={{ width: '100%' }} placeholder={field.placeholder} />
    ) : field.secret ? (
      <Input.Password
        placeholder={isConfiguredSecret ? '已配置，留空则不修改' : field.placeholder}
        autoComplete="new-password"
      />
    ) : (
      <Input placeholder={field.placeholder} />
    );

  return (
    <Form.Item
      key={field.key}
      name={field.key}
      label={
        <Space size={4} wrap>
          <span>{field.label}</span>
          <Typography.Text type="secondary" code style={{ fontSize: 11 }}>
            {field.key}
          </Typography.Text>
          {field.requiresRestart ? <Tag color="orange">需重启</Tag> : <Tag color="green">即时</Tag>}
          {isConfiguredSecret ? <Tag>已配置</Tag> : null}
        </Space>
      }
      tooltip={field.description}
    >
      {input}
    </Form.Item>
  );
}

export default function SystemSettingsPage() {
  const navigate = useNavigate();
  const [form] = Form.useForm<Record<string, string>>();
  const [meta, setMeta] = useState<SystemConfigFormResponse | null>(null);
  const [profile, setProfile] = useState<HqProfile | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [syncing, setSyncing] = useState(false);
  const [dirty, setDirty] = useState(false);
  const dirtyRef = useRef(false);
  const bypassLeaveRef = useRef(false);
  const mockSmsEnabled = Form.useWatch('MOCK_SMS', form) === 'true';

  dirtyRef.current = dirty;

  async function load(silent = false) {
    if (!silent) setLoading(true);
    try {
      const data = await request<SystemConfigFormResponse>('/admin/system-config');
      if (silent) {
        setMeta((prev) =>
          prev
            ? { ...prev, mockSmsCodes: data.mockSmsCodes, updatedAt: data.updatedAt }
            : data,
        );
        return;
      }
      setMeta(data);
      form.setFieldsValue(data.values);
      setDirty(false);
    } catch (e) {
      if (!silent) message.error(e instanceof Error ? e.message : '加载失败');
    } finally {
      if (!silent) setLoading(false);
    }
  }

  useEffect(() => {
    void load();
    request<HqProfile>('/admin/auth/me').then(setProfile).catch(() => {});
  }, []);

  useEffect(() => {
    if (!mockSmsEnabled) return;
    const timer = window.setInterval(() => void load(true), 5000);
    return () => window.clearInterval(timer);
  }, [mockSmsEnabled]);

  useEffect(() => {
    const onBeforeUnload = (e: BeforeUnloadEvent) => {
      if (!dirtyRef.current) return;
      e.preventDefault();
      e.returnValue = '';
    };
    window.addEventListener('beforeunload', onBeforeUnload);
    return () => window.removeEventListener('beforeunload', onBeforeUnload);
  }, []);

  useEffect(() => {
    const onDocClick = (e: MouseEvent) => {
      if (!dirtyRef.current || bypassLeaveRef.current) return;
      const target = e.target as HTMLElement | null;
      const anchor = target?.closest?.('a');
      if (!anchor || !(anchor instanceof HTMLAnchorElement)) return;
      if (anchor.target === '_blank' || anchor.hasAttribute('download')) return;
      const url = new URL(anchor.href, window.location.href);
      if (url.origin !== window.location.origin) return;
      if (url.pathname === window.location.pathname && url.search === window.location.search) return;

      e.preventDefault();
      e.stopPropagation();
      Modal.confirm({
        title: '有未保存的更改',
        content: '离开前请先保存，否则更改将丢失。',
        okText: '仍要离开',
        cancelText: '留下',
        onOk: () => {
          bypassLeaveRef.current = true;
          setDirty(false);
          navigate(`${url.pathname}${url.search}${url.hash}`);
          window.setTimeout(() => {
            bypassLeaveRef.current = false;
          }, 0);
        },
      });
    };
    document.addEventListener('click', onDocClick, true);
    return () => document.removeEventListener('click', onDocClick, true);
  }, [navigate]);

  const collapseItems = useMemo(() => {
    if (!meta) return [];
    const SHARE_SUBGROUP_LABELS: Record<string, string> = {
      global: '全局',
      home: '首页',
      stores: '门店列表',
      storeDetail: '门店详情',
      benefit: '权益页',
      mine: '我的',
      productDetail: '商品详情',
      orderDetail: '订单详情',
    };
    const SHARE_SUBGROUP_ORDER = [
      'global',
      'home',
      'stores',
      'storeDetail',
      'benefit',
      'mine',
      'productDetail',
      'orderDetail',
    ];

    return meta.groups.map((group) => {
      const fields = meta.fields.filter((f) => f.group === group.key);
      const hasSubgroups = fields.some((f) => f.subgroup);

      let children: ReactNode;
      if (group.key === 'wechat_mini_share' && hasSubgroups) {
        const bySub = new Map<string, SystemConfigFieldMeta[]>();
        for (const f of fields) {
          const sk = f.subgroup || 'global';
          if (!bySub.has(sk)) bySub.set(sk, []);
          bySub.get(sk)!.push(f);
        }
        const orderedKeys = [
          ...SHARE_SUBGROUP_ORDER.filter((k) => bySub.has(k)),
          ...[...bySub.keys()].filter((k) => !SHARE_SUBGROUP_ORDER.includes(k)),
        ];
        children = (
          <Collapse
            defaultActiveKey={[]}
            items={orderedKeys.map((sk) => ({
              key: sk,
              label: SHARE_SUBGROUP_LABELS[sk] || sk,
              forceRender: true,
              children: (
                <div style={{ maxWidth: 720 }}>
                  {(bySub.get(sk) ?? []).map((f) =>
                    renderField(
                      f,
                      meta.configuredSecrets,
                      f.key === 'MOCK_SMS' && mockSmsEnabled ? (
                        <MockSmsCodePanel codes={meta.mockSmsCodes ?? []} loading={loading} />
                      ) : undefined,
                    ),
                  )}
                </div>
              ),
            }))}
          />
        );
      } else {
        children = (
          <div style={{ maxWidth: 720 }}>
            {fields.map((f) =>
              renderField(
                f,
                meta.configuredSecrets,
                f.key === 'MOCK_SMS' && mockSmsEnabled ? (
                  <MockSmsCodePanel codes={meta.mockSmsCodes ?? []} loading={loading} />
                ) : undefined,
              ),
            )}
          </div>
        );
      }

      return {
        key: group.key,
        label: group.label,
        forceRender: true,
        children,
      };
    });
  }, [meta, mockSmsEnabled, loading]);

  async function onSave() {
    await form.validateFields();
    const values = form.getFieldsValue(true);
    const payload: Record<string, string> = {};
    for (const [k, v] of Object.entries(values)) {
      payload[k] = v === undefined || v === null ? '' : String(v);
    }
    setSaving(true);
    try {
      const res = await request<{ updatedKeys: string[]; requiresRestartKeys: string[] }>(
        '/admin/system-config',
        { method: 'PUT', body: JSON.stringify({ values: payload }) },
      );
      message.success(`已保存 ${res.updatedKeys.length} 项`);
      if (res.requiresRestartKeys.length) {
        message.warning(`以下配置需重启 API 后生效：${res.requiresRestartKeys.join(', ')}`);
      }
      setDirty(false);
      await load();
    } catch (e) {
      message.error(e instanceof Error ? e.message : '保存失败');
    } finally {
      setSaving(false);
    }
  }

  async function onSyncEnv() {
    setSyncing(true);
    try {
      const res = await request<{ message: string; envFilePath: string }>(
        '/admin/system-config/sync-env',
        { method: 'POST' },
      );
      message.success(res.message || '已同步到 env 文件');
    } catch (e) {
      message.error(e instanceof Error ? e.message : '同步失败');
    } finally {
      setSyncing(false);
    }
  }

  async function onImportEnv() {
    try {
      const res = await request<{ imported: number }>('/admin/system-config/import-env', {
        method: 'POST',
      });
      message.success(`已从当前进程环境导入 ${res.imported} 项`);
      await load();
    } catch (e) {
      message.error(e instanceof Error ? e.message : '导入失败');
    }
  }

  return (
    <div style={{ paddingBottom: 88 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
        <div>
          <Typography.Title level={4} style={{ margin: 0 }}>
            系统设置
          </Typography.Title>
          <Typography.Paragraph type="secondary" style={{ marginBottom: 0, marginTop: 8 }}>
            配置存于 <code>system_config</code> 表；保存后写入进程环境。可同步到{' '}
            <code>{meta?.envFilePath ?? '.env'}</code> 以便部署持久化。
          </Typography.Paragraph>
        </div>
        <Space>
          {profile?.adminRole === 'SUPER_ADMIN' ? (
            <>
              <Button onClick={() => void onImportEnv()}>从环境导入</Button>
              <Button loading={syncing} onClick={() => void onSyncEnv()}>
                同步到 env 文件
              </Button>
            </>
          ) : null}
        </Space>
      </div>

      <Alert
        type="info"
        showIcon
        style={{ marginBottom: 16 }}
        message="生效说明"
        description={
          <ul style={{ margin: '8px 0 0', paddingLeft: 20 }}>
            <li>
              <Tag color="green">即时</Tag>：保存后写入 <code>process.env</code>，Mock 开关、短信模板等可立即生效。
            </li>
            <li>
              <Tag color="orange">需重启</Tag>：微信/OSS 密钥等集成凭证变更后，<strong>建议重启 API 进程</strong>。
            </li>
            <li>OSS 始终走阿里云配置；凭证缺失时上传接口将直接报错。</li>
            <li>修改后请点击右下角「保存」；未保存离开页面将提示确认。</li>
          </ul>
        }
      />

      <Card loading={loading}>
        <Form form={form} layout="vertical" onValuesChange={() => setDirty(true)}>
          <Collapse defaultActiveKey={[]} items={collapseItems} />
        </Form>
        {meta?.updatedAt ? (
          <Typography.Text type="secondary" style={{ display: 'block', marginTop: 16 }}>
            最近更新：{new Date(meta.updatedAt).toLocaleString()}
          </Typography.Text>
        ) : null}
      </Card>

      <div
        style={{
          position: 'fixed',
          right: 32,
          bottom: 32,
          zIndex: 1000,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-end',
          gap: 8,
        }}
      >
        {dirty ? <Tag color="orange">有未保存更改</Tag> : null}
        <Button
          type="primary"
          size="large"
          loading={saving}
          onClick={() => void onSave()}
          style={{
            minWidth: 120,
            boxShadow: '0 6px 16px rgba(0,0,0,0.18)',
          }}
        >
          保存
        </Button>
      </div>
    </div>
  );
}