import { useEffect, useMemo, useState } from 'react';
import { Check, Download, FileText, Plus, Search, Send, Trash2 } from 'lucide-react';
import { Button, DateTimeInput, Input, Modal, Select, Tag, Textarea } from '@/components/ui';
import { clientApi, type ClientSmsApplication, type ClientSmsSignature, type ClientSmsTemplate, type ImportPreviewResponse, type SmsBatchTask } from '@/api/adminApi';

type Recipient = {
  id: string;
  phone: string;
};

type SendMode = 'now' | 'scheduled';
type ReceiverMode = 'manual' | 'import';

export function ClientSendPage() {
  const [applications, setApplications] = useState<ClientSmsApplication[]>([]);
  const [templates, setTemplates] = useState<ClientSmsTemplate[]>([]);
  const [signatures, setSignatures] = useState<ClientSmsSignature[]>([]);
  const [error, setError] = useState('');
  const [taskName, setTaskName] = useState('');
  const [applicationId, setApplicationId] = useState('');
  const [signatureId, setSignatureId] = useState('');
  const [templateId, setTemplateId] = useState('');
  const [templatePickerOpen, setTemplatePickerOpen] = useState(false);
  const [templateKeyword, setTemplateKeyword] = useState('');
  const [messageContent, setMessageContent] = useState('');
  const [sendMode, setSendMode] = useState<SendMode>('now');
  const [scheduledAt, setScheduledAt] = useState('');
  const [receiverMode, setReceiverMode] = useState<ReceiverMode>('manual');
  const [recipients, setRecipients] = useState<Recipient[]>([{ id: '1', phone: '' }]);
  const [importContent, setImportContent] = useState('');
  const [importFileName, setImportFileName] = useState('');
  const [importFileUrl, setImportFileUrl] = useState('');
  const [importPreview, setImportPreview] = useState<ImportPreviewResponse | null>(null);
  const [importLoading, setImportLoading] = useState(false);
  const [submittedRecord, setSubmittedRecord] = useState<SmsBatchTask | null>(null);

  useEffect(() => {
    Promise.all([clientApi.listApplications(), clientApi.listTemplates({ status: 'approved' }), clientApi.listSignatures()])
      .then(([applicationItems, templateItems, signatureItems]) => {
        setApplications(applicationItems.filter((item) => item.status === 'active'));
        setTemplates(templateItems);
        setSignatures(signatureItems.filter((item) => item.auditStatus === 'approved'));
        setError('');
      })
      .catch((reason: Error) => setError(reason.message || '短信发送基础数据加载失败'));
  }, []);

  useEffect(() => () => {
    if (importFileUrl) {
      URL.revokeObjectURL(importFileUrl);
    }
  }, [importFileUrl]);

  const selectedSignature = useMemo(
    () => signatures.find((item) => item.id === signatureId),
    [signatures, signatureId],
  );
  const selectedTemplate = useMemo(
    () => templates.find((item) => item.id === templateId),
    [templates, templateId],
  );
  const filteredTemplates = templates.filter((item) => (
    item.name.includes(templateKeyword) || item.content.includes(templateKeyword)
  ));
  const validRecipients = recipients.filter((item) => item.phone.trim());
  const importedValidCount = importPreview?.validCount ?? 0;
  const receiverCount = receiverMode === 'manual' ? validRecipients.length : importedValidCount;
  const previewText = selectedSignature && messageContent
    ? `【${selectedSignature.name}】${messageContent}`
    : messageContent;
  const wordCount = previewText.length;
  const smsParts = wordCount > 0 ? Math.max(1, Math.ceil(wordCount / 70)) : 0;
  const estimatedCount = receiverCount * smsParts;
  const requiredVariables = selectedTemplate?.variables?.map((item) => item.name) ?? [];
  const canSubmit = Boolean(taskName && applicationId && signatureId && templateId && receiverCount > 0 && (sendMode === 'now' || scheduledAt));

  function updateRecipient(id: string, phone: string) {
    setRecipients((items) => items.map((item) => (item.id === id ? { ...item, phone } : item)));
  }

  function addRecipient() {
    setRecipients((items) => [...items, { id: Date.now().toString(), phone: '' }]);
  }

  function removeRecipient(id: string) {
    setRecipients((items) => (items.length === 1 ? items : items.filter((item) => item.id !== id)));
  }

  function chooseTemplate(id: string) {
    const template = templates.find((item) => item.id === id);
    setTemplateId(id);
    setMessageContent(template?.content ?? '');
    setTemplatePickerOpen(false);
  }

  function submitTask() {
    if (!canSubmit) {
      return;
    }

    const submitRequest = receiverMode === 'manual'
      ? clientApi.createBatchTask({
        applicationId,
        templateId,
        content: previewText,
        category: selectedTemplate?.category ?? taskName,
        phones: validRecipients.map((item) => item.phone.trim()),
        sendMode: sendMode === 'now' ? 'immediate' : 'scheduled',
        scheduledAt: sendMode === 'scheduled' ? scheduledAt : undefined,
      })
      : clientApi.confirmImport({
        applicationId,
        templateId,
        content: previewText,
        category: selectedTemplate?.category ?? taskName,
        importContent,
        requiredVariables,
        sendMode: sendMode === 'now' ? 'immediate' : 'scheduled',
        scheduledAt: sendMode === 'scheduled' ? scheduledAt : undefined,
      });

    submitRequest
      .then((task) => {
        setSubmittedRecord(task);
        setError('');
      })
      .catch((reason: Error) => setError(reason.message || '发送任务提交失败'));
  }

  async function previewImportFile(file: File) {
    setImportLoading(true);
    setError('');
    try {
      const content = await file.text();
      const preview = await clientApi.previewImport({
        content,
        fileName: file.name,
        delimiter: file.name.endsWith('.tsv') ? '\t' : ',',
        requiredVariables,
      });
      setImportContent(content);
      setImportFileName(file.name);
      setImportFileUrl((current) => {
        if (current) {
          URL.revokeObjectURL(current);
        }
        return URL.createObjectURL(file);
      });
      setImportPreview(preview);
    } catch (reason) {
      setImportContent('');
      setImportFileName('');
      setImportFileUrl((current) => {
        if (current) {
          URL.revokeObjectURL(current);
        }
        return '';
      });
      setImportPreview(null);
      setError(reason instanceof Error ? reason.message : '导入预览失败');
    } finally {
      setImportLoading(false);
    }
  }

  return (
    <section className="sms-send-page">
      <div className="sms-send-title">
        <span className="sms-send-title__icon">
          <Send size={22} />
        </span>
        <h1>发送短信</h1>
        {submittedRecord ? <Tag tone="success">已提交任务 {submittedRecord.taskNo}</Tag> : null}
      </div>
      {error ? <p className="form-error">{error}</p> : null}

      <div className="sms-send-layout">
        <div className="sms-send-main">
          <section className="send-card">
            <div className="send-card__title">
              <span>1</span>
              <h2>基本信息</h2>
            </div>
            <Input
              label="任务名称"
              onChange={(event) => setTaskName(event.target.value)}
              placeholder="请输入任务名称，便于后续查找和管理"
              value={taskName}
            />
            <div className="send-form-row">
              <Select
                label="短信应用"
                onChange={(event) => setApplicationId(event.target.value)}
                options={[{ label: '选择应用', value: '' }, ...applications.map((item) => ({ label: item.name, value: item.id }))]}
                value={applicationId}
              />
              <Select
                label="短信签名"
                onChange={(event) => setSignatureId(event.target.value)}
                options={[
                  { label: '选择签名', value: '' },
                  ...signatures.map((item) => ({ label: item.name, value: item.id })),
                ]}
                value={signatureId}
              />
              <label className="ui-field">
                <span className="ui-field__label">短信模板</span>
                <button className="template-trigger" onClick={() => setTemplatePickerOpen(true)} type="button">
                  <span className={selectedTemplate ? '' : 'template-trigger__placeholder'}>
                    {selectedTemplate?.name ?? '选择模板'}
                  </span>
                  <FileText size={17} />
                </button>
              </label>
            </div>
          </section>

          <section className="send-card">
            <div className="send-card__title">
              <span>2</span>
              <h2>发送时间</h2>
            </div>
            <div className="radio-row">
              <label>
                <input checked={sendMode === 'now'} onChange={() => setSendMode('now')} type="radio" />
                <span>立即发送</span>
              </label>
              <label>
                <input checked={sendMode === 'scheduled'} onChange={() => setSendMode('scheduled')} type="radio" />
                <span>定时发送</span>
              </label>
              {sendMode === 'scheduled' ? (
                <DateTimeInput onChange={setScheduledAt} value={scheduledAt} />
              ) : null}
            </div>
          </section>

          <section className="send-card">
            <div className="send-card__title">
              <span>3</span>
              <h2>发送对象</h2>
            </div>
            <div className="receiver-tabs">
              <button
                className={receiverMode === 'manual' ? 'active' : ''}
                onClick={() => setReceiverMode('manual')}
                type="button"
              >
                手动输入
              </button>
              <button
                className={receiverMode === 'import' ? 'active' : ''}
                onClick={() => setReceiverMode('import')}
                type="button"
              >
                导入表格
              </button>
            </div>

            {receiverMode === 'manual' ? (
              <>
                <div className="receiver-table">
                  <div className="receiver-table__head">
                    <span>序号</span>
                    <span>手机号码</span>
                    <span>操作</span>
                  </div>
                  {recipients.map((item, index) => (
                    <div className="receiver-table__row" key={item.id}>
                      <span>{index + 1}</span>
                      <input
                        inputMode="tel"
                        onChange={(event) => updateRecipient(item.id, event.target.value)}
                        placeholder="请输入手机号"
                        value={item.phone}
                      />
                      <button
                        aria-label="删除接收人"
                        disabled={recipients.length === 1}
                        onClick={() => removeRecipient(item.id)}
                        type="button"
                      >
                        <Trash2 size={16} />
                      </button>
                    </div>
                  ))}
                </div>
                <button className="add-recipient" onClick={addRecipient} type="button">
                  <Plus size={16} />
                  添加接收人
                </button>
              </>
            ) : (
              <div className="import-panel">
                <div className="import-panel__icon">
                  <FileText size={26} />
                </div>
                <strong>导入表格</strong>
                <span>支持 CSV / TSV / TXT 文本文件。第一列为手机号，后续列名可对应模板变量。</span>
                <input
                  accept=".csv,.tsv,.txt,text/csv,text/plain"
                  id="sms-import-file"
                  onChange={(event) => {
                    const file = event.target.files?.[0];
                    if (file) {
                      void previewImportFile(file);
                    }
                    event.currentTarget.value = '';
                  }}
                  style={{ display: 'none' }}
                  type="file"
                />
                <Button disabled={importLoading || !templateId} onClick={() => document.getElementById('sms-import-file')?.click()} variant="ghost">
                  {importLoading ? '解析中...' : '选择文件'}
                </Button>
                {importFileName ? (
                  <span>
                    文件：{importFileName}
                    {importFileUrl ? (
                      <a className="file-action-link" download={importFileName} href={importFileUrl}>
                        <Download size={14} />
                        下载
                      </a>
                    ) : null}
                  </span>
                ) : null}
                {importPreview ? (
                  <div className="detail-grid">
                    <div><span>总行数</span><strong>{importPreview.totalRows}</strong></div>
                    <div><span>有效号码</span><strong>{importPreview.validCount}</strong></div>
                    <div><span>错误行</span><strong>{importPreview.errorCount}</strong></div>
                    <div><span>变量校验</span><strong>{requiredVariables.length ? requiredVariables.join(', ') : '无必填变量'}</strong></div>
                    {importPreview.errors.length ? (
                      <div className="detail-grid__wide">
                        <span>错误明细</span>
                        <strong>{importPreview.errors.slice(0, 5).map((item) => `第${item.rowNumber}行${item.phoneNumber ? ` ${item.phoneNumber}` : ''}：${item.reason}`).join('；')}</strong>
                      </div>
                    ) : null}
                  </div>
                ) : null}
              </div>
            )}

            <p className="send-tip">已添加 {receiverCount} 个接收号码</p>
          </section>

          <div className="send-submit-row">
            <Button disabled={!canSubmit} icon={<Send size={18} />} onClick={submitTask}>
              提交发送任务
            </Button>
          </div>
        </div>

        <aside className="sms-preview-card">
          <div className="preview-title">
            <FileText size={19} />
            <h2>短信预览</h2>
          </div>
          <div className="phone-preview">
            <div>{previewText}</div>
          </div>
          <Textarea
            label="模板内容"
            onChange={(event) => setMessageContent(event.target.value)}
            placeholder="选择模板后可在这里编辑模板内容和变量"
            rows={7}
            value={messageContent}
          />
          <div className="preview-stats">
            <div>
              <span>字数统计</span>
              <strong>{wordCount} 字</strong>
            </div>
            <div>
              <span>预计条数</span>
              <strong>{estimatedCount} 条</strong>
            </div>
            <div>
              <span>单价</span>
              <strong>¥0.05 / 人</strong>
            </div>
          </div>
          <div className="preview-note">短信按 70 字/条计费，超出部分按 67 字/条计算</div>
        </aside>
      </div>

      <Modal
        footer={<Button variant="ghost" onClick={() => setTemplatePickerOpen(false)}>关闭</Button>}
        onClose={() => setTemplatePickerOpen(false)}
        open={templatePickerOpen}
        title="选择短信模板"
      >
        <div className="template-picker">
          <Input
            prefix={<Search size={16} />}
            onChange={(event) => setTemplateKeyword(event.target.value)}
            placeholder="搜索模板名称或内容"
            value={templateKeyword}
          />
          <div className="template-picker__list">
            {filteredTemplates.map((template) => (
              <button
                className={template.id === templateId ? 'active' : ''}
                key={template.id}
                onClick={() => chooseTemplate(template.id)}
                type="button"
              >
                <span>
                  <strong>{template.name}</strong>
                  <small>{template.content}</small>
                </span>
                {template.id === templateId ? <Check size={18} /> : null}
              </button>
            ))}
          </div>
        </div>
      </Modal>
    </section>
  );
}