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

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

type TemplateFormState = {
  applicationId: string;
  signatureId: string;
  name: string;
  category: 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: ClientSmsSignature[];
}) {
  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>({
    applicationId: item?.applicationId ?? '',
    signatureId: item?.signatureId ?? '',
    name: item?.name ?? '',
    category: item?.category ?? '行业通知',
    content: initialContent,
    variables: item?.variables?.map((variable) => ({ name: variable.name, example: variable.example ?? undefined, required: variable.required ?? true })) ?? [],
  });
  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.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) {
    update('variables', variables.map((variable) => variable.name === name ? { ...variable, example } : variable));
  }

  return (
    <Modal
      footer={(
        <>
          <Button onClick={onClose} variant="ghost">取消</Button>
          <Button disabled={!form.applicationId || !form.signatureId || !form.name || !form.content.trim()} onClick={() => onSubmit({ ...form, variables })}>提交审核</Button>
        </>
      )}
      onClose={onClose}
      open
      size="xl"
      title={item ? '编辑短信模板' : '添加短信模板'}
    >
      <div className="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}
        />
        <Select
          label="短信签名"
          onChange={(event) => selectSignature(event.target.value)}
          options={[{ label: '请选择签名', value: '' }, ...availableSignatures.map((signature) => ({ label: signature.name, value: signature.id }))]}
          required
          value={form.signatureId}
        />
        <Input label="模板名称" onChange={(event) => update('name', event.target.value)} placeholder="请输入模板名称" 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="请选择签名后填写正文，变量格式：${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 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>
          {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 [applications, setApplications] = useState<ClientSmsApplication[]>([]);
  const [templates, setTemplates] = useState<ClientSmsTemplate[]>([]);
  const [signatures, setSignatures] = useState<ClientSmsSignature[]>([]);
  const [keyword, setKeyword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(true);
  const [modalTemplate, setModalTemplate] = useState<ClientSmsTemplate | 'new' | null>(null);
  const [page, setPage] = useState(1);

  function loadData() {
    setLoading(true);
    Promise.all([clientApi.listApplications(), clientApi.listTemplates(), clientApi.listSignatures()])
      .then(([applicationItems, templateItems, signatureItems]) => {
        setApplications(applicationItems.filter((item) => item.status === 'active'));
        setTemplates(templateItems.filter((item) => item.auditStatus !== 'deleted' && item.auditStatus !== 'disabled'));
        setSignatures(signatureItems);
        setError('');
      })
      .catch((reason: Error) => setError(reason.message || '短信模板加载失败'))
      .finally(() => setLoading(false));
  }

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

  const filteredTemplates = useMemo(() => templates.filter((item) => (
    !keyword || [item.name, item.content, item.application?.name, item.signature?.name].join(' ').includes(keyword)
  )), [keyword, 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);
  }, [filteredTemplates.length, keyword]);

  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,
        category: state.category,
        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 : '模板提交失败');
    }
  }

  function disableTemplate(id: string) {
    clientApi.changeTemplateStatus(id, 'disabled')
      .then(loadData)
      .catch((reason: Error) => setError(reason.message || '模板禁用失败'));
  }

  return (
    <section className="page-stack">
      <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="template-toolbar">
        <Input
          onChange={(event) => setKeyword(event.target.value)}
          placeholder="搜索模板名称、应用、签名或内容"
          prefix={<Search size={17} />}
          value={keyword}
        />
        <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="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="template-card-footer">
                <span>{formatDateTime(template.updatedAt)}</span>
                <div>
                  <button onClick={() => setModalTemplate(template)} type="button">
                    <Edit3 size={14} />
                    编辑
                  </button>
                  <button onClick={() => disableTemplate(template.id)} type="button">
                    <Trash2 size={14} />
                    删除
                  </button>
                </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={filteredTemplates.length}
      />
      {!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>
  );
}