import { useCallback, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import type { StoreBankAccountDto } from '@dukang/shared-types';
import { request } from '../lib/api';
import { useStoreSession } from '../contexts/StoreSessionContext';
import { useStorePageView } from '../lib/usePageView';

type FormState = {
  id?: string;
  bankAccountName: string;
  bankAccountNo: string;
  bankBranch: string;
};

const EMPTY_FORM: FormState = { bankAccountName: '', bankAccountNo: '', bankBranch: '' };

export default function BankAccountsPage() {
  useStorePageView('store_bank_accounts_view');
  const navigate = useNavigate();
  const { store } = useStoreSession();
  const isPrimary = !!store?.isPrimary;
  const [items, setItems] = useState<StoreBankAccountDto[]>([]);
  const [loading, setLoading] = useState(true);
  const [msg, setMsg] = useState('');
  const [form, setForm] = useState<FormState>(EMPTY_FORM);
  const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof FormState, string>>>({});
  const [submitting, setSubmitting] = useState(false);

  const load = useCallback(async () => {
    try {
      const res = await request<StoreBankAccountDto[]>('SHOP_H5', '/shop/store/bank-accounts');
      setItems(res ?? []);
    } catch (e) {
      setMsg(e instanceof Error ? e.message : '加载失败');
    } finally {
      setLoading(false);
    }
  }, []);

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

  function startCreate() {
    setForm(EMPTY_FORM);
    setFieldErrors({});
  }

  function startEdit(item: StoreBankAccountDto) {
    setForm({
      id: item.id,
      bankAccountName: item.bankAccountName,
      bankAccountNo: item.bankAccountNo,
      bankBranch: item.bankBranch ?? '',
    });
    setFieldErrors({});
  }

  async function submit() {
    const name = form.bankAccountName.trim();
    const no = form.bankAccountNo.replace(/\s+/g, '');
    const branch = form.bankBranch.trim();
    const next: Partial<Record<keyof FormState, string>> = {};
    if (!name) next.bankAccountName = '请填写收款人';
    if (!/^\d{8,32}$/.test(no)) next.bankAccountNo = '请填写 8～32 位数字账号';
    setFieldErrors(next);
    if (Object.keys(next).length) return;

    setSubmitting(true);
    setMsg('');
    try {
      const body = JSON.stringify({ bankAccountName: name, bankAccountNo: no, bankBranch: branch });
      if (form.id) {
        await request('SHOP_H5', `/shop/store/bank-accounts/${form.id}`, {
          method: 'PUT',
          body,
        });
      } else {
        await request('SHOP_H5', '/shop/store/bank-accounts', { method: 'POST', body });
      }
      setForm(EMPTY_FORM);
      await load();
    } catch (e) {
      setMsg(e instanceof Error ? e.message : '保存失败');
    } finally {
      setSubmitting(false);
    }
  }

  async function setDefault(id: string) {
    setMsg('');
    try {
      await request('SHOP_H5', `/shop/store/bank-accounts/${id}/default`, { method: 'POST' });
      await load();
    } catch (e) {
      setMsg(e instanceof Error ? e.message : '设置失败');
    }
  }

  async function remove(id: string) {
    setMsg('');
    try {
      await request('SHOP_H5', `/shop/store/bank-accounts/${id}`, { method: 'DELETE' });
      await load();
    } catch (e) {
      setMsg(e instanceof Error ? e.message : '删除失败');
    }
  }

  const editing = !!form.id;

  return (
    <div className="shop-records-page">
      <header className="shop-records-header" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <button
          type="button"
          className="shop-withdraw-back"
          onClick={() => navigate(-1)}
          aria-label="返回"
        >
          <span className="material-symbols-outlined" style={{ fontSize: 22 }}>arrow_back</span>
        </button>
        <h1 className="app-page-title" style={{ margin: 0 }}>收款账户</h1>
      </header>

      <div className="shop-records-main">
        <p
          className="shop-records-summary-note"
          style={{ marginBottom: 12 }}
        >
          用于总部打款，可维护多个账户；标记「默认」的账户用于提现打款，切换即时生效、无需重启。
        </p>

        {loading ? (
          <p className="shop-records-empty">加载中…</p>
        ) : items.length === 0 ? (
          <p className="shop-records-empty">暂无收款账户{isPrimary ? '，请新增' : ''}</p>
        ) : (
          <div className="shop-records-list">
            {items.map((it) => (
              <article key={it.id} className="shop-record-card">
                <div className="shop-record-card-top">
                  <div>
                    <div className="shop-record-order">
                      <span className="shop-record-time" style={{ margin: 0 }}>收款人</span>
                      <span>{it.bankAccountName}</span>
                      {it.isDefault ? (
                        <span className="shop-record-badge paid">默认</span>
                      ) : null}
                    </div>
                    <p className="shop-record-time">账号: {it.bankAccountNo}</p>
                    {it.bankBranch ? <p className="shop-record-time">开户行: {it.bankBranch}</p> : null}
                  </div>
                </div>
                {isPrimary ? (
                  <div className="shop-record-footer" style={{ display: 'flex', gap: 12 }}>
                    <button type="button" className="shop-records-chip" onClick={() => startEdit(it)}>
                      编辑
                    </button>
                    {!it.isDefault ? (
                      <button type="button" className="shop-records-chip" onClick={() => void setDefault(it.id)}>
                        设为默认
                      </button>
                    ) : null}
                    {!it.isDefault ? (
                      <button type="button" className="shop-records-chip" onClick={() => void remove(it.id)}>
                        删除
                      </button>
                    ) : null}
                  </div>
                ) : null}
              </article>
            ))}
          </div>
        )}

        {isPrimary ? (
          <section className="shop-records-summary" style={{ marginTop: 16 }}>
            <h3 className="shop-records-list-title">
              {editing ? '编辑账户' : '新增账户'}
            </h3>
            <div className="shop-mine-info-card">
              <label className="shop-record-amount-label">
                收款人 <span style={{ color: 'red' }}>*</span>
              </label>
              <input
                className="shop-withdraw-input"
                value={form.bankAccountName}
                maxLength={64}
                placeholder="户名 / 收款人姓名"
                onChange={(e) => setForm({ ...form, bankAccountName: e.target.value })}
              />
              {fieldErrors.bankAccountName ? (
                <p className="shop-withdraw-msg" role="alert">{fieldErrors.bankAccountName}</p>
              ) : null}

              <label className="shop-record-amount-label" style={{ marginTop: 12 }}>
                银行账号 <span style={{ color: 'red' }}>*</span>
              </label>
              <input
                className="shop-withdraw-input"
                inputMode="numeric"
                value={form.bankAccountNo}
                maxLength={32}
                placeholder="请输入银行账号"
                onChange={(e) => setForm({ ...form, bankAccountNo: e.target.value.replace(/[^\d]/g, '') })}
              />
              {fieldErrors.bankAccountNo ? (
                <p className="shop-withdraw-msg" role="alert">{fieldErrors.bankAccountNo}</p>
              ) : null}

              <label className="shop-record-amount-label" style={{ marginTop: 12 }}>
                开户行名称
              </label>
              <input
                className="shop-withdraw-input"
                value={form.bankBranch}
                maxLength={128}
                placeholder="如 中国工商银行郑州分行"
                onChange={(e) => setForm({ ...form, bankBranch: e.target.value })}
              />

              <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
                <button
                  type="button"
                  className="shop-withdraw-btn"
                  disabled={submitting}
                  onClick={() => void submit()}
                >
                  {submitting ? '保存中…' : '保存'}
                </button>
                {editing ? (
                  <button
                    type="button"
                    className="shop-records-chip"
                    onClick={startCreate}
                  >
                    取消编辑
                  </button>
                ) : null}
              </div>
            </div>
          </section>
        ) : (
          <p className="shop-records-empty">仅主账号可维护收款账户</p>
        )}

        {msg ? <p className="shop-withdraw-msg">{msg}</p> : null}
      </div>
    </div>
  );
}