import { useEffect, useMemo, useState, type ReactNode } from 'react';

import {

  Alert,

  Button,

  Card,

  Collapse,

  Form,

  Input,

  InputNumber,

  Space,

  Switch,

  Table,

  Tag,

  Typography,

  message,

} from 'antd';

import type { MockSmsCodeItem, SystemConfigFieldMeta, SystemConfigFormResponse } from '@dukang/shared-types';

import { request } from '../lib/api';



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>

    );

  }



  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 [form] = Form.useForm<Record<string, string>>();

  const [meta, setMeta] = useState<SystemConfigFormResponse | null>(null);

  const [loading, setLoading] = useState(true);

  const [saving, setSaving] = useState(false);

  const [syncing, setSyncing] = useState(false);

  const mockSmsEnabled = Form.useWatch('MOCK_SMS', form) === 'true';



  async function load(silent = false) {

    if (!silent) setLoading(true);

    try {

      const data = await request<SystemConfigFormResponse>('/admin/system-config');

      if (silent) {
        // 仅刷新 Mock 验证码列表，避免轮询用服务端值覆盖未保存的表单（含 MOCK_SMS 开关）
        setMeta((prev) =>
          prev
            ? { ...prev, mockSmsCodes: data.mockSmsCodes, updatedAt: data.updatedAt }
            : data,
        );
        return;
      }

      setMeta(data);

      form.setFieldsValue(data.values);

    } catch (e) {

      if (!silent) message.error(e instanceof Error ? e.message : '加载失败');

    } finally {

      if (!silent) setLoading(false);

    }

  }



  useEffect(() => {

    void load();

  }, []);



  useEffect(() => {

    // 以表单开关为准展示验证码；轮询只刷列表，不回写表单
    if (!mockSmsEnabled) return;

    const timer = window.setInterval(() => void load(true), 5000);

    return () => window.clearInterval(timer);

  }, [mockSmsEnabled]);



  const collapseItems = useMemo(() => {

    if (!meta) return [];

    return meta.groups.map((group) => ({

      key: group.key,

      label: group.label,

      children: (

        <div style={{ maxWidth: 720 }}>

          {meta.fields

            .filter((f) => f.group === group.key)

            .map((f) =>

              renderField(

                f,

                meta.configuredSecrets,

                f.key === 'MOCK_SMS' && mockSmsEnabled ? (

                  <MockSmsCodePanel codes={meta.mockSmsCodes ?? []} loading={loading} />

                ) : undefined,

              ),

            )}

        </div>

      ),

    }));

  }, [meta, mockSmsEnabled, loading]);



  async function onSave() {

    const values = await form.validateFields();

    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(', ')}`);

      }

      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>

      <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>

          <Button onClick={() => void onImportEnv()}>从环境导入</Button>

          <Button loading={syncing} onClick={() => void onSyncEnv()}>

            同步到 env 文件

          </Button>

          <Button type="primary" loading={saving} onClick={() => void onSave()}>

            保存

          </Button>

        </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>

          </ul>

        }

      />



      <Card loading={loading}>

        <Form form={form} layout="vertical">

          <Collapse defaultActiveKey={meta?.groups.map((g) => g.key)} items={collapseItems} />

        </Form>

        {meta?.updatedAt ? (

          <Typography.Text type="secondary" style={{ display: 'block', marginTop: 16 }}>

            最近更新：{new Date(meta.updatedAt).toLocaleString()}

          </Typography.Text>

        ) : null}

      </Card>

    </div>

  );

}