import { useEffect, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Building2, DollarSign, Plus, Trash2, TrendingDown, TrendingUp } from 'lucide-react';
import { adminApi, type TenantManagementRow } from '@/api/adminApi';
import { Breadcrumb, Button, Input, ManualRechargeDialog, Modal, MoneyText, Select, Table, Tag, type TableColumn } from '@/components/ui';
import { formatCents } from '@/utils/currency';

type AdminCustomersPageProps = {
  basePath?: string;
};

type CustomerRow = TenantManagementRow;

function ConfirmModal({
  error,
  isSubmitting,
  message,
  onCancel,
  onConfirm,
  type,
}: {
  error: string;
  isSubmitting: boolean;
  message: string;
  onCancel: () => void;
  onConfirm: () => void;
  type: 'toggle' | 'delete';
}) {
  return (
    <Modal
      footer={<><Button disabled={isSubmitting} onClick={onCancel} variant="ghost">取消</Button><Button disabled={isSubmitting} onClick={onConfirm} variant={type === 'delete' ? 'danger' : 'primary'}>{isSubmitting ? '处理中...' : '确认'}</Button></>}
      onClose={() => { if (!isSubmitting) onCancel(); }}
      open
      title={type === 'delete' ? '删除企业' : '变更企业状态'}
    >
      <p className="admin-confirm-text">{message}</p>
      {error ? <p className="form-error" role="alert">{error}</p> : null}
    </Modal>
  );
}

export function AdminCustomersPage({ basePath = '/admin/customers' }: AdminCustomersPageProps) {
  const navigate = useNavigate();
  const [records, setRecords] = useState<CustomerRow[]>([]);
  const [queryName, setQueryName] = useState('');
  const [queryStatus, setQueryStatus] = useState('all');
  const [filters, setFilters] = useState({ name: '', status: 'all' });
  const [confirmAction, setConfirmAction] = useState<{ type: 'toggle' | 'delete'; record: CustomerRow } | null>(null);
  const [confirmError, setConfirmError] = useState('');
  const [confirming, setConfirming] = useState(false);
  const [rechargeTarget, setRechargeTarget] = useState<CustomerRow | null>(null);
  const [error, setError] = useState('');

  function loadData() {
    adminApi.listTenantManagementRows()
      .then((items) => {
        setRecords(items);
        setError('');
      })
      .catch((failure: Error) => setError(failure.message || '企业列表加载失败'));
  }

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

  const filteredRecords = useMemo(() => records.filter((record) => {
    const matchName = filters.name ? record.name.includes(filters.name) : true;
    const matchStatus = filters.status === 'all' ? true : record.status === filters.status;
    return matchName && matchStatus;
  }), [filters, records]);

  const activeCount = records.filter((record) => record.status === 'active').length;
  const disabledCount = records.filter((record) => record.status === 'disabled').length;
  const totalBalance = records.reduce((sum, record) => sum + (record.account?.balanceCents ?? 0), 0);

  const columns: Array<TableColumn<CustomerRow>> = [
    { key: 'name', title: '企业名称', width: '260px', render: (record) => <strong className="table-strong-text">{record.name}</strong> },
    {
      key: 'balance',
      title: '当前余额',
      width: '150px',
      align: 'right',
      render: (record) => {
        const balance = record.account?.balanceCents ?? 0;
        return (
          <span className={balance < 0 ? 'status-danger' : ''}>
            <MoneyText>¥{formatCents(balance)}</MoneyText>
            {balance < 0 ? <Tag tone="danger" className="enterprise-inline-tag">欠费</Tag> : null}
          </span>
        );
      },
    },
    { key: 'creditLimit', title: '授信额度', width: '150px', align: 'right', render: (record) => <MoneyText>¥{formatCents(record.account?.creditCents ?? 0)}</MoneyText> },
    { key: 'todaySpend', title: '今日消费', width: '150px', align: 'right', render: (record) => <MoneyText>¥{formatCents(record.todaySpendCents)}</MoneyText> },
    { key: 'todayRefund', title: '今日返还', width: '150px', align: 'right', render: (record) => <MoneyText>¥{formatCents(record.todayRefundCents)}</MoneyText> },
    { key: 'status', title: '企业状态', width: '130px', render: (record) => <Tag tone={record.status === 'active' ? 'success' : 'warning'}>{record.status === 'active' ? '正常' : '已禁用'}</Tag> },
    {
      key: 'actions',
      title: '操作',
      align: 'right',
      width: '300px',
      render: (record) => (
        <div className="table-actions">
          <Button icon={<DollarSign size={15} />} onClick={() => openRechargeModal(record)} size="sm" variant="ghost">充值</Button>
          <Button onClick={() => navigate(`${basePath}/${record.id}/edit`)} size="sm" variant="ghost">编辑</Button>
          <Button onClick={() => openConfirmAction({ type: 'toggle', record })} size="sm" variant={record.status === 'active' ? 'warning' : 'success'}>
            {record.status === 'active' ? '禁用' : '启用'}
          </Button>
          <Button icon={<Trash2 size={15} />} onClick={() => openConfirmAction({ type: 'delete', record })} size="sm" variant="danger">删除</Button>
        </div>
      ),
    },
  ];

  function openRechargeModal(record: CustomerRow) {
    setRechargeTarget(record);
  }

  function openConfirmAction(action: { type: 'toggle' | 'delete'; record: CustomerRow }) {
    setConfirmError('');
    setConfirmAction(action);
  }

  async function submitConfirmAction() {
    if (!confirmAction) return;
    setConfirming(true);
    setConfirmError('');
    try {
      if (confirmAction.type === 'delete') {
        await adminApi.deleteTenant(confirmAction.record.id);
      } else {
        await adminApi.changeTenantStatus(confirmAction.record.id, confirmAction.record.status === 'active' ? 'disabled' : 'active');
      }
    } catch (failure) {
      const detail = failure instanceof Error ? failure.message : '企业操作失败';
      setConfirmError(`${confirmAction.type === 'delete' ? '删除' : '状态变更'}失败：${detail}`);
      setConfirming(false);
      return;
    }
    setConfirmAction(null);
    try {
      await loadData();
    } catch (failure) {
      setError(failure instanceof Error ? failure.message : '企业列表刷新失败');
    } finally {
      setConfirming(false);
    }
  }

  return (
    <section className="page-stack">
      <div className="page-heading">
        <div><Breadcrumb items={['企业管理']} /></div>
        <Button icon={<Plus size={16} />} onClick={() => navigate(`${basePath}/new`)}>添加企业</Button>
      </div>
      {error ? <p className="form-error">{error}</p> : null}

      <div className="dashboard-grid enterprise-summary-grid">
        <div className="surface mini-status-card"><Building2 size={22} /><div><span>企业总数</span><strong>{records.length}</strong><small>真实租户数量。</small></div></div>
        <div className="surface mini-status-card"><TrendingUp size={22} /><div><span>正常运营</span><strong>{activeCount}</strong><small>可正常提交发送任务。</small></div></div>
        <div className="surface mini-status-card"><TrendingDown size={22} /><div><span>已禁用</span><strong>{disabledCount}</strong><small>已暂停发送能力。</small></div></div>
        <div className="surface mini-status-card"><DollarSign size={22} /><div><span>账户余额</span><strong><MoneyText>¥{formatCents(totalBalance)}</MoneyText></strong><small>企业账户余额汇总。</small></div></div>
      </div>

      <div className="surface ui-query-panel">
        <h2>查询条件</h2>
        <div className="ui-query-panel__grid enterprise-query-grid">
          <Input label="企业名称" onChange={(event) => setQueryName(event.target.value)} placeholder="请输入企业名称" value={queryName} />
          <Select label="企业状态" onChange={(event) => setQueryStatus(event.target.value)} options={[{ label: '全部状态', value: 'all' }, { label: '正常', value: 'active' }, { label: '禁用', value: 'disabled' }]} value={queryStatus} />
          <div className="enterprise-query-actions">
            <Button onClick={() => setFilters({ name: queryName, status: queryStatus })} variant="secondary">查询</Button>
            <Button onClick={() => { setQueryName(''); setQueryStatus('all'); setFilters({ name: '', status: 'all' }); }} variant="ghost">重置</Button>
          </div>
        </div>
      </div>

      <div className="surface section-stack">
        <div className="section-heading"><div><h2>企业列表</h2></div><Tag tone="info">{filteredRecords.length} 条</Tag></div>
        <Table columns={columns} data={filteredRecords} emptyText="暂无企业" rowKey="id" />
      </div>

      {confirmAction ? (
        <ConfirmModal
          error={confirmError}
          isSubmitting={confirming}
          message={confirmAction.type === 'delete' ? `确认删除企业“${confirmAction.record.name}”吗？` : `确认${confirmAction.record.status === 'active' ? '禁用' : '启用'}企业“${confirmAction.record.name}”吗？`}
          onCancel={() => { setConfirmAction(null); setConfirmError(''); }}
          onConfirm={() => void submitConfirmAction()}
          type={confirmAction.type}
        />
      ) : null}
      <ManualRechargeDialog
        initialTargetId={rechargeTarget?.id}
        lockTarget
        onClose={() => setRechargeTarget(null)}
        onCompleted={loadData}
        open={Boolean(rechargeTarget)}
        targets={rechargeTarget ? [{
          id: rechargeTarget.id,
          name: rechargeTarget.name,
          code: rechargeTarget.code,
          balanceCents: rechargeTarget.account?.balanceCents ?? 0,
        }] : []}
      />
    </section>
  );
}