import { useEffect, useMemo, useState } from 'react';
import { Search, X } from 'lucide-react';
import { Breadcrumb, Button, Input, RiskAction, Select, Table, Tag, type TableColumn } from '@/components/ui';
import { adminApi, type SmsTemplateAudit } from '@/api/adminApi';
import { formatDateTime } from '@/utils/dateTime';

const auditStatusLabelMap: Record<string, string> = {
  pending: '待审核',
  approved: '已通过',
  rejected: '已驳回',
  draft: '草稿',
};

const statusOptions = [
  { label: '全部状态', value: 'all' },
  { label: '待审核', value: 'pending' },
  { label: '已通过', value: 'approved' },
  { label: '已驳回', value: 'rejected' },
];

export function AdminTemplateAuditPage() {
  const [audits, setAudits] = useState<SmsTemplateAudit[]>([]);
  const [keyword, setKeyword] = useState('');
  const [status, setStatus] = useState('all');

  useEffect(() => {
    adminApi.listTemplateAudits({ keyword, status })
      .then(setAudits)
      .catch(() => setAudits([]));
  }, [keyword, status]);

  async function rejectTemplate(id: string) {
    const updated = await adminApi.rejectTemplate(id);
    setAudits((items) => items.map((item) => (item.id === id ? updated : item)));
  }

  const columns = useMemo<Array<TableColumn<SmsTemplateAudit>>>(
    () => [
      { key: 'customer', title: '客户', render: (record) => record.tenant?.name ?? record.tenantId },
      { key: 'application', title: '短信应用', render: (record) => record.application?.name ?? record.applicationId },
      { key: 'content', title: '短信模板内容', render: (record) => record.content },
      { key: 'submittedAt', title: '提交时间', render: (record) => formatDateTime(record.createdAt) },
      {
        key: 'status',
        title: '状态',
        render: (record) => (
          <Tag tone={record.auditStatus === 'approved' ? 'success' : record.auditStatus === 'rejected' ? 'danger' : 'info'}>
            {auditStatusLabelMap[record.auditStatus] ?? record.auditStatus}
          </Tag>
        ),
      },
      {
        key: 'actions',
        title: '操作',
        align: 'right',
        render: (record) => (
          <div className="table-actions">
            <RiskAction disabled={record.auditStatus !== 'pending'} onCompleted={() => adminApi.listTemplateAudits({ keyword, status }).then(setAudits)} targetId={record.id} targetType="template" />
            <Button
              disabled={record.auditStatus !== 'pending'}
              icon={<X size={15} />}
              onClick={() => void rejectTemplate(record.id)}
              size="sm"
              variant="danger"
            >
              驳回
            </Button>
          </div>
        ),
      },
    ],
    [keyword, status],
  );
  const templateAudits = audits;

  return (
    <section className="page-stack admin-template-audit-page">
      <div className="page-heading">
        <div>
          <Breadcrumb items={['短信模板审核']} />
        </div>
      </div>
      <div className="surface audit-filter-card">
        <div className="audit-filter-grid audit-filter-grid--template">
          <Input label="搜索" onChange={(event) => setKeyword(event.target.value)} placeholder="搜索客户、应用或模板内容" value={keyword} />
          <Select label="审核状态" onChange={(event) => setStatus(event.target.value)} options={statusOptions} value={status} />
          <div className="audit-filter-actions">
            <Button icon={<Search size={17} />}>查询</Button>
            <Button onClick={() => { setKeyword(''); setStatus('all'); }} variant="ghost">重置</Button>
          </div>
        </div>
      </div>
      <div className="surface">
        <Table columns={columns} data={templateAudits} rowKey="id" />
      </div>
    </section>
  );
}