import { startTransition, useEffect, useRef, useState } from 'react';
import { Edit3, MessageSquare, Plus, Search } from 'lucide-react';
import { Button, DeleteRiskAction, Input, Modal, Pagination, Select, Tag, Textarea } from '@/components/ui';
import {
  clientApi,
  type ClientSmsApplication,
  type ClientSmsSignatureView,
  type ClientSmsTemplate,
} from '@/api/adminApi';
import { formatDateTime } from '@/utils/dateTime';
import { replaceLeadingSmsSignature } from '@/utils/smsSignature';
import {
  templateVariableError,
  templateVariableNameHint,
  templateVariableNamePattern,
} from '@/utils/templateVariables';
import './ClientTemplatesPage.css';

type TemplateVariable = {
  name: string;
  example?: string;
  required?: boolean;
};

type TemplateFormState = {
  applicationId: string;
  signatureId: string;
  name: string;
  content: string;
  variables: TemplateVariable[];
};

const statusTone: Record<string, 'success' | 'info' | 'danger' | 'warning'> = {
  approved: 'success',
  pending: 'info',
  rejected: 'danger',
  draft: 'warning',
};

const statusLabel: Record<string, string> = {
  approved: '已通过',
  pending: '审核中',
  rejected: '已驳回',
  draft: '草稿',
  disabled: '已禁用',
};

const recommendedVariables = [
  ['验证码', 'code'],
  ['手机号', 'phone'],
  ['姓名', 'name'],
  ['日期', 'date'],
  ['金额', 'amount'],
  ['时间', 'time'],
  ['余额', 'balance'],
  ['地址', 'address'],
  ['快递单号', 'trackingNumber'],
  ['链接', 'link'],
];

function extractVariables(content: string): TemplateVariable[] {
  return Array.from(new Set(Array.from(content.matchAll(/\$\{([^}]+)\}/g)).map((match) => match[1]))).map((name) => ({
    name,
    required: true,
  }));
}

function billingUnits(content: string) {
  if (!content) return 1;
  return content.length <= 70 ? 1 : Math.ceil(content.length / 67);
}

function TemplateModal({
  applications,
  item,
  onClose,
  onSubmit,
  signatures,
}: {
  applications: ClientSmsApplication[];
  item?: ClientSmsTemplate;
  onClose: () => void;
  onSubmit: (state: TemplateFormState) => void;
  signatures: ClientSmsSignatureView[];
}) {
  const [customVariable, setCustomVariable] = useState('');
  const [customVariableError, setCustomVariableError] = useState('');
  const [variablesOpen, setVariablesOpen] = useState(false);
  const contentRef = useRef<HTMLTextAreaElement>(null);
  const initialSignature = signatures.find((signature) => signature.id === item?.signatureId);
  const initialContent = item?.signatureId
    ? replaceLeadingSmsSignature(item.content, initialSignature?.name)
    : (item?.content ?? '');
  const [form, setForm] = useState<TemplateFormState>({
    applicationId: item?.applicationId ?? '',
    signatureId: item?.signatureId ?? '',
    name: item?.name ?? '',
    content: initialContent,
    variables:
      item?.variables?.map((variable) => ({
        name: variable.name,
        example: variable.example ?? undefined,
        required: variable.required ?? true,
      })) ?? [],
  });
  const [initialForm] = useState(form);
  const dirty = JSON.stringify(form) !== JSON.stringify(initialForm);
  const variableError = templateVariableError(form.content);
  const application = applications.find((candidate) => candidate.id === form.applicationId);
  const availableSignatures = signatures.filter(
    (signature) =>
      signature.auditStatus === 'approved' &&
      (!application || signature.tenantId === application.tenantId) &&
      (!signature.applicationId || signature.applicationId === form.applicationId),
  );
  const variables = form.variables.length ? form.variables : extractVariables(form.content);

  function update<Key extends keyof TemplateFormState>(key: Key, value: TemplateFormState[Key]) {
    setForm((current) => ({ ...current, [key]: value }));
  }

  function setContent(content: string) {
    setForm((current) => ({ ...current, content, variables: extractVariables(content) }));
  }

  function selectSignature(signatureId: string) {
    const signature = availableSignatures.find((candidate) => candidate.id === signatureId);
    setForm((current) => {
      const content = replaceLeadingSmsSignature(current.content, signature?.name);
      return { ...current, signatureId, content, variables: extractVariables(content) };
    });
  }

  function insertVariable(name: string) {
    const normalized = name;
    if (!templateVariableNamePattern.test(normalized)) {
      setCustomVariableError(templateVariableNameHint);
      return;
    }
    if (!normalized) return;
    const token = `\${${normalized}}`;
    const textarea = contentRef.current;
    const start = textarea?.selectionStart ?? form.content.length;
    const end = textarea?.selectionEnd ?? start;
    setContent(`${form.content.slice(0, start)}${token}${form.content.slice(end)}`);
    requestAnimationFrame(() => {
      contentRef.current?.focus();
      contentRef.current?.setSelectionRange(start + token.length, start + token.length);
    });
  }

  function updateVariableExample(name: string, example: string) {
    update(
      'variables',
      variables.map((variable) => (variable.name === name ? { ...variable, example } : variable)),
    );
  }

  return (
    <Modal
      dirty={dirty}
      footer={({ requestClose }) => (
        <>
          <Button onClick={requestClose} variant="ghost">
            取消
          </Button>
          <Button
            disabled={
              !form.applicationId ||
              !form.signatureId ||
              !form.name.trim() ||
              !form.content.trim() ||
              Boolean(variableError)
            }
            onClick={() => onSubmit({ ...form, variables })}
          >
            提交审核
          </Button>
        </>
      )}
      onClose={onClose}
      open
      size="xl"
      title={item ? '编辑短信模板' : '添加短信模板'}
    >
      <div className="template-form client-template-form">
        <Select
          label="短信应用"
          onChange={(event) => update('applicationId', event.target.value)}
          options={[
            { label: '请选择应用', value: '' },
            ...applications.map((app) => ({ label: app.name, value: app.id })),
          ]}
          value={form.applicationId}
        />
        <Input
          label="模板名称"
          onChange={(event) => update('name', event.target.value)}
          placeholder="请输入模板名称"
          value={form.name}
        />
        <Select
          label="短信签名"
          searchable
          searchPlaceholder="搜索短信签名"
          onChange={(event) => selectSignature(event.target.value)}
          options={[
            { label: '请选择签名', value: '' },
            ...availableSignatures.map((signature) => ({ label: signature.name, value: signature.id })),
          ]}
          required
          value={form.signatureId}
        />
        <Textarea
          hint="模板内容必须以所选签名开头；选择或切换签名时系统会自动填入或替换完整签名，例如：【XX公司】验证码为${code}。"
          error={variableError}
          label="模板内容"
          onChange={(event) => setContent(event.target.value)}
          placeholder="请选择签名后填写正文，变量格式：${code}"
          ref={contentRef}
          required
          rows={6}
          value={form.content}
        />
        <div className="template-form-meta">
          <button onClick={() => setVariablesOpen((current) => !current)} type="button">
            <Plus size={16} /> {variablesOpen ? '收起变量面板' : '插入变量'}
          </button>
          <span>
            {form.content.length} 字符，计费 {billingUnits(form.content)} 条
          </span>
        </div>
        {variablesOpen ? (
          <div className="template-variable-panel">
            <h3>推荐变量</h3>
            <div className="template-variable-buttons">
              {recommendedVariables.map(([label, value]) => (
                <button key={value} onClick={() => insertVariable(value)} type="button">
                  {label} ({value})
                </button>
              ))}
            </div>
            <h3>自定义变量</h3>
            <div className="template-custom-variable">
              <Input
                aria-label="自定义变量名"
                error={customVariableError}
                maxLength={32}
                onChange={(event) => {
                  if (/[^A-Za-z0-9]/.test(event.target.value)) {
                    setCustomVariableError(templateVariableNameHint);
                    return;
                  }
                  setCustomVariableError('');
                  setCustomVariable(event.target.value);
                }}
                placeholder="英文字符或数字"
                value={customVariable}
              />
              <Button
                onClick={() => {
                  if (!templateVariableNamePattern.test(customVariable)) {
                    setCustomVariableError(templateVariableNameHint);
                    return;
                  }
                  insertVariable(customVariable);
                  setCustomVariable('');
                }}
              >
                插入
              </Button>
            </div>
          </div>
        ) : null}
        <div className="template-variable-panel">
          <h3>变量示例</h3>
          {variables.length ? (
            variables.map((variable) => (
              <Input
                key={variable.name}
                label={`\${${variable.name}}`}
                onChange={(event) => updateVariableExample(variable.name, event.target.value)}
                placeholder="请输入变量示例值"
                value={variable.example ?? ''}
              />
            ))
          ) : (
            <p className="muted">模板内容中暂无变量。</p>
          )}
        </div>
      </div>
    </Modal>
  );
}

export function ClientTemplatesPage() {
  const requestSequence = useRef(0);
  const [applications, setApplications] = useState<ClientSmsApplication[]>([]);
  const [templates, setTemplates] = useState<ClientSmsTemplate[]>([]);
  const [signatures, setSignatures] = useState<ClientSmsSignatureView[]>([]);
  const [keyword, setKeyword] = useState('');
  const [appliedKeyword, setAppliedKeyword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(true);
  const [modalTemplate, setModalTemplate] = useState<ClientSmsTemplate | 'new' | null>(null);
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const pageSize = 10;

  function loadData(targetPage = page) {
    const sequence = ++requestSequence.current;
    setLoading(true);
    clientApi
      .listTemplatesPage({ includeHistory: true, keyword: appliedKeyword || undefined, page: targetPage, pageSize })
      .then((templateResult) => {
        if (sequence !== requestSequence.current) return;
        setTemplates(
          templateResult.items.filter((item) => item.auditStatus !== 'deleted' && item.auditStatus !== 'disabled'),
        );
        setTotal(templateResult.total);
        setError('');
      })
      .catch((reason: Error) => {
        if (sequence === requestSequence.current) setError(reason.message || '短信模板加载失败');
      })
      .finally(() => {
        if (sequence === requestSequence.current) setLoading(false);
      });
  }

  useEffect(() => {
    startTransition(() => loadData(page));
  }, [appliedKeyword, page]);

  useEffect(() => {
    let cancelled = false;
    void Promise.all([clientApi.listApplicationOptions(), clientApi.listSignatureOptions()])
      .then(([applicationItems, signatureItems]) => {
        if (cancelled) return;
        setApplications(applicationItems.filter((item) => item.status === 'active'));
        setSignatures(signatureItems);
      })
      .catch((reason: Error) => {
        if (!cancelled) setError(reason.message || '模板选项加载失败');
      });
    return () => {
      cancelled = true;
    };
  }, []);

  const filteredTemplates = templates;
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
  const currentPage = Math.min(page, totalPages);
  const visibleTemplates = templates;

  async function saveTemplate(state: TemplateFormState) {
    const existing = modalTemplate && modalTemplate !== 'new' ? modalTemplate : null;
    try {
      const payload = {
        applicationId: state.applicationId,
        signatureId: state.signatureId || undefined,
        name: state.name,
        content: state.content,
        variables: state.variables,
      };
      const template = existing
        ? await clientApi.updateTemplate(existing.id, { ...payload, signatureId: state.signatureId || null })
        : await clientApi.createTemplate(payload);
      await clientApi.submitTemplate(template.id);
      setModalTemplate(null);
      loadData();
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : '模板提交失败');
    }
  }

  return (
    <section className="page-stack client-templates-page">
      <div className="template-page-header">
        <div className="sms-send-title">
          <span className="sms-send-title__icon">
            <MessageSquare size={22} />
          </span>
          <h1>短信模板列表</h1>
        </div>
      </div>

      <div className="client-template-toolbar">
        <Input
          onChange={(event) => setKeyword(event.target.value)}
          placeholder="搜索模板名称、应用、签名或内容"
          prefix={<Search size={17} />}
          value={keyword}
        />
        <div className="ui-query-actions">
          <Button
            icon={<Search size={17} />}
            onClick={() => {
              setPage(1);
              setAppliedKeyword(keyword.trim());
            }}
          >
            查询
          </Button>
          <Button
            onClick={() => {
              setKeyword('');
              setPage(1);
              setAppliedKeyword('');
            }}
            variant="ghost"
          >
            重置
          </Button>
        </div>
        <Button icon={<Plus size={17} />} onClick={() => setModalTemplate('new')}>
          添加短信模板
        </Button>
      </div>
      {loading ? <p className="muted">正在加载短信模板...</p> : null}
      {error ? <p className="form-error">{error}</p> : null}

      <div className="template-card-grid">
        {visibleTemplates.map((template) => {
          const variables =
            template.variables?.map((item) => item.name) ?? extractVariables(template.content).map((item) => item.name);
          return (
            <article className="template-card template-card--green" key={template.id}>
              <h2>{template.name}</h2>
              <p className="muted">
                {template.application?.name ?? template.applicationId} / {template.signature?.name ?? '未绑定签名'}
              </p>
              <Tag tone={statusTone[template.auditStatus] ?? 'info'}>
                {statusLabel[template.auditStatus] ?? template.auditStatus}
              </Tag>
              <p className="client-template-content">{template.content}</p>
              <div className="template-vars">
                <span>变量：</span>
                {variables.length > 0 ? (
                  variables.map((item) => <strong key={item}>${`{${item}}`}</strong>)
                ) : (
                  <span className="muted">无变量</span>
                )}
              </div>
              <div className="client-template-footer">
                <span>{formatDateTime(template.updatedAt)}</span>
                <div>
                  <Button
                    icon={<Edit3 size={14} />}
                    onClick={() => setModalTemplate(template)}
                    size="sm"
                    variant="ghost"
                  >
                    编辑
                  </Button>
                  <DeleteRiskAction
                    onCompleted={() => void loadData()}
                    portal="client"
                    targetId={template.id}
                    targetType="template"
                  />
                </div>
              </div>
            </article>
          );
        })}
      </div>
      <Pagination
        nextDisabled={currentPage >= totalPages}
        onNext={() => setPage((value) => Math.min(totalPages, value + 1))}
        onPrevious={() => setPage((value) => Math.max(1, value - 1))}
        page={currentPage}
        totalPages={totalPages}
        onPageChange={setPage}
        previousDisabled={currentPage <= 1}
        total={total}
      />
      {!loading && !error && filteredTemplates.length === 0 ? <p className="muted">暂无短信模板。</p> : null}

      {modalTemplate ? (
        <TemplateModal
          applications={applications}
          item={modalTemplate === 'new' ? undefined : modalTemplate}
          onClose={() => setModalTemplate(null)}
          onSubmit={(state) => {
            void saveTemplate(state);
          }}
          signatures={signatures}
        />
      ) : null}
    </section>
  );
}