import { useEffect, useMemo, useState } from 'react';
import { Download, Eye, FileUp, Search } from 'lucide-react';
import { adminApi, type FileObject, type FileRef, type ReportTask } from '@/api/adminApi';
import { Breadcrumb, Button, DateRangeInput, FileActions, Input, Modal, Select, Table, Tag, Textarea, type DateRangeValue, type TableColumn } from '@/components/ui';

const statusMeta: Record<string, { label: string; tone: 'neutral' | 'info' | 'success' | 'warning' | 'danger' }> = {
  pending: { label: '待处理', tone: 'neutral' },
  ready: { label: '待导出', tone: 'info' },
  exported: { label: '已导出', tone: 'warning' },
  reporting: { label: '报备中', tone: 'warning' },
  partial: { label: '部分完成', tone: 'info' },
  completed: { label: '已完成', tone: 'success' },
  failed: { label: '有失败', tone: 'danger' },
};

type ReceiptImportPayload = {
  delimiter: ',' | '\t';
  fileContent: string;
  fileName: string;
  fileObjectId: string;
  remark: string;
};

function ReceiptImportModal({ onClose, onSubmit, task }: { onClose: () => void; onSubmit: (payload: ReceiptImportPayload) => void; task: ReportTask }) {
  const [file, setFile] = useState<File | null>(null);
  const [fileObject, setFileObject] = useState<FileObject | null>(null);
  const [uploading, setUploading] = useState(false);
  const [remark, setRemark] = useState('');
  const [error, setError] = useState('');
  const fileRef: FileRef | null = fileObject
    ? { contentType: fileObject.contentType, fileName: fileObject.fileName, fileObjectId: fileObject.id }
    : null;

  async function uploadReceiptFile(nextFile: File | undefined) {
    setFile(nextFile ?? null);
    setFileObject(null);
    setError('');
    if (!nextFile) {
      return;
    }
    setUploading(true);
    try {
      const uploaded = await adminApi.uploadFileObject(nextFile, { purpose: 'report_receipt', prefix: `report-receipts/${task.id}` });
      setFileObject(uploaded);
    } catch (failure) {
      setError(failure instanceof Error ? failure.message : '报备回执上传失败');
    } finally {
      setUploading(false);
    }
  }

  async function submitImport() {
    if (!file || !fileObject) {
      return;
    }
    const delimiter: ',' | '\t' = file.name.toLowerCase().endsWith('.tsv') ? '\t' : ',';
    onSubmit({
      delimiter,
      fileContent: await file.text(),
      fileName: file.name,
      fileObjectId: fileObject.id,
      remark,
    });
  }

  return (
    <Modal
      footer={<><Button onClick={onClose} variant="ghost">取消</Button><Button disabled={!fileObject || uploading} onClick={() => { void submitImport(); }}>{uploading ? '上传中...' : '确认导入'}</Button></>}
      onClose={onClose}
      open
      size="xl"
      title={<div className="template-modal-title"><h2>导入报备回执</h2><p>上传运营商回执并记录状态。</p></div>}
    >
      <div className="report-receipt-modal">
        <label className="report-upload-drop">
          <FileUp size={38} />
          <strong>{file?.name || '选择回执文件'}</strong>
          <span>支持 CSV、TSV、TXT 文本回执，需包含状态/结果列。</span>
          <FileActions file={fileRef} />
          <input
            accept=".csv,.tsv,.txt,text/csv,text/plain"
            onChange={(event) => { void uploadReceiptFile(event.target.files?.[0]); }}
            style={{ display: 'none' }}
            type="file"
          />
        </label>
        {error ? <p className="form-error">{error}</p> : null}
        <Textarea label="导入备注" onChange={(event) => setRemark(event.target.value)} placeholder="记录回执来源、运营商工单号或人工处理说明" rows={4} value={remark} />
      </div>
    </Modal>
  );
}

function TaskDetailModal({ task, onClose }: { task: ReportTask; onClose: () => void }) {
  const status = statusMeta[task.status] ?? { label: task.status, tone: 'info' as const };
  return (
    <Modal footer={<Button onClick={onClose}>关闭</Button>} onClose={onClose} open size="xl" title={<div className="template-modal-title"><h2>报备任务详情</h2><p>{task.id}</p></div>}>
      <div className="admin-task-detail report-task-detail">
        <div className="admin-task-metrics">
          <div className="admin-task-metric"><span>签名</span><strong>{task.signature?.name ?? task.signatureId}</strong></div>
          <div className="admin-task-metric admin-task-metric--primary"><span>通道</span><strong>{task.channel?.name ?? task.channelId}</strong></div>
          <div className="admin-task-metric admin-task-metric--success"><span>当前状态</span><strong>{status.label}</strong></div>
        </div>
      </div>
    </Modal>
  );
}

export function AdminReportTasksPage() {
  const [tasks, setTasks] = useState<ReportTask[]>([]);
  const [keyword, setKeyword] = useState('');
  const [dateRange, setDateRange] = useState<DateRangeValue>({});
  const [receiptTask, setReceiptTask] = useState<ReportTask | null>(null);
  const [detailTask, setDetailTask] = useState<ReportTask | null>(null);
  const [statusTask, setStatusTask] = useState<ReportTask | null>(null);
  const [nextStatus, setNextStatus] = useState('approved');
  const [statusReason, setStatusReason] = useState('');
  const [error, setError] = useState('');

  function loadData() {
    adminApi.listReportTasks()
      .then((items) => {
        setTasks(items);
        setError('');
      })
      .catch((failure: Error) => setError(failure.message || '报备任务加载失败'));
  }

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

  const filteredTasks = useMemo(() => tasks.filter((task) => {
    const text = `${task.id}${task.channel?.name ?? task.channelId}${task.signature?.name ?? task.signatureId}`;
    const date = task.createdAt?.slice(0, 10) ?? '';
    return (!keyword || text.includes(keyword))
      && (!dateRange.start || date >= dateRange.start)
      && (!dateRange.end || date <= dateRange.end);
  }), [dateRange.end, dateRange.start, keyword, tasks]);

  function exportTask(task: ReportTask) {
    adminApi.createReportExport(task.id, { fileName: `${task.id}.xlsx`, rowCount: 0 })
      .then(loadData)
      .catch((failure: Error) => setError(failure.message || '报备任务导出失败'));
  }

  function importReceipt(payload: ReceiptImportPayload) {
    if (!receiptTask) return;
    adminApi.importReportReceipt(receiptTask.id, {
      delimiter: payload.delimiter,
      fileContent: payload.fileContent,
      fileName: payload.fileName,
      fileObjectId: payload.fileObjectId,
      reason: payload.remark,
    })
      .then(() => {
        setReceiptTask(null);
        loadData();
      })
      .catch((failure: Error) => setError(failure.message || '报备回执导入失败'));
  }

  function saveTaskStatus() {
    if (!statusTask) return;
    adminApi.changeReportTaskStatuses({ items: [{ signatureId: statusTask.signatureId, channelId: statusTask.channelId, status: nextStatus }], reason: statusReason })
      .then(() => { setStatusTask(null); setStatusReason(''); loadData(); })
      .catch((failure: Error) => setError(failure.message || '报备状态保存失败'));
  }

  const columns: Array<TableColumn<ReportTask>> = [
    { key: 'id', title: '任务编号', width: '190px', render: (record) => <strong className="admin-task-id">{record.id}</strong> },
    { key: 'scope', title: '通道/签名', width: '280px', render: (record) => <div className="admin-task-enterprise"><strong>{record.channel?.name ?? record.channelId}</strong><span>{record.signature?.name ?? record.signatureId}</span></div> },
    { key: 'status', title: '状态', width: '130px', render: (record) => <Tag tone={(statusMeta[record.status] ?? { tone: 'info' as const }).tone}>{(statusMeta[record.status] ?? { label: record.status }).label}</Tag> },
    { key: 'time', title: '创建时间', width: '190px', render: (record) => record.createdAt ?? '-' },
    {
      key: 'actions',
      title: '操作',
      align: 'right',
      width: '240px',
      render: (record) => (
        <div className="admin-task-actions">
          <Button icon={<Eye size={14} />} onClick={() => setDetailTask(record)} size="sm" variant="ghost">详情</Button>
          <Button onClick={() => { setStatusTask(record); setNextStatus(record.status); }} size="sm" variant="ghost">修改状态</Button>
          <Button icon={<Download size={14} />} onClick={() => exportTask(record)} size="sm" variant="ghost">生成同范围任务</Button>
          <Button icon={<FileUp size={14} />} onClick={() => setReceiptTask(record)} size="sm" variant="ghost">导入回执</Button>
        </div>
      ),
    },
  ];

  return (
    <section className="page-stack admin-sms-task-page report-task-page">
      <div className="page-heading">
        <div>
          <Breadcrumb items={['报备任务', '签名通道报备']} />
          <h1>签名通道报备任务</h1>
        </div>
      </div>
      {error ? <p className="form-error">{error}</p> : null}

      <div className="surface admin-task-filter">
        <Input label="任务/通道/签名" onChange={(event) => setKeyword(event.target.value)} placeholder="请输入关键字" value={keyword} />
        <DateRangeInput label="创建时间" onChange={setDateRange} value={dateRange} />
        <div className="admin-task-filter__actions">
          <Button icon={<Search size={16} />} onClick={loadData}>查询</Button>
          <Button onClick={() => { setKeyword(''); setDateRange({}); }} variant="ghost">重置</Button>
        </div>
      </div>

      <div className="surface admin-task-table-card report-task-table-card">
        <Table columns={columns} data={filteredTasks} emptyText="暂无报备任务" rowKey="id" />
      </div>

      {receiptTask ? <ReceiptImportModal onClose={() => setReceiptTask(null)} onSubmit={importReceipt} task={receiptTask} /> : null}
      {detailTask ? <TaskDetailModal onClose={() => setDetailTask(null)} task={detailTask} /> : null}
      <Modal footer={<><Button onClick={() => setStatusTask(null)} variant="ghost">取消</Button><Button onClick={saveTaskStatus}>保存</Button></>} onClose={() => setStatusTask(null)} open={Boolean(statusTask)} title="人工修正报备任务状态"><div className="admin-system-modal-form"><Select label="报备状态" onChange={(event) => setNextStatus(event.target.value)} options={[{label:'未报备',value:'pending'},{label:'资料待补充',value:'waiting_material'},{label:'报备中',value:'reporting'},{label:'报备通过',value:'approved'},{label:'报备失败',value:'failed'},{label:'放弃报备',value:'abandoned'}]} value={nextStatus}/><Textarea label="修改原因" onChange={(event) => setStatusReason(event.target.value)} rows={3} value={statusReason}/></div></Modal>
    </section>
  );
}