import { useEffect, useMemo, useState } from 'react';

import { useNavigate, useSearchParams } from 'react-router-dom';

import PageHeader from '@dukang/shared-ui/PageHeader';

import ChinaRegionPicker from '../components/ChinaRegionPicker';

import OssUploadField from '../components/OssUploadField';

import { request } from '../lib/api';

import { resolveRegionBinding } from '../lib/china-region';

import { checkStorePhoneAvailable } from '../lib/storePhone';

import { fetchPartnerCities, type OpenCityOption } from '../lib/upload';

import {

  fetchPartnerProfile,

  handlePartnerWechatCallback,

  savePartnerWechatAuth,

} from '../lib/wechat-auth';

import { isWechatEnv, weixinSdk } from '../lib/weixin';

import { stripOAuthParamsFromLocation } from '@dukang/weixin-sdk';

import {

  clearStoreDraft,

  defaultStoreForm,

  loadStoreDraft,

  saveStoreDraft,

  type StoreDraftForm,

  validateStoreStep1,

  validateStoreStep2,

  validateStoreStep3,

} from '../lib/storeDraft';



const STEPS = ['基本信息', '照片上传', '结算资质'] as const;



type FieldErrors = {

  phone?: string;

};



function isPhoneConflictMessage(message: string) {

  return message.includes('手机号已绑定');

}



export default function StoreCreatePage() {

  const navigate = useNavigate();

  const [params, setParams] = useSearchParams();

  const saved = loadStoreDraft();

  const [form, setForm] = useState<StoreDraftForm>(saved?.form ?? defaultStoreForm());

  const [submitError, setSubmitError] = useState('');

  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});

  const [submitting, setSubmitting] = useState(false);

  const [checkingPhone, setCheckingPhone] = useState(false);

  const [cities, setCities] = useState<OpenCityOption[]>([]);

  const [citiesError, setCitiesError] = useState('');

  const [wechatReady, setWechatReady] = useState(false);



  const stepFromUrl = Number(params.get('step') || 0);

  const step = stepFromUrl >= 1 && stepFromUrl <= 3 ? stepFromUrl : (saved?.step ?? 1);



  useEffect(() => {

    if (!stepFromUrl && saved?.step) {

      setParams({ step: String(saved.step) }, { replace: true });

    }

  }, [stepFromUrl, saved?.step, setParams]);



  useEffect(() => {

    saveStoreDraft({ step, form });

  }, [step, form]);



  useEffect(() => {

    if (step !== 2 || !isWechatEnv()) return;

    void fetchPartnerProfile()

      .then((me) => setWechatReady(!!me.hasWechat))

      .catch(() => setWechatReady(false));

    void weixinSdk.init().catch(() => {

      /* OssUploadField 点击时会再次初始化 */

    });

  }, [step]);



  useEffect(() => {

    if (!isWechatEnv() || !params.get('code')) return;

    void handlePartnerWechatCallback()

      .then((result) => {

        if (result && savePartnerWechatAuth(result)) {

          setWechatReady(true);

        }

        stripOAuthParamsFromLocation();

        const next = new URLSearchParams(params);

        next.delete('code');

        next.delete('state');

        setParams(next, { replace: true });

        void weixinSdk.init().catch(() => {

          /* OssUploadField 点击时会再次初始化 */

        });

      })

      .catch((e) => setSubmitError(e instanceof Error ? e.message : '微信授权失败'));

  }, [params, setParams]);



  useEffect(() => {

    void fetchPartnerCities()

      .then((items) => {

        setCities(items);

        if (!items.length) setCitiesError('暂无开城城市，请联系总部在后台配置');

      })

      .catch((e) => setCitiesError(e instanceof Error ? e.message : '加载开城城市失败'));

  }, []);



  const regionBindingHint = useMemo(() => {

    if (!form.regionCodes.length) return null;

    const binding = resolveRegionBinding(form.regionCodes, cities);

    if (!binding) return null;

    if (binding.cityId && binding.matchedCity) {

      return `已匹配开城城市：${binding.matchedCity.name}`;

    }

    return '所选地区暂未开城，请联系总部配置对应区划';

  }, [form.regionCodes, cities]);



  function patchForm(patch: Partial<StoreDraftForm>) {

    setForm((prev) => ({ ...prev, ...patch }));

    setSubmitError('');

    if ('phone' in patch) {

      setFieldErrors((prev) => ({ ...prev, phone: undefined }));

    }

  }



  function bindRegionSelection(codes: string[]) {

    const binding = resolveRegionBinding(codes, cities);

    if (!binding) {

      patchForm({ regionCodes: codes, cityId: '', province: '', city: '', district: '' });

      return;

    }

    patchForm({

      regionCodes: codes,

      cityId: binding.cityId ?? '',

      province: binding.region.province,

      city: binding.region.city,

      district: binding.region.district,

    });

  }



  function goStep(n: number) {

    setParams({ step: String(n) });

    setSubmitError('');

  }



  async function handleNext() {

    if (step === 1) {

      const msg = validateStoreStep1(form);

      if (msg) {

        setSubmitError(msg);

        return;

      }

      setCheckingPhone(true);

      setSubmitError('');

      setFieldErrors({});

      try {

        const phoneCheck = await checkStorePhoneAvailable(form.phone.trim());

        if (!phoneCheck.available) {

          setFieldErrors({

            phone: phoneCheck.message ?? '该手机号已绑定门店，请更换',

          });

          return;

        }

      } catch (e) {

        setSubmitError(e instanceof Error ? e.message : '手机号校验失败');

        return;

      } finally {

        setCheckingPhone(false);

      }

    }

    if (step === 2) {

      const msg = validateStoreStep2(form);

      if (msg) {

        setSubmitError(msg);

        return;

      }

    }

    goStep(step + 1);

  }



  async function submit() {

    const msg = validateStoreStep3(form);

    if (msg) {

      setSubmitError(msg);

      return;

    }

    const step1Msg = validateStoreStep1(form);

    if (step1Msg) {

      setSubmitError(step1Msg);

      goStep(1);

      return;

    }

    const step2Msg = validateStoreStep2(form);

    if (step2Msg) {

      setSubmitError(step2Msg);

      goStep(2);

      return;

    }



    setSubmitting(true);

    setSubmitError('');

    setFieldErrors({});

    try {

      const phoneCheck = await checkStorePhoneAvailable(form.phone.trim());

      if (!phoneCheck.available) {

        setFieldErrors({

          phone: phoneCheck.message ?? '该手机号已绑定门店，请更换',

        });

        goStep(1);

        return;

      }



      const envPhotoUrls = form.envPhotoUrls.map((u) => u.trim()).filter(Boolean);

      const result = await request<{ store: { id: string } }>('PARTNER_H5', '/partner/stores', {

        method: 'POST',

        body: JSON.stringify({

          cityId: form.cityId,

          province: form.province,

          city: form.city,

          name: form.name.trim(),

          phone: form.phone.trim(),

          district: form.district.trim(),

          address: form.address.trim(),

          intro: form.intro.trim() || undefined,

          coverUrl: form.coverUrl.trim() || undefined,

          envPhotoUrls: envPhotoUrls.length ? envPhotoUrls : undefined,

          contractUrl: form.contractUrl.trim() || undefined,

          bankAccountName: form.bankAccountName.trim(),

          bankAccountNo: form.bankAccountNo.replace(/\s/g, ''),

          bankBranch: form.bankBranch.trim(),

        }),

      });

      clearStoreDraft();

      navigate(`/stores/${result.store.id}`);

    } catch (e) {

      const message = e instanceof Error ? e.message : '提交失败';

      if (isPhoneConflictMessage(message)) {

        setFieldErrors({ phone: message });

        goStep(1);

        return;

      }

      setSubmitError(message);

    } finally {

      setSubmitting(false);

    }

  }



  const progress = step === 1 ? 0 : step === 2 ? 50 : 100;

  const nextDisabled = submitting || checkingPhone;



  return (

    <div className="partner-page-sticky">

      <PageHeader title="录入新门店" onBack={() => navigate('/stores')} />



      <nav className="partner-stepper">

        <div className="partner-stepper-inner">

          <div className="partner-stepper-line" aria-hidden>

            <div className="partner-stepper-line-fill" style={{ width: `${progress}%` }} />

          </div>

          {STEPS.map((label, i) => {

            const n = i + 1;

            const done = step > n;

            const active = step === n;

            return (

              <div key={label} className="partner-step">

                <div className={`partner-step-circle${done ? ' partner-step-circle--done' : ''}${active ? ' partner-step-circle--active' : ''}`}>

                  {done ? <span className="material-symbols-outlined" style={{ fontSize: 16, fontVariationSettings: "'FILL' 1" }}>check</span> : n}

                </div>

                <span className={`partner-step-label${active || done ? ' partner-step-label--active' : ''}`}>{label}</span>

              </div>

            );

          })}

        </div>

      </nav>



      {(submitError || citiesError) && (

        <p className="partner-form-error" role="alert">{submitError || citiesError}</p>

      )}



      {step === 1 && (

        <>

          <section className="partner-form-card">

            <div className="partner-section-title">

              <div className="partner-section-bar" />

              <h2 className="headline-md">门店基本信息</h2>

            </div>

            <div className="partner-field">

              <label>所在地区 <span className="text-primary">*</span></label>

              <ChinaRegionPicker value={form.regionCodes} onChange={bindRegionSelection} />

              {regionBindingHint && (

                <p className={`label-md${form.cityId ? ' text-muted' : ' text-primary'}`} style={{ marginTop: 8 }}>

                  {regionBindingHint}

                </p>

              )}

            </div>

            <div className="partner-field">

              <label>门店名称 <span className="text-primary">*</span></label>

              <div className="partner-field-input">

                <span className="material-symbols-outlined">store</span>

                <input placeholder="请输入门店名称" value={form.name} onChange={(e) => patchForm({ name: e.target.value })} />

              </div>

            </div>

            <div className="partner-field">

              <label>联系电话（门店登录账号） <span className="text-primary">*</span></label>

              <div className="partner-field-input">

                <span className="material-symbols-outlined">call</span>

                <input

                  type="tel"

                  placeholder="请输入11位手机号"

                  value={form.phone}

                  onChange={(e) => patchForm({ phone: e.target.value })}

                />

              </div>

              {fieldErrors.phone && (

                <p className="partner-field-error" role="alert">{fieldErrors.phone}</p>

              )}

            </div>

            <div className="partner-field">

              <label>详细地址 <span className="text-primary">*</span></label>

              <textarea rows={2} placeholder="请输入详细门牌号" value={form.address} onChange={(e) => patchForm({ address: e.target.value })} />

            </div>

            <div className="partner-field">

              <label>门店简介</label>

              <textarea rows={4} placeholder="请输入门店简介 (10-500字)" value={form.intro} onChange={(e) => patchForm({ intro: e.target.value })} />

              <div style={{ textAlign: 'right', marginTop: 4 }}>

                <span className="label-md text-muted">{form.intro.length} / 500</span>

              </div>

            </div>

          </section>

          <div className="partner-info-banner">

            <div className="partner-bills-icon">

              <span className="material-symbols-outlined">verified_user</span>

            </div>

            <div>

              <h3 className="body-md text-primary" style={{ fontWeight: 700 }}>杜康合伙人身份认证</h3>

              <p className="label-md text-variant" style={{ marginTop: 4, lineHeight: 1.4 }}>

                填写内容将自动保存，退出后可继续录入。

              </p>

            </div>

          </div>

        </>

      )}



      {step === 2 && (

        <>

          <div className="partner-section-title" style={{ padding: '0 20px', marginBottom: 16 }}>

            <div className="partner-bills-icon" style={{ background: '#ffdad7', borderRadius: 8, width: 40, height: 40 }}>

              <span className="material-symbols-outlined text-primary">photo_library</span>

            </div>

            <h2 className="headline-md">门店图片上传</h2>

          </div>



          <section className="partner-form-card">

            <h3 className="headline-md">门头照 <span className="text-primary">*</span></h3>

            <p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>至少 1 张，需包含完整招牌</p>

            <OssUploadField

              wide

              bizType="STORE_TITLE"

              mediaType="IMAGE"

              value={form.coverUrl}

              wechatReady={wechatReady}

              onWechatReadyChange={setWechatReady}

              onChange={(coverUrl) => patchForm({ coverUrl })}

              label="点击或拖拽上传"

            />

          </section>



          <section className="partner-form-card">

            <h3 className="headline-md">环境照片 <span className="text-primary">*</span></h3>

            <p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>至少 3 张，展示店内整洁环境</p>

            <div className="partner-upload-grid">

              {form.envPhotoUrls.map((url, index) => (

                <OssUploadField

                  key={index}

                  compact

                  bizType="STORE_ENV"

                  mediaType="IMAGE"

                  value={url}

                  wechatReady={wechatReady}

                  onWechatReadyChange={setWechatReady}

                  onChange={(nextUrl) => {

                    const envPhotoUrls = [...form.envPhotoUrls];

                    envPhotoUrls[index] = nextUrl;

                    patchForm({ envPhotoUrls });

                  }}

                />

              ))}

            </div>

          </section>



          <section className="partner-form-card">

            <h3 className="headline-md">签约合同 <span className="text-primary">*</span></h3>

            <p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>拍照上传签约协议首页与盖章页</p>

            <OssUploadField

              bizType="STORE_CONTRACT"

              mediaType="FILE"

              accept="image/*,.pdf"

              value={form.contractUrl}

              wechatReady={wechatReady}

              onWechatReadyChange={setWechatReady}

              onChange={(contractUrl) => patchForm({ contractUrl })}

              label="上传合同副本"

            />

          </section>



          <div className="partner-info-banner" style={{ background: 'rgba(254,214,91,0.2)', borderColor: 'rgba(254,214,91,0.5)' }}>

            <span className="material-symbols-outlined text-secondary" style={{ fontSize: 18 }}>info</span>

            <p className="label-md" style={{ lineHeight: 1.5, color: 'var(--color-on-secondary-container)' }}>

              温馨提示：请确保照片清晰无反光，避免遮挡关键信息。如上传失败，请检查网络或联系客户经理。

            </p>

          </div>

        </>

      )}



      {step === 3 && (

        <>

          <div className="partner-section-title" style={{ padding: '0 20px', marginBottom: 16 }}>

            <span className="material-symbols-outlined text-primary">account_balance</span>

            <h2 className="headline-md">结算信息配置</h2>

          </div>

          <section className="partner-form-card partner-store-phone-summary">

            <div className="partner-store-phone-summary-main">

              <span className="label-md text-muted">门店登录手机号</span>

              <span className="body-md">{form.phone.trim() || '未填写'}</span>

            </div>

            <button type="button" className="partner-weekly-link" onClick={() => goStep(1)}>

              修改

            </button>

          </section>

          <section className="partner-form-card">

            <div className="partner-field">

              <label>户主姓名 *</label>

              <input className="partner-field-input partner-field-input--block" placeholder="请输入银行卡实名姓名" value={form.bankAccountName} onChange={(e) => patchForm({ bankAccountName: e.target.value })} />

            </div>

            <div className="partner-field">

              <label>银行卡号 *</label>

              <input className="partner-field-input partner-field-input--block" placeholder="请输入16-19位银行卡号" value={form.bankAccountNo} onChange={(e) => patchForm({ bankAccountNo: e.target.value })} />

            </div>

            <div className="partner-field">

              <label>开户支行 *</label>

              <input className="partner-field-input partner-field-input--block" placeholder="例如：中国工商银行洛阳分行" value={form.bankBranch} onChange={(e) => patchForm({ bankBranch: e.target.value })} />

            </div>

          </section>

          <div className="partner-info-banner" style={{ background: 'rgba(254,214,91,0.15)', borderColor: 'rgba(254,214,91,0.3)' }}>

            <span className="material-symbols-outlined text-secondary">info</span>

            <p className="body-md" style={{ color: 'var(--color-on-secondary-container)' }}>

              请确保银行卡信息准确，以免影响每月的餐费结算。

            </p>

          </div>

        </>

      )}



      <footer className="partner-sticky-footer">

        {step > 1 && (

          <button type="button" className="partner-btn-outline" onClick={() => goStep(step - 1)} disabled={nextDisabled}>上一步</button>

        )}

        {step < 3 ? (

          <button type="button" className="partner-btn-primary" onClick={() => void handleNext()} disabled={nextDisabled}>

            <span>{checkingPhone ? '校验中…' : '下一步'}</span>

            <span className="material-symbols-outlined" style={{ fontSize: 20 }}>navigate_next</span>

          </button>

        ) : (

          <button type="button" className="partner-btn-primary" onClick={() => void submit()} disabled={submitting}>

            {submitting ? '提交中…' : '提交'}

          </button>

        )}

      </footer>

    </div>

  );

}