import { useEffect, useMemo, useRef, useState } from 'react';
import { Edit3, Eye, Plus, Search, Trash2 } from 'lucide-react';
import { adminApi, type ClientSmsApplication, type ClientSmsSignature, type ClientSmsTemplate, type TenantOption } from '@/api/adminApi';
import { formatDateTime } from '@/utils/dateTime';
import { Breadcrumb, Button, Input, Modal, Pagination, Select, Tabs, Tag, Textarea } from '@/components/ui';
import { replaceLeadingSmsSignature } from '@/utils/smsSignature';

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

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

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

function extractVariables(content: string): TemplateVariable[] {
  const matches = content.match(/\$\{[a-zA-Z0-9_]+\}/g) ?? [];
  return [...new Set(matches)].map((match) => ({ name: match.slice(2, -1), required: true }));
}

function formatDate(value?: string) {
  return formatDateTime(value);
}

function statusTone(status: string) {
  if (status === 'approved') return 'success';
  if (status === 'rejected') return 'danger';
  if (status === 'deleted') return 'neutral';
  return 'info';
}

const auditStatusLabel: Record<string, string> = {
  approved: '已通过',
  draft: '草稿',
  pending: '审核中',
  rejected: '已驳回',
  deleted: '已删除',
};

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

function TemplateFormModal({
  applications,
  item,
  onClose,
  onSubmit,
  signatures,
  tenants,
}: {
  applications: ClientSmsApplication[];
  item?: ClientSmsTemplate;
  onClose: () => void;
  onSubmit: (state: TemplateFormState) => void;
  signatures: ClientSmsSignature[];
  tenants: TenantOption[];
}) {
  const [customVariable, setCustomVariable] = 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>({
    tenantId: item?.tenantId ?? '',
    applicationId: item?.applicationId ?? '',
    signatureId: item?.signatureId ?? '',
    name: item?.name ?? '',
    content: initialContent,
    category: item?.category ?? '行业通知',
    variables: item?.variables?.map((variable) => ({ name: variable.name, example: variable.example ?? undefined, required: variable.required ?? true })) ?? [],
  });
  const tenantApplications = applications.filter((application) => application.tenantId === form.tenantId && application.status !== 'deleted');
  const tenantSignatures = signatures.filter((signature) => (
    signature.tenantId === form.tenantId
    && signature.auditStatus !== 'deleted'
    && (!signature.applicationId || signature.applicationId === form.applicationId)
  ));
  const currentVariables = 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 = tenantSignatures.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.trim();
    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) {
    const variables = currentVariables.map((variable) => variable.name === name ? { ...variable, example } : variable);
    update('variables', variables);
  }

  return (
    <Modal
      footer={(
        <>
          <Button onClick={onClose} variant="ghost">取消</Button>
          <Button disabled={!form.tenantId || !form.applicationId || !form.signatureId || !form.name || !form.content.trim()} onClick={() => onSubmit({ ...form, variables: currentVariables })}>保存</Button>
        </>
      )}
      onClose={onClose}
      open
      size="xl"
      title={<div className="template-modal-title"><h2>{item ? '编辑短信模板' : '添加短信模板'}</h2><p>模板内容和变量将写入真实后台。</p></div>}
    >
      <div className="template-form">
        <Select
          disabled={Boolean(item)}
          label="所属企业"
          onChange={(event) => update('tenantId', event.target.value)}
          options={[
            { label: '请选择企业', value: '' },
            ...tenants.map((tenant) => ({ label: `${tenant.name}（${tenant.code}）`, value: tenant.id })),
          ]}
          required
          value={form.tenantId}
        />
        <Select
          label="所属应用"
          onChange={(event) => update('applicationId', event.target.value)}
          options={[
            { label: '请选择应用', value: '' },
            ...tenantApplications.map((application) => ({ label: application.name, value: application.id })),
          ]}
          required
          value={form.applicationId}
        />
        <Select
          label="签名"
          onChange={(event) => selectSignature(event.target.value)}
          options={[
            { label: '请选择签名', value: '' },
            ...tenantSignatures.map((signature) => ({ label: signature.name, value: signature.id })),
          ]}
          required
          value={form.signatureId}
        />
        <Input label="模板名称" onChange={(event) => update('name', event.target.value)} placeholder="请输入模板名称" required value={form.name} />
        <Input label="模板分类" onChange={(event) => update('category', event.target.value)} placeholder="行业通知/营销推广/验证码" value={form.category} />
        <Textarea
          hint="模板内容必须以所选签名开头；选择或切换签名时系统会自动填入或替换完整签名，例如：【XX公司】验证码为${code}。"
          label="模板内容"
          onChange={(event) => setContent(event.target.value)}
          placeholder="请选择签名后填写正文，例如：尊敬的${name}，您的验证码为${code}。"
          required
          rows={8}
          ref={contentRef}
          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 onChange={(event) => setCustomVariable(event.target.value)} placeholder="英文字符或数字" value={customVariable} />
              <Button onClick={() => { insertVariable(customVariable); setCustomVariable(''); }}>插入</Button>
            </div>
          </div>
        ) : null}
        <div className="template-variable-panel">
          <h3>变量示例</h3>
          {currentVariables.length ? currentVariables.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>
  );
}

function TemplatePreviewModal({ item, onClose }: { item: ClientSmsTemplate; onClose: () => void }) {
  return (
    <Modal footer={<Button onClick={onClose}>关闭</Button>} onClose={onClose} open title="模板预览">
      <div className="detail-grid">
        <div><span>企业</span><strong>{item.tenant?.name ?? item.tenantId}</strong></div>
        <div><span>应用</span><strong>{item.application?.name ?? item.applicationId}</strong></div>
        <div><span>签名</span><strong>{item.signature?.name ?? '-'}</strong></div>
        <div><span>计费条数</span><strong>{billingUnits(item.content)} 条</strong></div>
        <div className="detail-grid__wide"><span>模板内容</span><strong>{item.content}</strong></div>
        <div className="detail-grid__wide"><span>变量</span><strong>{item.variables?.map((variable) => `\${${variable.name}}`).join('、') || '-'}</strong></div>
      </div>
    </Modal>
  );
}

function ConfirmModal({ message, onCancel, onConfirm }: { message: string; onCancel: () => void; onConfirm: () => void }) {
  return (
    <Modal
      footer={(
        <>
          <Button onClick={onCancel} variant="ghost">取消</Button>
          <Button onClick={onConfirm} variant="danger">确认删除</Button>
        </>
      )}
      onClose={onCancel}
      open
      title="删除确认"
    >
      <p className="admin-confirm-text">{message}</p>
    </Modal>
  );
}

export function AdminEnterpriseTemplatesPage() {
  const [activeTab, setActiveTab] = useState<'sms' | 'mms'>('sms');
  const [applications, setApplications] = useState<ClientSmsApplication[]>([]);
  const [deleteTarget, setDeleteTarget] = useState<ClientSmsTemplate | null>(null);
  const [enterpriseKeyword, setEnterpriseKeyword] = useState('');
  const [appliedEnterpriseKeyword, setAppliedEnterpriseKeyword] = useState('');
  const [applicationKeyword, setApplicationKeyword] = useState('');
  const [appliedApplicationKeyword, setAppliedApplicationKeyword] = useState('');
  const [error, setError] = useState('');
  const [signatureItems, setSignatureItems] = useState<ClientSmsSignature[]>([]);
  const [templateModal, setTemplateModal] = useState<ClientSmsTemplate | 'new' | null>(null);
  const [templatePreview, setTemplatePreview] = useState<ClientSmsTemplate | null>(null);
  const [templates, setTemplates] = useState<ClientSmsTemplate[]>([]);
  const [templateNameKeyword, setTemplateNameKeyword] = useState('');
  const [appliedTemplateNameKeyword, setAppliedTemplateNameKeyword] = useState('');
  const [templateContentKeyword, setTemplateContentKeyword] = useState('');
  const [appliedTemplateContentKeyword, setAppliedTemplateContentKeyword] = useState('');
  const [tenants, setTenants] = useState<TenantOption[]>([]);
  const [page, setPage] = useState(1);

  async function loadData(filters = { enterpriseKeyword: appliedEnterpriseKeyword, applicationKeyword: appliedApplicationKeyword, nameKeyword: appliedTemplateNameKeyword, contentKeyword: appliedTemplateContentKeyword }) {
    try {
      const [templateItems, tenantItems, applicationItems, signatureList] = await Promise.all([
        adminApi.listEnterpriseTemplates(filters),
        adminApi.listTenants(),
        adminApi.listEnterpriseApplications(),
        adminApi.listEnterpriseSignatures(),
      ]);
      setTemplates(templateItems);
      setTenants(tenantItems.filter((tenant) => tenant.status !== 'deleted'));
      setApplications(applicationItems);
      setSignatureItems(signatureList);
      setError('');
    } catch (failure) {
      setError(failure instanceof Error ? failure.message : '企业模板加载失败');
    }
  }

  useEffect(() => {
    void loadData();
  }, []);

  const filteredTemplates = useMemo(() => templates.filter((item) => {
    const enterprise = item.tenant?.name ?? item.tenantId;
    const application = item.application?.name ?? '';
    return (!appliedEnterpriseKeyword || enterprise.includes(appliedEnterpriseKeyword))
      && (!appliedApplicationKeyword || application.includes(appliedApplicationKeyword))
      && (!appliedTemplateNameKeyword || item.name.includes(appliedTemplateNameKeyword))
      && (!appliedTemplateContentKeyword || item.content.includes(appliedTemplateContentKeyword));
  }), [appliedApplicationKeyword, appliedEnterpriseKeyword, appliedTemplateContentKeyword, appliedTemplateNameKeyword, templates]);
  const pageSize = 10;
  const totalPages = Math.max(1, Math.ceil(filteredTemplates.length / pageSize));
  const currentPage = Math.min(page, totalPages);
  const visibleTemplates = filteredTemplates.slice((currentPage - 1) * pageSize, currentPage * pageSize);

  useEffect(() => {
    setPage(1);
  }, [appliedApplicationKeyword, appliedEnterpriseKeyword, appliedTemplateContentKeyword, appliedTemplateNameKeyword]);

  async function saveTemplate(state: TemplateFormState) {
    const existing = templateModal && templateModal !== 'new' ? templateModal : null;
    try {
      if (existing) {
        await adminApi.updateEnterpriseTemplate(existing.id, {
          applicationId: state.applicationId,
          category: state.category,
          content: state.content,
          name: state.name,
          signatureId: state.signatureId || null,
          variables: state.variables,
        });
      } else {
        await adminApi.createEnterpriseTemplate({
          applicationId: state.applicationId,
          category: state.category,
          content: state.content,
          name: state.name,
          signatureId: state.signatureId || undefined,
          tenantId: state.tenantId,
          variables: state.variables,
        });
      }
      setTemplateModal(null);
      await loadData();
    } catch (failure) {
      setError(failure instanceof Error ? failure.message : '企业模板保存失败');
    }
  }

  async function confirmDelete() {
    if (!deleteTarget) {
      return;
    }
    await adminApi.changeEnterpriseTemplateStatus(deleteTarget.id, 'deleted', '运营端删除模板');
    setDeleteTarget(null);
    await loadData();
  }

  return (
    <section className="page-stack admin-customer-split-page">
      <div className="page-heading">
        <div>
          <Breadcrumb items={['客户管理', '企业模板管理']} />
          <h1>企业模板管理</h1>
        </div>
        <Button icon={<Plus size={16} />} onClick={() => setTemplateModal(activeTab === 'sms' ? 'new' : null)}>添加模板</Button>
      </div>
      {error ? <p className="form-error">{error}</p> : null}
      <div className="surface admin-split-filter">
        <Input label="企业名称" onChange={(event) => setEnterpriseKeyword(event.target.value)} placeholder="请输入企业名称" prefix={<Search size={16} />} value={enterpriseKeyword} />
        <Input label="企业应用" onChange={(event) => setApplicationKeyword(event.target.value)} placeholder="请输入企业应用名称" prefix={<Search size={16} />} value={applicationKeyword} />
        <Input label="模板名称" onChange={(event) => setTemplateNameKeyword(event.target.value)} placeholder="请输入模板名称" prefix={<Search size={16} />} value={templateNameKeyword} />
        <Input label="模板内容" onChange={(event) => setTemplateContentKeyword(event.target.value)} placeholder="请输入模板内容" prefix={<Search size={16} />} value={templateContentKeyword} />
        <div className="admin-split-filter__actions">
          <Button icon={<Search size={16} />} onClick={() => {
            const filters = { enterpriseKeyword: enterpriseKeyword.trim(), applicationKeyword: applicationKeyword.trim(), nameKeyword: templateNameKeyword.trim(), contentKeyword: templateContentKeyword.trim() };
            setAppliedEnterpriseKeyword(filters.enterpriseKeyword);
            setAppliedApplicationKeyword(filters.applicationKeyword);
            setAppliedTemplateNameKeyword(filters.nameKeyword);
            setAppliedTemplateContentKeyword(filters.contentKeyword);
            void loadData(filters);
          }}>查询</Button>
          <Button onClick={() => {
            const filters = { enterpriseKeyword: '', applicationKeyword: '', nameKeyword: '', contentKeyword: '' };
            setEnterpriseKeyword('');
            setApplicationKeyword('');
            setTemplateNameKeyword('');
            setTemplateContentKeyword('');
            setAppliedEnterpriseKeyword('');
            setAppliedApplicationKeyword('');
            setAppliedTemplateNameKeyword('');
            setAppliedTemplateContentKeyword('');
            void loadData(filters);
          }} variant="ghost">重置</Button>
        </div>
      </div>
      <div className="surface section-stack">
        <Tabs
          onChange={(value) => setActiveTab(value as 'sms' | 'mms')}
          value={activeTab}
          items={[
            { label: '短信模板', value: 'sms', content: (
              <div className="admin-enterprise-template-list">
                {visibleTemplates.map((template) => (
                  <article className="admin-enterprise-template-row" key={template.id}>
                    <div className="admin-enterprise-template-row__identity">
                      <div className="admin-enterprise-template-row__title">
                        <strong>{template.name}</strong>
                        <Tag tone={statusTone(template.auditStatus)}>{auditStatusLabel[template.auditStatus] ?? template.auditStatus}</Tag>
                      </div>
                      <dl>
                        <div><dt>企业</dt><dd>{template.tenant?.name ?? template.tenantId}</dd></div>
                        <div><dt>应用</dt><dd>{template.application?.name ?? template.applicationId}</dd></div>
                        <div><dt>签名</dt><dd>{template.signature?.name ?? '未绑定'}</dd></div>
                      </dl>
                    </div>
                    <div className="admin-enterprise-template-row__content">
                      <span>模板内容</span>
                      <p>{template.content}</p>
                      <small>{template.variables?.length ?? 0} 个变量</small>
                    </div>
                    <div className="admin-enterprise-template-row__meta">
                      <span>更新时间</span>
                      <strong>{formatDate(template.updatedAt)}</strong>
                    </div>
                    <div className="admin-enterprise-template-row__actions">
                      <Button icon={<Eye size={15} />} onClick={() => setTemplatePreview(template)} size="sm" variant="ghost">预览</Button>
                      <Button icon={<Edit3 size={15} />} onClick={() => setTemplateModal(template)} size="sm" variant="ghost">编辑</Button>
                      <Button icon={<Trash2 size={15} />} onClick={() => setDeleteTarget(template)} size="sm" variant="danger">删除</Button>
                    </div>
                  </article>
                ))}
                {filteredTemplates.length === 0 ? <div className="ui-table__empty">暂无企业模板</div> : null}
                <Pagination
                  nextDisabled={currentPage >= totalPages}
                  onNext={() => setPage((value) => Math.min(totalPages, value + 1))}
                  onPageChange={setPage}
                  onPrevious={() => setPage((value) => Math.max(1, value - 1))}
                  page={currentPage}
                  previousDisabled={currentPage <= 1}
                  total={filteredTemplates.length}
                  totalPages={totalPages}
                />
              </div>
            ) },
            { label: '彩信模板', pending: true, value: 'mms', content: <div className="ui-table__empty">彩信模板待后端能力确认，本页不展示演示数据。</div> },
          ]}
        />
      </div>

      {templateModal ? (
        <TemplateFormModal
          applications={applications}
          item={templateModal === 'new' ? undefined : templateModal}
          onClose={() => setTemplateModal(null)}
          onSubmit={(state) => { void saveTemplate(state); }}
          signatures={signatureItems}
          tenants={tenants}
        />
      ) : null}
      {templatePreview ? <TemplatePreviewModal item={templatePreview} onClose={() => setTemplatePreview(null)} /> : null}
      {deleteTarget ? (
        <ConfirmModal
          message={`确认删除模板“${deleteTarget.name}”吗？删除后会写入真实后台。`}
          onCancel={() => setDeleteTarget(null)}
          onConfirm={() => { void confirmDelete(); }}
        />
      ) : null}
    </section>
  );
}