import { useEffect, useState } from 'react';
import { Alert, Button, Field, Input, Select, Textarea } from '../components/ui.jsx';
import { Icon, PageTitle, Toolbar, Panel, ApiNotice, PageLoadingDialog, Modal, ConfirmDialog, SimpleTable } from '../components/layout.jsx';
import { enStatus, formatDate, zhStatus } from '../utils/formatters.js';
import { api, explainApiError } from '../api.js';

const emptyBusinessPrefixForm = { prefix: '', name: '', description: '', priority: 100, status: 'ENABLED' };

function normalizeBusinessPrefix(item) {
  return {
    id: item.id,
    prefix: item.prefix,
    name: item.name,
    description: item.description || '-',
    priority: item.priority ?? 100,
    status: zhStatus(item.status),
    gatewayCount: item.gatewayCount ?? 0,
    createdAt: formatDate(item.createdAt),
  };
}

export function BusinessPrefixesPage({ can = () => true }) {
  const [rows, setRows] = useState([]);
  const [filters, setFilters] = useState({ keyword: '', status: 'all' });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [message, setMessage] = useState('');
  const [editingPrefix, setEditingPrefix] = useState(undefined);
  const [prefixForm, setPrefixForm] = useState(emptyBusinessPrefixForm);
  const [statusTarget, setStatusTarget] = useState(null);
  const [deleteTarget, setDeleteTarget] = useState(null);
  const [submitting, setSubmitting] = useState(false);
  const canManage = can('customer_gateways.manage');

  const loadPrefixes = async () => {
    setLoading(true);
    setError('');
    try {
      const payload = await api.businessPrefixes(filters);
      setRows((Array.isArray(payload) ? payload : []).map(normalizeBusinessPrefix));
    } catch (loadError) {
      setError(explainApiError(loadError));
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void loadPrefixes();
  }, []);

  const openCreate = () => {
    setEditingPrefix(null);
    setPrefixForm(emptyBusinessPrefixForm);
    setError('');
    setMessage('');
  };

  const openEdit = (row) => {
    setEditingPrefix(row);
    setPrefixForm({
      prefix: row.prefix,
      name: row.name,
      description: row.description === '-' ? '' : row.description,
      priority: row.priority,
      status: enStatus(row.status),
    });
    setError('');
    setMessage('');
  };

  const closeForm = () => {
    setEditingPrefix(undefined);
    setPrefixForm(emptyBusinessPrefixForm);
    setSubmitting(false);
  };

  const submitPrefix = async (event) => {
    event.preventDefault();
    setSubmitting(true);
    setError('');
    try {
      const body = {
        prefix: prefixForm.prefix.trim(),
        name: prefixForm.name.trim(),
        description: prefixForm.description.trim() || null,
        priority: Number(prefixForm.priority),
        status: prefixForm.status,
      };
      if (editingPrefix) {
        await api.updateBusinessPrefix(editingPrefix.id, body);
        setMessage(`业务前缀「${body.prefix}」已更新。`);
      } else {
        await api.createBusinessPrefix(body);
        setMessage(`业务前缀「${body.prefix}」已创建。`);
      }
      closeForm();
      await loadPrefixes();
    } catch (submitError) {
      setError(explainApiError(submitError));
    } finally {
      setSubmitting(false);
    }
  };

  const toggleStatus = async (row) => {
    setSubmitting(true);
    setError('');
    try {
      if (row.status === '启用') {
        await api.disableBusinessPrefix(row.id);
      } else {
        await api.enableBusinessPrefix(row.id);
      }
      setStatusTarget(null);
      await loadPrefixes();
    } catch (toggleError) {
      setError(explainApiError(toggleError));
    } finally {
      setSubmitting(false);
    }
  };

  const deletePrefix = async (row) => {
    setSubmitting(true);
    setError('');
    try {
      await api.deleteBusinessPrefix(row.id);
      setDeleteTarget(null);
      await loadPrefixes();
    } catch (deleteError) {
      setError(explainApiError(deleteError));
    } finally {
      setSubmitting(false);
    }
  };

  const formOpen = editingPrefix !== undefined;

  return (
    <>
      <PageTitle
        title="业务前缀管理"
        desc="维护客户呼入被叫号码前置的业务标识，后续客户网关按 IP、主叫规则和业务前缀识别归属。"
        actions={canManage ? <Button icon={<Icon type="plus" />} onClick={openCreate}>新增业务前缀</Button> : null}
      />
      <ApiNotice loading={loading} error={error} onRetry={loadPrefixes} />
      <PageLoadingDialog loading={loading} />
      {message ? <Alert title="操作完成" tone="success">{message}</Alert> : null}
      <Panel
        title="业务前缀"
        className="wide-panel"
        aside={<Button size="sm" variant="outline" icon={<Icon type="reload" />} onClick={loadPrefixes}>刷新</Button>}
      >
        <Toolbar>
          <Field label="关键字">
            <Input value={filters.keyword} onChange={(event) => setFilters({ ...filters, keyword: event.target.value })} placeholder="前缀或名称" />
          </Field>
          <Field label="状态">
            <Select value={filters.status} onChange={(event) => setFilters({ ...filters, status: event.target.value })}>
              <option value="all">全部</option>
              <option value="ENABLED">启用</option>
              <option value="DISABLED">停用</option>
            </Select>
          </Field>
          <Button icon={<Icon type="search" />} onClick={loadPrefixes}>查询</Button>
        </Toolbar>
        <SimpleTable loading={loading} rows={rows} columns={[
          { key: 'prefix', label: '业务前缀', width: '120px' },
          { key: 'name', label: '名称', width: '160px' },
          { key: 'priority', label: '优先级', width: '90px' },
          { key: 'gatewayCount', label: '使用客户网关数', width: '140px' },
          { key: 'status', label: '状态', width: '90px', status: true },
          { key: 'description', label: '备注' },
          { key: 'createdAt', label: '创建日期', width: '120px' },
          {
            key: 'actions',
            label: '操作',
            width: '220px',
            render: (row) => (
              <div className="table-actions">
                {canManage ? <Button size="sm" variant="outline" onClick={() => openEdit(row)}>编辑</Button> : null}
                {canManage ? <Button size="sm" variant={row.status === '启用' ? 'ghost' : 'secondary'} onClick={() => setStatusTarget(row)}>{row.status === '启用' ? '禁用' : '启用'}</Button> : null}
                {canManage ? <Button size="sm" variant="danger" onClick={() => setDeleteTarget(row)}>删除</Button> : '-'}
              </div>
            ),
          },
        ]} />
      </Panel>
      {formOpen ? (
        <Modal title={editingPrefix ? '编辑业务前缀' : '新增业务前缀'} onClose={submitting ? () => {} : closeForm} size="sm">
          <form className="modal-form" onSubmit={submitPrefix}>
            <Field label={<span>业务前缀 <span className="required-star">*</span></span>}>
              <Input value={prefixForm.prefix} onChange={(event) => setPrefixForm({ ...prefixForm, prefix: event.target.value })} placeholder="如 671" required />
            </Field>
            <Field label={<span>名称 <span className="required-star">*</span></span>}>
              <Input value={prefixForm.name} onChange={(event) => setPrefixForm({ ...prefixForm, name: event.target.value })} placeholder="如 国内移动业务" required />
            </Field>
            <Field label="优先级">
              <Input type="number" min="1" max="9999" value={prefixForm.priority} onChange={(event) => setPrefixForm({ ...prefixForm, priority: event.target.value })} />
            </Field>
            <Field label="状态">
              <Select value={prefixForm.status} onChange={(event) => setPrefixForm({ ...prefixForm, status: event.target.value })}>
                <option value="ENABLED">启用</option>
                <option value="DISABLED">停用</option>
              </Select>
            </Field>
            <Field label="备注">
              <Textarea rows={3} value={prefixForm.description} onChange={(event) => setPrefixForm({ ...prefixForm, description: event.target.value })} />
            </Field>
            <div className="modal-actions">
              <Button type="button" variant="outline" disabled={submitting} onClick={closeForm}>取消</Button>
              <Button type="submit" disabled={submitting}>{submitting ? '保存中' : '保存'}</Button>
            </div>
          </form>
        </Modal>
      ) : null}
      {statusTarget ? (
        <ConfirmDialog
          title={`${statusTarget.status === '启用' ? '禁用' : '启用'}业务前缀确认`}
          confirmLabel={`确认${statusTarget.status === '启用' ? '禁用' : '启用'}`}
          busy={submitting}
          onCancel={() => setStatusTarget(null)}
          onConfirm={() => void toggleStatus(statusTarget)}
        >
          <p>确认{statusTarget.status === '启用' ? '禁用' : '启用'}业务前缀「{statusTarget.prefix}」吗？</p>
        </ConfirmDialog>
      ) : null}
      {deleteTarget ? (
        <ConfirmDialog
          title="删除业务前缀确认"
          confirmLabel="确认删除"
          confirmVariant="danger"
          busy={submitting}
          onCancel={() => setDeleteTarget(null)}
          onConfirm={() => void deletePrefix(deleteTarget)}
        >
          <p>确认删除业务前缀「{deleteTarget.prefix}」吗？删除后不能再被客户网关选择。</p>
        </ConfirmDialog>
      ) : null}
    </>
  );
}