import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { STORE_STAFF_ROLE_LABELS, type StoreStaffRole } from '@dukang/shared-types';
import { useStoreSession } from '../contexts/StoreSessionContext';
import { getStoreProfile, request } from '../lib/api';

type StaffItem = {
  id: string;
  name: string;
  phone: string;
  staffRole: StoreStaffRole;
  status: string;
  storeIds: string[];
  stores: Array<{ storeId: string; name: string }>;
};

type StoreOption = { storeId: string; name: string };

function maskPhone(phone: string) {
  if (!phone || phone.length < 7) return phone;
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}

export default function StaffPage() {
  const navigate = useNavigate();
  const { store } = useStoreSession();
  const profile = store ?? getStoreProfile();
  const [list, setList] = useState<StaffItem[]>([]);
  const [ownedStores, setOwnedStores] = useState<StoreOption[]>([]);
  const [msg, setMsg] = useState('');
  const [showForm, setShowForm] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [form, setForm] = useState({ phone: '', name: '', storeIds: [] as string[] });

  async function reload() {
    const [staff, stores] = await Promise.all([
      request<StaffItem[]>('SHOP_H5', '/shop/staff'),
      request<StoreOption[]>('SHOP_H5', '/shop/auth/stores'),
    ]);
    setList(staff);
    setOwnedStores(stores);
  }

  useEffect(() => {
    if (!profile?.isPrimary) {
      navigate('/mine', { replace: true });
      return;
    }
    void reload().catch((e) => setMsg(e instanceof Error ? e.message : '加载失败'));
  }, [navigate, profile?.isPrimary]);

  async function createStaff() {
    const phone = form.phone.trim();
    const name = form.name.trim();
    if (!/^1[3-9]\d{9}$/.test(phone)) {
      setMsg('请输入正确的手机号');
      return;
    }
    if (!name) {
      setMsg('请填写姓名');
      return;
    }
    setMsg('');
    setSubmitting(true);
    try {
      await request('SHOP_H5', '/shop/staff', {
        method: 'POST',
        body: JSON.stringify({
          phone,
          name,
          storeIds: form.storeIds.length ? form.storeIds : ownedStores.map((s) => s.storeId),
        }),
      });
      setShowForm(false);
      setForm({ phone: '', name: '', storeIds: [] });
      await reload();
    } catch (e) {
      setMsg(e instanceof Error ? e.message : '创建失败');
    } finally {
      setSubmitting(false);
    }
  }

  async function toggleStatus(item: StaffItem) {
    const next = item.status === 'ACTIVE' ? 'DISABLED' : 'ACTIVE';
    try {
      await request('SHOP_H5', `/shop/staff/${item.id}`, {
        method: 'PUT',
        body: JSON.stringify({ status: next }),
      });
      await reload();
    } catch (e) {
      setMsg(e instanceof Error ? e.message : '更新失败');
    }
  }

  function toggleStoreId(storeId: string) {
    setForm((prev) => {
      const allIds = ownedStores.map((s) => s.storeId);
      // 空数组表示「全部」；取消某一家时转为「除该店外的全部」
      if (prev.storeIds.length === 0) {
        return { ...prev, storeIds: allIds.filter((id) => id !== storeId) };
      }
      const next = prev.storeIds.includes(storeId)
        ? prev.storeIds.filter((id) => id !== storeId)
        : [...prev.storeIds, storeId];
      // 又选回全部时，恢复默认空数组语义
      if (next.length === allIds.length) {
        return { ...prev, storeIds: [] };
      }
      return { ...prev, storeIds: next };
    });
  }

  const selectedCount =
    form.storeIds.length === 0 ? ownedStores.length : form.storeIds.length;

  return (
    <div className="shop-staff-page">
      <header className="shop-subpage-header">
        <button
          type="button"
          className="shop-subpage-back"
          onClick={() => {
            if (showForm) {
              setShowForm(false);
              setMsg('');
              return;
            }
            navigate('/mine');
          }}
          aria-label="返回"
        >
          <span className="material-symbols-outlined">arrow_back</span>
        </button>
        <h1 className="app-page-title">{showForm ? '添加子账号' : '子账号管理'}</h1>
        {!showForm ? (
          <button
            type="button"
            className="shop-subpage-header-action"
            onClick={() => {
              setShowForm(true);
              setMsg('');
            }}
          >
            <span className="material-symbols-outlined">person_add</span>
            添加
          </button>
        ) : (
          <span className="shop-subpage-header-spacer" />
        )}
      </header>

      <div className="shop-subpage-content">
        {!showForm ? (
          <section className="shop-subpage-hero shop-subpage-hero--compact">
            <div className="shop-subpage-hero-icon">
              <span className="material-symbols-outlined shop-fill-icon">group</span>
            </div>
            <div>
              <h2 className="shop-subpage-hero-title">门店员工子账号</h2>
              <p className="shop-subpage-hero-desc">
                共 {list.length} 人 · 可授权员工用手机号登录门店端进行核销
              </p>
            </div>
          </section>
        ) : null}

        {msg ? (
          <p className="shop-subpage-msg" role="alert">
            {msg}
          </p>
        ) : null}

        {showForm ? (
          <section className="shop-staff-form-card">
            <div className="shop-staff-form-field">
              <label className="shop-staff-form-label" htmlFor="staff-phone">
                手机号
              </label>
              <div className="shop-staff-form-input-wrap">
                <span className="material-symbols-outlined">smartphone</span>
                <input
                  id="staff-phone"
                  type="tel"
                  inputMode="numeric"
                  maxLength={11}
                  placeholder="员工登录手机号"
                  value={form.phone}
                  onChange={(e) =>
                    setForm((f) => ({ ...f, phone: e.target.value.replace(/\D/g, '').slice(0, 11) }))
                  }
                />
              </div>
            </div>

            <div className="shop-staff-form-field">
              <label className="shop-staff-form-label" htmlFor="staff-name">
                姓名
              </label>
              <div className="shop-staff-form-input-wrap">
                <span className="material-symbols-outlined">badge</span>
                <input
                  id="staff-name"
                  type="text"
                  placeholder="员工姓名"
                  value={form.name}
                  onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
                />
              </div>
            </div>

            <div className="shop-staff-form-field">
              <p className="shop-staff-form-label">
                绑定门店
                <span className="shop-staff-form-hint">
                  {form.storeIds.length === 0
                    ? `（默认全部 ${ownedStores.length} 家）`
                    : `（已选 ${selectedCount} 家）`}
                </span>
              </p>
              <div className="shop-staff-store-picks">
                {ownedStores.map((s) => {
                  const checked =
                    form.storeIds.length === 0 || form.storeIds.includes(s.storeId);
                  return (
                    <label
                      key={s.storeId}
                      className={`shop-staff-store-pick${checked ? ' is-checked' : ''}`}
                    >
                      <input
                        type="checkbox"
                        checked={checked}
                        onChange={() => toggleStoreId(s.storeId)}
                      />
                      <span className="material-symbols-outlined shop-fill-icon">storefront</span>
                      <span className="shop-staff-store-pick-name">{s.name}</span>
                      {checked ? (
                        <span className="material-symbols-outlined shop-staff-store-pick-check">
                          check_circle
                        </span>
                      ) : null}
                    </label>
                  );
                })}
              </div>
            </div>

            <button
              type="button"
              className="shop-staff-submit"
              disabled={submitting}
              onClick={() => void createStaff()}
            >
              {submitting ? '创建中…' : '创建子账号'}
            </button>
            <button
              type="button"
              className="shop-staff-cancel"
              disabled={submitting}
              onClick={() => {
                setShowForm(false);
                setMsg('');
              }}
            >
              取消
            </button>
          </section>
        ) : (
          <section>
            <div className="shop-home-records-head">
              <h3 className="shop-home-records-title">账号列表</h3>
            </div>
            <ul className="shop-staff-list">
              {list.map((item) => {
                const active = item.status === 'ACTIVE';
                const initial = (item.name || item.phone || '?').slice(0, 1);
                return (
                  <li key={item.id} className="shop-staff-item">
                    <div className="shop-staff-avatar">{initial}</div>
                    <div className="shop-staff-item-body">
                      <div className="shop-staff-item-top">
                        <strong>{item.name || '未命名'}</strong>
                        <span
                          className={`shop-staff-status-badge${active ? ' is-active' : ' is-disabled'}`}
                        >
                          {active ? '启用' : '停用'}
                        </span>
                      </div>
                      <p className="shop-staff-item-meta">{maskPhone(item.phone)}</p>
                      <p className="shop-staff-item-meta">
                        {STORE_STAFF_ROLE_LABELS[item.staffRole] ?? item.staffRole}
                        {item.stores.length
                          ? ` · ${item.stores.map((s) => s.name).join('、')}`
                          : ''}
                      </p>
                    </div>
                    <button
                      type="button"
                      className={`shop-staff-toggle${active ? '' : ' is-enable'}`}
                      onClick={() => void toggleStatus(item)}
                    >
                      {active ? '停用' : '启用'}
                    </button>
                  </li>
                );
              })}
            </ul>
            {!list.length ? (
              <div className="shop-subpage-empty">
                <span className="material-symbols-outlined">person_off</span>
                <p>暂无子账号</p>
                <button
                  type="button"
                  className="shop-staff-empty-add"
                  onClick={() => setShowForm(true)}
                >
                  添加第一个子账号
                </button>
              </div>
            ) : null}
          </section>
        )}
      </div>
    </div>
  );
}