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, Modal, Select, Table, Tag, Textarea, type TableColumn } from '@/components/ui';
import { formatCents } from '@/utils/currency';

type AdminCustomersPageProps = {
  basePath?: string;
};

type CustomerRow = TenantManagementRow;

type RechargeForm = {
  amount: string;
  operator: string;
  remark: string;
};

function ConfirmModal({ message, onCancel, onConfirm }: { message: string; onCancel: () => void; onConfirm: () => void }) {
  return (
    <Modal footer={<><Button onClick={onCancel} variant="ghost">取消</Button><Button onClick={onConfirm}>确认</Button></>} onClose={onCancel} open title="操作确认">
      <p className="admin-confirm-text">{message}</p>
    </Modal>
  );
}

function emptyRechargeForm(): RechargeForm {
  return {
    amount: '',
    operator: '运营',
    remark: '',
  };
}

export function AdminCustomersPage({ basePath = '/admin/customers' }: AdminCustomersPageProps) {
  const navigate = useNavigate();
  const [records, setRecords] = useState<CustomerRow[]>([]);
  const [queryId, setQueryId] = useState('');
  const [queryName, setQueryName] = useState('');
  const [queryStatus, setQueryStatus] = useState('all');
  const [filters, setFilters] = useState({ id: '', name: '', status: 'all' });
  const [confirmAction, setConfirmAction] = useState<{ type: 'toggle' | 'delete'; record: CustomerRow } | null>(null);
  const [rechargeTarget, setRechargeTarget] = useState<CustomerRow | null>(null);
  const [rechargeForm, setRechargeForm] = useState<RechargeForm>(emptyRechargeForm);
  const [rechargeError, setRechargeError] = useState('');
  const [recharging, setRecharging] = useState(false);
  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 matchId = filters.id ? record.id.includes(filters.id) : true;
    const matchName = filters.name ? record.name.includes(filters.name) : true;
    const matchStatus = filters.status === 'all' ? true : record.status === filters.status;
    return matchId && 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: 'id', title: '企业ID', width: '160px', render: (record) => <span className="table-mono-id">{record.id}</span> },
    { 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' : ''}>
            ¥{formatCents(balance)}
            {balance < 0 ? <Tag tone="danger" className="enterprise-inline-tag">欠费</Tag> : null}
          </span>
        );
      },
    },
    { key: 'overdraftLimit', title: '透支限额', width: '150px', align: 'right', render: (record) => `¥${formatCents(record.account?.creditCents ?? 0)}` },
    { key: 'todaySpend', title: '今日消费', width: '150px', align: 'right', render: (record) => `¥${formatCents(record.todaySpendCents)}` },
    { 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={() => setConfirmAction({ type: 'toggle', record })} size="sm" variant={record.status === 'active' ? 'warning' : 'success'}>
            {record.status === 'active' ? '禁用' : '启用'}
          </Button>
          <Button icon={<Trash2 size={15} />} onClick={() => setConfirmAction({ type: 'delete', record })} size="sm" variant="danger">删除</Button>
        </div>
      ),
    },
  ];

  function openRechargeModal(record: CustomerRow) {
    setRechargeTarget(record);
    setRechargeForm(emptyRechargeForm());
    setRechargeError('');
  }

  function updateRechargeForm<K extends keyof RechargeForm>(key: K, value: RechargeForm[K]) {
    setRechargeForm((current) => ({ ...current, [key]: value }));
    setRechargeError('');
  }

  async function submitRecharge() {
    if (!rechargeTarget) return;
    const amount = Number(rechargeForm.amount);
    if (!Number.isFinite(amount) || amount === 0) {
      setRechargeError('请填写非 0 的充值金额，支持负数冲正');
      return;
    }
    setRecharging(true);
    try {
      await adminApi.createManualRecharge({
        tenantId: rechargeTarget.id,
        amountCents: Math.round(amount * 100),
        smsUnits: 0,
        remark: [rechargeForm.operator, rechargeForm.remark].filter(Boolean).join(' / '),
      });
      setRechargeTarget(null);
      setRechargeForm(emptyRechargeForm());
      await loadData();
    } catch (failure) {
      setRechargeError(failure instanceof Error ? failure.message : '企业充值失败');
    } finally {
      setRecharging(false);
    }
  }

  function submitConfirmAction() {
    if (!confirmAction) return;
    const action = confirmAction.type === 'delete'
      ? adminApi.deleteTenant(confirmAction.record.id)
      : adminApi.changeTenantStatus(confirmAction.record.id, confirmAction.record.status === 'active' ? 'disabled' : 'active');
    action.then(() => {
      setConfirmAction(null);
      loadData();
    }).catch((failure: Error) => setError(failure.message || '企业状态更新失败'));
  }

  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>¥{formatCents(totalBalance)}</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="企业ID" onChange={(event) => setQueryId(event.target.value)} placeholder="请输入企业ID" value={queryId} />
          <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({ id: queryId, name: queryName, status: queryStatus })} variant="secondary">查询</Button>
            <Button onClick={() => { setQueryId(''); setQueryName(''); setQueryStatus('all'); setFilters({ id: '', name: '', status: 'all' }); }} variant="ghost">重置</Button>
          </div>
        </div>
      </div>

      <div className="surface section-stack">
        <div className="section-heading"><div><h2>企业列表</h2><p className="muted">数据来自租户、账户真实接口。</p></div><Tag tone="info">{filteredRecords.length} 条</Tag></div>
        <Table columns={columns} data={filteredRecords} emptyText="暂无企业" rowKey="id" />
      </div>

      {confirmAction ? (
        <ConfirmModal
          message={confirmAction.type === 'delete' ? `确认删除企业“${confirmAction.record.name}”吗？` : `确认${confirmAction.record.status === 'active' ? '禁用' : '启用'}企业“${confirmAction.record.name}”吗？`}
          onCancel={() => setConfirmAction(null)}
          onConfirm={submitConfirmAction}
        />
      ) : null}
      {rechargeTarget ? (
        <Modal
          footer={(
            <>
              <Button disabled={recharging} onClick={() => setRechargeTarget(null)} variant="ghost">取消</Button>
              <Button disabled={recharging} onClick={() => { void submitRecharge(); }}>{recharging ? '充值中...' : '确认充值'}</Button>
            </>
          )}
          onClose={() => setRechargeTarget(null)}
          open
          size="md"
          title="企业人工充值"
        >
          <div className="admin-system-modal-form">
            <Input disabled label="企业名称" value={rechargeTarget.name} />
            <Input disabled label="当前余额" prefix="¥" value={formatCents(rechargeTarget.account?.balanceCents ?? 0)} />
            <Input label="充值金额" onChange={(event) => updateRechargeForm('amount', event.target.value)} prefix="¥" required type="number" value={rechargeForm.amount} />
            <Input label="操作人" onChange={(event) => updateRechargeForm('operator', event.target.value)} value={rechargeForm.operator} />
            <Textarea className="admin-system-modal-form__wide" label="充值备注" onChange={(event) => updateRechargeForm('remark', event.target.value)} rows={4} value={rechargeForm.remark} />
          </div>
          {rechargeError ? <p className="form-error">{rechargeError}</p> : null}
        </Modal>
      ) : null}
    </section>
  );
}