import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import AppImage from '@dukang/shared-ui/AppImage';
import { request } from '../lib/api';
import { toastError, toastSuccess } from '../lib/toast';
import { usePartnerSession } from '../contexts/PartnerSessionContext';
import { canManagePartnerStore } from '../lib/partnerAccess';
import { MIN_ENV_PHOTO_COUNT, normalizeStringArray } from '../lib/storeDraft';
import OssUploadField from '../components/OssUploadField';
import MultiOssUploadField from '../components/MultiOssUploadField';
import TencentLocPickerOverlay from '../components/TencentLocPickerOverlay';
import {
  canPartnerOpenStore,
  storeAuditLabel,
  storeAuditPillClass,
  storeStatusLabel,
  storeStatusPillClass,
  type StoreStatusValue,
} from '../lib/storeStatus';
import { usePartnerPageView } from '../lib/usePageView';

const STATUS_OPTIONS: StoreStatusValue[] = ['OPEN', 'PAUSED', 'CLOSED'];

function uniqueEnvUrls(urls: string[]): string[] {
  const seen = new Set<string>();
  const out: string[] = [];
  for (const raw of urls) {
    const url = raw.trim();
    if (!url || seen.has(url)) continue;
    seen.add(url);
    out.push(url);
  }
  return out;
}

export default function StoreDetailPage() {
  const { id } = useParams();
  usePartnerPageView('partner_store_detail_view', id ? { storeId: id } : undefined);
  const navigate = useNavigate();
  const { account } = usePartnerSession();
  const canMutate = canManagePartnerStore(account);
  const [store, setStore] = useState<Record<string, unknown> | null>(null);
  const [loadError, setLoadError] = useState('');
  const [form, setForm] = useState({
    name: '',
    loginPhone: '',
    contactPhone: '',
    address: '',
    intro: '',
    benefitUsageRule: '',
    latitude: '',
    longitude: '',
  });
  const [coverUrl, setCoverUrl] = useState('');
  const [envPhotoUrls, setEnvPhotoUrls] = useState<string[]>(['', '', '']);
  const [status, setStatus] = useState<StoreStatusValue>('OPEN');
  const [statusSaving, setStatusSaving] = useState(false);
  const [saving, setSaving] = useState(false);
  const [mediaSaving, setMediaSaving] = useState(false);
  const [mapPickerOpen, setMapPickerOpen] = useState(false);
  const [actionError, setActionError] = useState('');
  const [closeConfirmOpen, setCloseConfirmOpen] = useState(false);

  function applyStore(data: Record<string, unknown>) {
    setStore(data);
    setForm({
      name: String(data.name || ''),
      loginPhone: String(data.phone || ''),
      contactPhone: String(data.contactPhone || data.phone || ''),
      address: String(data.address || ''),
      intro: String(data.intro || ''),
      benefitUsageRule: (() => {
        const raw = String(data.benefitUsageRule || '').trim();
        return raw && !/^null$/i.test(raw) ? raw : '';
      })(),
      latitude: data.latitude != null && data.latitude !== '' ? String(data.latitude) : '',
      longitude: data.longitude != null && data.longitude !== '' ? String(data.longitude) : '',
    });
    setStatus(String(data.status || 'OPEN').toUpperCase() as StoreStatusValue);
    setCoverUrl(String(data.coverUrl || ''));
    const envFromMedia = Array.isArray(data.media)
      ? uniqueEnvUrls(
          (data.media as Array<{ url?: string; bizType?: string }>)
            .filter((m) => m.bizType === 'ENV')
            .map((m) => String(m.url || '')),
        )
      : [];
    setEnvPhotoUrls(normalizeStringArray(envFromMedia, MIN_ENV_PHOTO_COUNT));
  }

  useEffect(() => {
    if (!id) return;
    setLoadError('');
    request<Record<string, unknown>>('PARTNER_H5', `/partner/stores/${id}`)
      .then(applyStore)
      .catch((e) => {
        setStore(null);
        setLoadError(e instanceof Error ? e.message : '加载失败');
      });
  }, [id]);

  async function changeStatus(next: StoreStatusValue) {
    if (!id || next === status || statusSaving) return;
    if (status === 'CLOSED') return;
    const auditStatus = String(store?.auditStatus || 'APPROVED').toUpperCase();
    if (next === 'OPEN' && !canPartnerOpenStore(auditStatus)) {
      setActionError(
        auditStatus === 'REJECTED'
          ? `门店审核未通过${store?.rejectReason ? `：${String(store.rejectReason)}` : ''}`
          : '门店尚在总部审核中，通过后方可开门',
      );
      return;
    }
    if (next === 'CLOSED') {
      setCloseConfirmOpen(true);
      return;
    }
    setStatusSaving(true);
    setActionError('');
    try {
      const updated = await request<Record<string, unknown>>('PARTNER_H5', `/partner/stores/${id}/status`, {
        method: 'PUT',
        body: JSON.stringify({ status: next }),
      });
      setStatus(next);
      setStore((prev) => (prev ? { ...prev, ...updated, status: next } : prev));
      toastSuccess(next === 'OPEN' ? '开店成功' : '状态已更新');
    } catch (e) {
      setActionError(e instanceof Error ? e.message : '状态更新失败');
    } finally {
      setStatusSaving(false);
    }
  }

  async function confirmCloseStore() {
    if (!id || statusSaving) return;
    setCloseConfirmOpen(false);
    setStatusSaving(true);
    setActionError('');
    try {
      const updated = await request<Record<string, unknown>>('PARTNER_H5', `/partner/stores/${id}/status`, {
        method: 'PUT',
        body: JSON.stringify({ status: 'CLOSED' }),
      });
      setStatus('CLOSED');
      setStore((prev) => (prev ? { ...prev, ...updated, status: 'CLOSED' } : prev));
      toastSuccess('门店已关闭');
    } catch (e) {
      setActionError(e instanceof Error ? e.message : '状态更新失败');
    } finally {
      setStatusSaving(false);
    }
  }

  async function saveBasic() {
    if (!id || saving || status === 'CLOSED') return;
    const auditStatus = String(store?.auditStatus || 'APPROVED').toUpperCase();
    if (auditStatus === 'PENDING') {
      setActionError('门店审核中，暂不可修改资料');
      return;
    }
    setSaving(true);
    setActionError('');
    try {
      const data = await request<Record<string, unknown>>('PARTNER_H5', `/partner/stores/${id}/basic`, {
        method: 'PUT',
        body: JSON.stringify({
          name: form.name.trim(),
          contactPhone: form.contactPhone.trim(),
          address: form.address.trim(),
          intro: form.intro.trim(),
          benefitUsageRule: form.benefitUsageRule.trim() || null,
          ...(form.latitude.trim() && form.longitude.trim()
            ? {
                latitude: Number(form.latitude),
                longitude: Number(form.longitude),
              }
            : {}),
        }),
      });
      applyStore(data);
      toastSuccess(auditStatus === 'REJECTED' ? '已保存并重新提交审核' : '已保存');
    } catch (e) {
      setActionError(e instanceof Error ? e.message : '保存失败');
    } finally {
      setSaving(false);
    }
  }

  async function saveMedia() {
    if (!id || mediaSaving || status === 'CLOSED') return;
    const auditStatus = String(store?.auditStatus || 'APPROVED').toUpperCase();
    if (auditStatus === 'PENDING') {
      setActionError('门店审核中，暂不可修改资料');
      return;
    }
    const nextCover = coverUrl.trim();
    const nextEnv = uniqueEnvUrls(envPhotoUrls);
    if (!nextCover) {
      setActionError('请上传门头照');
      return;
    }
    if (nextEnv.length < MIN_ENV_PHOTO_COUNT) {
      setActionError(`请上传至少 ${MIN_ENV_PHOTO_COUNT} 张环境照片`);
      return;
    }
    setMediaSaving(true);
    setActionError('');
    try {
      const data = await request<Record<string, unknown>>('PARTNER_H5', `/partner/stores/${id}/media`, {
        method: 'PUT',
        body: JSON.stringify({
          coverUrl: nextCover,
          envPhotoUrls: nextEnv,
        }),
      });
      applyStore(data);
      toastSuccess(auditStatus === 'REJECTED' ? '照片已更新并重新提交审核' : '照片已更新');
    } catch (e) {
      setActionError(e instanceof Error ? e.message : '照片更新失败');
    } finally {
      setMediaSaving(false);
    }
  }

  if (loadError) {
    return (
      <div className="partner-detail-page partner-home--flush-top">
        <div className="empty">{loadError}</div>
      </div>
    );
  }

  if (!store) return <div className="empty">加载中...</div>;

  const envPhotos = uniqueEnvUrls(
    Array.isArray(store.media)
      ? (store.media as Array<{ url?: string; bizType?: string }>)
          .filter((m) => m.bizType === 'ENV')
          .map((m) => String(m.url || ''))
      : [],
  );
  const auditStatus = String(store.auditStatus || 'APPROVED').toUpperCase();
  const auditPending = auditStatus === 'PENDING';
  const auditRejected = auditStatus === 'REJECTED';
  const readOnly = !canMutate || status === 'CLOSED' || auditPending;
  const canOpen = canPartnerOpenStore(auditStatus);

  return (
    <div className="partner-detail-page partner-home--flush-top">
      <main style={{ padding: '12px 20px 16px' }}>
        {actionError && <p className="partner-form-error" role="alert" style={{ marginBottom: 12 }}>{actionError}</p>}

        <section className="partner-form-card" style={{ margin: '0 0 16px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
            <h3 className="label-md text-muted" style={{ textTransform: 'uppercase', letterSpacing: '0.1em' }}>审核状态</h3>
            <span className={`partner-status-pill ${storeAuditPillClass(auditStatus)}`}>
              {storeAuditLabel(auditStatus)}
            </span>
          </div>
          {auditPending && (
            <p className="body-md" style={{ color: 'var(--color-secondary)' }}>
              资料已提交总部审核，通过后即可开门营业。审核期间不可修改资料。
            </p>
          )}
          {auditRejected && (
            <div>
              <p className="body-md" style={{ color: 'var(--color-heritage-red)', fontWeight: 600, marginBottom: 8 }}>
                审核未通过
              </p>
              <p className="body-md" style={{ background: 'rgba(180,35,24,0.06)', padding: 12, borderRadius: 8 }}>
                {String(store.rejectReason || '未填写驳回原因')}
              </p>
              <p className="label-md text-muted" style={{ marginTop: 8 }}>
                请按驳回原因修改资料并保存，将自动重新提交审核。
              </p>
            </div>
          )}
          {auditStatus === 'APPROVED' && (
            <p className="label-md text-muted">总部审核已通过，可将门店设为营业中。</p>
          )}
        </section>

        {canMutate && !auditPending && status !== 'CLOSED' && (
          <section className="partner-form-card" style={{ margin: '0 0 16px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <h3 className="label-md text-muted" style={{ textTransform: 'uppercase', letterSpacing: '0.1em' }}>门店套餐</h3>
              <button type="button" className="partner-btn-outline partner-btn-outline--compact" onClick={() => navigate(`/stores/${id}/packages`)}>
                编辑套餐
              </button>
            </div>
            <p className="label-md text-muted" style={{ marginTop: 8 }}>维护可核销套餐信息，提交后由总部审核。</p>
          </section>
        )}

        {canMutate && (
        <section className="partner-form-card" style={{ margin: '0 0 16px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
            <h3 className="label-md text-muted" style={{ textTransform: 'uppercase', letterSpacing: '0.1em' }}>运营状态</h3>
            <span className={`partner-status-pill ${storeStatusPillClass(status)}`}>
              {status === 'OPEN' && <span className="partner-dot partner-dot--green" style={{ width: 8, height: 8, display: 'inline-block', marginRight: 4 }} />}
              {storeStatusLabel(status)}
            </span>
          </div>
          <div className="partner-status-toggle">
            {STATUS_OPTIONS.map((s) => (
              <button
                key={s}
                type="button"
                className={status === s ? 'active' : ''}
                disabled={readOnly || statusSaving || (s === 'OPEN' && !canOpen) || status === 'CLOSED'}
                onClick={() => void changeStatus(s)}
              >
                {s === 'OPEN' && !canOpen ? '待审核' : storeStatusLabel(s)}
              </button>
            ))}
          </div>
          {status === 'CLOSED' && (
            <p className="label-md text-muted" style={{ marginTop: 12 }}>门店已关闭，不可再变更状态或编辑资料</p>
          )}
        </section>
        )}

        <section className="partner-form-card" style={{ margin: '0 0 16px' }}>
          <h3 className="headline-md" style={{ borderLeft: '4px solid var(--color-heritage-red)', paddingLeft: 12, marginBottom: 16 }}>基本信息</h3>
          {!canMutate || readOnly ? (
            <div className="partner-cover">
              <AppImage
                src={coverUrl || null}
                alt={form.name}
                wrapperClassName="app-image--fill"
              />
            </div>
          ) : (
            <div style={{ marginBottom: 16 }}>
              <p className="label-md text-muted" style={{ marginBottom: 8 }}>门头照</p>
              <OssUploadField
                wide
                bizType="STORE_TITLE"
                mediaType="IMAGE"
                value={coverUrl}
                onChange={setCoverUrl}
                label="拍照 / 从相册选择"
              />
            </div>
          )}
          <div className="partner-field">
            <label>门店名称</label>
            <input disabled={readOnly} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} style={{ width: '100%', padding: '12px 16px', border: '1px solid rgba(226,190,188,0.5)', borderRadius: 8, fontSize: 16, fontWeight: 500 }} />
          </div>
          <div className="partner-field">
            <label>门店登录手机号</label>
            <div className="partner-field-input">
              <span className="material-symbols-outlined">lock</span>
              <input disabled type="tel" value={form.loginPhone} readOnly />
            </div>
            <p className="label-md text-muted" style={{ marginTop: 8 }}>
              老板主账号，用于门店端登录；如需变更请联系总部。
            </p>
          </div>
          <div className="partner-field">
            <label>联系电话</label>
            <div className="partner-field-input">
              <span className="material-symbols-outlined">phone_in_talk</span>
              <input
                disabled={readOnly}
                type="tel"
                placeholder="手机号或座机，如 0379-8888888"
                value={form.contactPhone}
                onChange={(e) => setForm({ ...form, contactPhone: e.target.value })}
              />
            </div>
            <p className="label-md text-muted" style={{ marginTop: 8 }}>
              店长或对外展示号码，用户端拨号使用此号码，支持座机。
            </p>
          </div>
          <div className="partner-field">
            <label>门店地址</label>
            <textarea disabled={readOnly} rows={2} value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} />
            {!readOnly ? (
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8, flexWrap: 'wrap' }}>
                <button
                  type="button"
                  className="partner-btn-outline"
                  style={{ padding: '8px 12px', fontSize: 13 }}
                  onClick={() => setMapPickerOpen(true)}
                >
                  地图选点
                </button>
                <span className="label-md text-muted">
                  {form.latitude.trim() && form.longitude.trim() ? '已选点' : '未选点'}
                </span>
              </div>
            ) : null}
            <input type="hidden" name="latitude" value={form.latitude} readOnly />
            <input type="hidden" name="longitude" value={form.longitude} readOnly />
          </div>
          <div className="partner-field">
            <label>门店简介</label>
              <textarea disabled={readOnly} rows={4} placeholder="请输入门店简介（2-500字）" value={form.intro} onChange={(e) => setForm({ ...form, intro: e.target.value })} />
            <div style={{ textAlign: 'right', marginTop: 4 }}>
              <span className="label-md text-muted">{form.intro.length} / 500</span>
            </div>
          </div>
          <div className="partner-field">
            <label>好客权益券使用规则</label>
            <textarea
              disabled={readOnly}
              rows={4}
              placeholder="选填，展示在用户端门店详情，最多1000字"
              maxLength={1000}
              value={form.benefitUsageRule}
              onChange={(e) => setForm({ ...form, benefitUsageRule: e.target.value })}
            />
            <div style={{ textAlign: 'right', marginTop: 4 }}>
              <span className="label-md text-muted">{form.benefitUsageRule.length} / 1000</span>
            </div>
          </div>
        </section>

        <section className="partner-form-card" style={{ margin: '0 0 16px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 16 }}>
            <h3 className="headline-md" style={{ borderLeft: '4px solid var(--color-heritage-red)', paddingLeft: 12 }}>店内环境</h3>
            <span className="label-md text-muted">
              {canMutate && !readOnly
                ? `至少 ${MIN_ENV_PHOTO_COUNT} 张 · 已选 ${uniqueEnvUrls(envPhotoUrls).length} 张`
                : envPhotos.length
                  ? `已上传 ${envPhotos.length} 张`
                  : '暂无照片'}
            </span>
          </div>
          {canMutate && !readOnly ? (
            <>
              <MultiOssUploadField
                bizType="STORE_ENV"
                maxCount={20}
                value={uniqueEnvUrls(envPhotoUrls)}
                onChange={(urls) => setEnvPhotoUrls(urls.length ? urls : [''])}
                label={`批量上传环境照（${uniqueEnvUrls(envPhotoUrls).length}/20）`}
              />
              <button
                type="button"
                className="partner-btn-outline"
                style={{ width: '100%', marginTop: 16 }}
                disabled={mediaSaving}
                onClick={() => void saveMedia()}
              >
                <span className="material-symbols-outlined" style={{ fontSize: 18, verticalAlign: 'middle', marginRight: 4 }}>
                  upload
                </span>
                {mediaSaving ? '上传中…' : '重新上传照片'}
              </button>
            </>
          ) : envPhotos.length > 0 ? (
            <div className="partner-photo-grid">
              {envPhotos.map((url, index) => (
                <div key={`${url}-${index}`} className="partner-cover" style={{ aspectRatio: '1', marginBottom: 0 }}>
                  <AppImage src={url || null} alt={`环境图 ${index + 1}`} wrapperClassName="app-image--fill" />
                </div>
              ))}
            </div>
          ) : (
            <p className="label-md text-muted">录入门店时上传的环境照片将显示在这里</p>
          )}
        </section>

        <section className="partner-form-card" style={{ margin: 0, background: 'var(--color-surface-container)' }}>
          <h3 className="headline-md" style={{ borderLeft: '4px solid var(--color-subtle-gray)', paddingLeft: 12, marginBottom: 16 }}>管理信息</h3>
          <div style={{ marginBottom: 12 }}>
            <label className="label-md text-muted">营业状态</label>
            <p className="body-md" style={{ fontWeight: 500 }}>{storeStatusLabel(status)}</p>
          </div>
          <div>
            <label className="label-md text-muted">审核状态</label>
            <p className="body-md" style={{ fontWeight: 500 }}>{storeAuditLabel(auditStatus)}</p>
          </div>
        </section>
      </main>

      <footer className="partner-save-footer">
        <button type="button" className="partner-save-cancel" onClick={() => navigate('/stores')}>返回</button>
        {canMutate && (
        <button type="button" className="partner-save-submit" onClick={() => void saveBasic()} disabled={readOnly || saving}>
          <span className="material-symbols-outlined">save</span>
          {saving ? '保存中…' : auditRejected ? '保存并重新提交' : '保存修改'}
        </button>
        )}
      </footer>

      {closeConfirmOpen && (
        <div className="partner-ship-modal-backdrop" role="presentation" onClick={() => setCloseConfirmOpen(false)}>
          <div className="partner-ship-modal" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
            <h3 className="headline-md" style={{ marginBottom: 8 }}>确认关闭门店？</h3>
            <p className="body-md text-muted" style={{ lineHeight: 1.5 }}>
              关闭后不可恢复营业，确认关闭该门店？
            </p>
            <div className="partner-ship-actions">
              <button type="button" className="partner-btn-secondary" onClick={() => setCloseConfirmOpen(false)}>
                取消
              </button>
              <button type="button" className="partner-btn-primary" onClick={() => void confirmCloseStore()}>
                确认关闭
              </button>
            </div>
          </div>
        </div>
      )}

      <TencentLocPickerOverlay
        open={mapPickerOpen}
        onClose={() => setMapPickerOpen(false)}
        latitude={form.latitude ? Number(form.latitude) : undefined}
        longitude={form.longitude ? Number(form.longitude) : undefined}
        onPick={(loc) => {
          setForm((prev) => ({
            ...prev,
            latitude: String(loc.latitude),
            longitude: String(loc.longitude),
            ...(loc.address && !prev.address.trim() ? { address: loc.address } : {}),
          }));
          toastSuccess(loc.name ? `已选定：${loc.name}` : '位置已选定');
        }}
      />
    </div>
  );
}