import { useEffect, useMemo, useState } from 'react';
import { Plus, Search, Trash2 } from 'lucide-react';
import { Breadcrumb, Button, Input, Modal, Select, Table, Tag, type TableColumn } from '@/components/ui';
import { adminApi, type DictionaryItem } from '@/api/adminApi';

type SensitiveWordItem = DictionaryItem & {
  word?: string;
  level?: string;
};

const levelLabelMap: Record<string, string> = {
  low: '低',
  medium: '中',
  high: '高',
  block: '拦截',
};

const levelToneMap: Record<string, 'success' | 'warning' | 'danger'> = {
  low: 'success',
  medium: 'warning',
  high: 'danger',
  block: 'danger',
};

const levelOptions = [
  { label: '低', value: 'low' },
  { label: '中', value: 'medium' },
  { label: '高', value: 'high' },
  { label: '拦截', value: 'block' },
];

export function AdminSensitiveWordsPage() {
  const [items, setItems] = useState<SensitiveWordItem[]>([]);
  const [keyword, setKeyword] = useState('');
  const [word, setWord] = useState('');
  const [level, setLevel] = useState('medium');
  const [modalOpen, setModalOpen] = useState(false);
  const [error, setError] = useState('');

  function loadData() {
    adminApi.listSensitiveWords({ keyword })
      .then((data) => {
        setItems(data as SensitiveWordItem[]);
        setError('');
      })
      .catch((failure: Error) => setError(failure.message || '敏感词加载失败'));
  }

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

  const filteredItems = useMemo(() => items.filter((item) => {
    const text = [item.word, item.level, item.status].join(' ');
    return !keyword || text.includes(keyword);
  }), [items, keyword]);

  const columns = useMemo<Array<TableColumn<SensitiveWordItem>>>(() => [
    { key: 'word', title: '敏感词', width: '180px', render: (record) => <strong>{record.word}</strong> },
    { key: 'level', title: '级别', width: '120px', render: (record) => <Tag tone={levelToneMap[record.level ?? 'medium'] ?? 'warning'}>{levelLabelMap[record.level ?? 'medium'] ?? record.level}</Tag> },
    { key: 'status', title: '状态', width: '120px', render: (record) => <Tag tone={record.status === 'active' ? 'success' : 'neutral'}>{record.status === 'active' ? '启用' : record.status === 'deleted' ? '已删除' : '停用'}</Tag> },
    { key: 'createdAt', title: '创建时间', width: '190px', render: (record) => record.createdAt ?? '-' },
    {
      key: 'actions',
      title: '操作',
      width: '130px',
      align: 'right',
      render: (record) => (
        <Button icon={<Trash2 size={15} />} onClick={() => adminApi.deleteSensitiveWord(record.id).then(loadData).catch((failure: Error) => setError(failure.message))} size="sm" variant="danger">
          删除
        </Button>
      ),
    },
  ], []);

  function addItem() {
    adminApi.createSensitiveWord({ word, level, status: 'active' })
      .then(() => {
        setWord('');
        setLevel('medium');
        setModalOpen(false);
        loadData();
      })
      .catch((failure: Error) => setError(failure.message || '添加敏感词失败'));
  }

  return (
    <section className="page-stack admin-security-page">
      <div className="page-heading">
        <div>
          <Breadcrumb items={['安全控制', '敏感词管理']} />
          <h1>敏感词管理</h1>
        </div>
        <Button icon={<Plus size={16} />} onClick={() => setModalOpen(true)}>添加敏感词</Button>
      </div>
      {error ? <p className="form-error">{error}</p> : null}

      <div className="surface admin-security-filter">
        <Input
          label="搜索"
          onChange={(event) => setKeyword(event.target.value)}
          placeholder="搜索敏感词、级别或状态"
          prefix={<Search size={16} />}
          value={keyword}
        />
        <div className="admin-security-filter__actions">
          <Button icon={<Search size={16} />} onClick={loadData}>查询</Button>
          <Button onClick={() => setKeyword('')} variant="ghost">重置</Button>
        </div>
      </div>

      <div className="surface admin-security-table-card">
        <Table columns={columns} data={filteredItems} emptyText="暂无敏感词记录" rowKey="id" />
      </div>

      <Modal
        footer={(
          <>
            <Button onClick={() => setModalOpen(false)} variant="ghost">取消</Button>
            <Button disabled={!word} onClick={addItem}>确认添加</Button>
          </>
        )}
        onClose={() => setModalOpen(false)}
        open={modalOpen}
        size="xl"
        title="添加敏感词"
      >
        <div className="admin-security-form">
          <Input label="敏感词" onChange={(event) => setWord(event.target.value)} placeholder="请输入敏感词" value={word} />
          <Select
            label="风险级别"
            onChange={(event) => setLevel(event.target.value)}
            options={levelOptions}
            value={level}
          />
        </div>
      </Modal>
    </section>
  );
}