import {
  FolderKanban,
  Home,
  Monitor,
  Palette,
  Search,
  UserRound,
} from 'lucide-react';
import {
  type ComponentType,
  type FormEvent,
  lazy,
  Suspense,
  useCallback,
  useEffect,
  useState,
} from 'react';

import { PlatformMudPointWalletEntry } from '../../../packages/shared/src/components/PlatformMudPointWalletEntry';
import { PlatformProfileRechargeModal } from '../../../packages/shared/src/components/PlatformProfileRechargeModal';
import { PlatformProfileWalletLedgerModal } from '../../../packages/shared/src/components/PlatformProfileWalletLedgerModal';
import type { ProfileDashboardSummary } from '../../../packages/shared/src/contracts/runtime';
import {
  pushAppHistoryPath,
  replaceAppHistoryPath,
} from '../../routing/activeAppPageRoutes';
import { getPlatformProfileDashboard } from '../../services/platform-entry/platformProfileClient';
import {
  usePlatformWalletLifecycle,
  usePlatformWalletStore,
} from '../../stores/usePlatformWalletStore';
import { useAuthUi } from '../auth/AuthUiContext';
import { FLOATING_FEEDBACK_FORM_URL } from '../common/floatingFeedbackEntryModel';
import { PlatformActionButton } from '../common/PlatformActionButton';
import { PlatformSubpanel } from '../common/PlatformSubpanel';
import {
  resolveActivePublicUserCode,
  resolveActiveUserAvatarLabel,
} from './platformActiveProfileModel';
import { PlatformActiveProfileView } from './PlatformActiveProfileView';
import type { PlatformEntryFlowShellProps } from './platformEntryActiveTypes';
import { usePlatformDesktopLayout } from './platformEntryResponsive';
import { PlatformProfileApiKeysModal } from './PlatformProfileApiKeysModal';
import { PlatformProfileReferralModal } from './PlatformProfileReferralModal';
import { PlatformProfileRewardCodeRedeemModal } from './PlatformProfileRewardCodeRedeemModal';
import {
  PlatformRechargePaymentConfirmationMask,
  PlatformRechargePaymentResultDialog,
} from './PlatformRechargePaymentStatusDialogs';
import { usePlatformProfileCenterController } from './usePlatformProfileCenterController';

const ImageCanvasEditorView = lazy(async () => {
  const module = await import('../image-editor/ImageCanvasEditorView');
  return { default: module.ImageCanvasEditorView };
});

const CreationLandingView = lazy(async () => {
  const module = await import('../creation-home/CreationLandingView');
  return { default: module.CreationLandingView };
});

const ProjectGalleryView = lazy(async () => {
  const module = await import('../project/ProjectGalleryView');
  return { default: module.ProjectGalleryView };
});

type ActiveRailButtonProps = {
  active: boolean;
  emphasized?: boolean;
  icon: ComponentType<{ className?: string }>;
  iconSrc: string;
  label: string;
  onClick: () => void;
};

function ActiveRailButton({
  active,
  emphasized = false,
  icon: Icon,
  iconSrc,
  label,
  onClick,
}: ActiveRailButtonProps) {
  return (
    <button
      type="button"
      aria-current={active ? 'page' : undefined}
      aria-label={label}
      className={`platform-desktop-rail__button ${emphasized ? 'platform-desktop-rail__button--primary' : ''} ${active ? 'platform-desktop-rail__button--active' : ''}`}
      onClick={onClick}
    >
      <span className="platform-desktop-rail__icon-shell">
        <img
          src={iconSrc}
          alt=""
          aria-hidden="true"
          draggable={false}
          className="creation-home-nav-art"
        />
        <Icon
          className="platform-desktop-rail__icon h-[1.1rem] w-[1.1rem]"
          aria-hidden="true"
        />
      </span>
      <span className="platform-desktop-rail__label text-[11px] font-semibold">
        {label}
      </span>
    </button>
  );
}

function ActiveBottomNavButton({
  active,
  emphasized = false,
  icon: Icon,
  label,
  onClick,
}: Omit<ActiveRailButtonProps, 'iconSrc'>) {
  return (
    <button
      type="button"
      aria-current={active ? 'page' : undefined}
      aria-label={label}
      className={`platform-bottom-nav__button ${emphasized ? 'platform-bottom-nav__button--primary' : ''} ${active ? 'platform-bottom-nav__button--active' : ''}`}
      onClick={onClick}
    >
      <span className="platform-bottom-nav__button-content">
        <span className="platform-bottom-nav__icon-shell">
          <Icon className="platform-bottom-nav__icon" aria-hidden="true" />
        </span>
        <span className="platform-bottom-nav__label">{label}</span>
        {active ? (
          <span
            aria-hidden="true"
            className="platform-bottom-nav__active-mark"
          />
        ) : null}
      </span>
    </button>
  );
}

function ActivePlatformBrand() {
  return (
    <span
      className="creation-home-brand-lockup shrink-0"
      role="img"
      aria-label="陶泥儿 GENARRATIVE"
    >
      <span className="platform-brand-logo">
        <img
          src="/branding/taonier-product-ip.png"
          alt=""
          aria-hidden="true"
          draggable={false}
          className="platform-brand-logo__image"
        />
        <span className="platform-brand-logo__copy">
          <span className="platform-brand-logo__title">
            陶泥<span className="platform-brand-logo__title-suffix">儿</span>
          </span>
          <span className="platform-brand-logo__subtitle">GENARRATIVE</span>
        </span>
      </span>
    </span>
  );
}

function LoadingPanel({ label }: { label: string }) {
  return (
    <div className="flex h-full min-h-[12rem] items-center justify-center text-sm font-semibold text-[var(--platform-text-soft)]">
      {label}
    </div>
  );
}

function MobileCreationDesktopGuide({
  onReturnHome,
}: {
  onReturnHome: () => void;
}) {
  return (
    <main
      className="flex min-h-full flex-1 items-center justify-center px-4 py-8"
      aria-label="桌面端创作提示"
    >
      <PlatformSubpanel
        as="section"
        radius="xl"
        padding="none"
        className="platform-remap-surface w-full max-w-sm px-5 py-6 text-center"
      >
        <span className="mx-auto flex h-14 w-14 items-center justify-center rounded-[1.05rem] bg-[rgba(199,101,50,0.12)] text-[var(--platform-accent-strong)]">
          <Monitor aria-hidden="true" className="h-7 w-7" />
        </span>
        <h1 className="mt-4 text-xl font-black leading-tight text-[var(--platform-text-strong)]">
          请在桌面端打开创作工具
        </h1>
        <p className="mt-3 text-sm font-semibold leading-6 text-[var(--platform-text-base)]">
          图片画布、项目管理和素材库需要更大的操作空间。
        </p>
        <PlatformActionButton
          onClick={onReturnHome}
          size="md"
          shape="pill"
          className="mt-5 min-h-11 w-full"
        >
          <Home aria-hidden="true" className="h-4 w-4" />
          返回首页
        </PlatformActionButton>
      </PlatformSubpanel>
    </main>
  );
}

export function PlatformEntryFlowShellImpl({
  selectionStage,
  setSelectionStage,
}: PlatformEntryFlowShellProps) {
  const authUi = useAuthUi();
  const [dashboard, setDashboard] = useState<ProfileDashboardSummary | null>(
    null,
  );
  const [isLoadingDashboard, setIsLoadingDashboard] = useState(false);
  const [isApiKeysOpen, setIsApiKeysOpen] = useState(false);
  const [searchInput, setSearchInput] = useState('');
  const [activeSearchKeyword, setActiveSearchKeyword] = useState('');
  const [isMobileDesktopGuideOpen, setIsMobileDesktopGuideOpen] =
    useState(false);
  const isDesktopLayout = usePlatformDesktopLayout();
  const currentWalletOwnerUserId =
    authUi?.canAccessProtectedData && authUi.user?.id ? authUi.user.id : null;
  usePlatformWalletLifecycle(
    currentWalletOwnerUserId,
    Boolean(authUi?.canAccessProtectedData),
  );
  const walletOwnerUserId = usePlatformWalletStore(
    (state) => state.ownerUserId,
  );
  const storedMudPointBalance = usePlatformWalletStore(
    (state) => state.mudPointBalance,
  );
  const storedLegacyWalletBalance = usePlatformWalletStore(
    (state) => state.legacyWalletBalance,
  );
  const storedMudPointBalanceStatus = usePlatformWalletStore(
    (state) => state.mudPointBalanceStatus,
  );
  const storedMudPointBalanceError = usePlatformWalletStore(
    (state) => state.mudPointBalanceError,
  );
  const walletOwnerMatchesCurrentUser =
    Boolean(currentWalletOwnerUserId) &&
    walletOwnerUserId === currentWalletOwnerUserId;
  const mudPointBalance = walletOwnerMatchesCurrentUser
    ? storedMudPointBalance
    : null;
  const mudPointBalanceError = walletOwnerMatchesCurrentUser
    ? storedMudPointBalanceError
    : '';
  const isWalletBalanceLoading =
    Boolean(currentWalletOwnerUserId) &&
    (!walletOwnerMatchesCurrentUser ||
      storedMudPointBalanceStatus === 'idle' ||
      storedMudPointBalanceStatus === 'loading');

  const refreshDashboard = useCallback(async () => {
    if (!authUi?.user || !authUi.canAccessProtectedData) {
      setDashboard(null);
      return;
    }
    setIsLoadingDashboard(true);
    try {
      setDashboard(await getPlatformProfileDashboard());
    } catch {
      setDashboard(null);
    } finally {
      setIsLoadingDashboard(false);
    }
  }, [authUi?.canAccessProtectedData, authUi?.user]);

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

  const isProfileStage = selectionStage === 'profile';

  const profileCenter = usePlatformProfileCenterController({
    activeTab: isProfileStage ? 'profile' : 'project',
    isAuthenticated: Boolean(authUi?.user),
    showRechargeEntry: true,
    requestLogin: () => authUi?.openLoginModal(),
    currentUser: authUi?.user,
  });
  const legacyWalletBalance = walletOwnerMatchesCurrentUser
    ? (storedLegacyWalletBalance ??
      profileCenter.rechargeCenter?.walletBalance ??
      null)
    : null;

  const openCreation = useCallback(() => {
    if (!isDesktopLayout) {
      setIsMobileDesktopGuideOpen(true);
      return;
    }
    pushAppHistoryPath('/creation');
    setSelectionStage('creation-home', { path: '/creation' });
  }, [isDesktopLayout, setSelectionStage]);

  const openProjects = useCallback(() => {
    if (!isDesktopLayout) {
      setIsMobileDesktopGuideOpen(true);
      return;
    }
    pushAppHistoryPath('/project');
    setSelectionStage('project', { path: '/project' });
  }, [isDesktopLayout, setSelectionStage]);

  const openProfile = useCallback(() => {
    pushAppHistoryPath('/profile');
    setSelectionStage('profile', { path: '/profile' });
  }, [setSelectionStage]);

  const openEditorProject = useCallback(
    (projectId: string, options?: { guide?: boolean; tool?: string }) => {
      if (!isDesktopLayout) {
        setIsMobileDesktopGuideOpen(true);
        return;
      }
      const params = new URLSearchParams();
      params.set('projectid', projectId);
      if (options?.guide) {
        params.set('guide', 'toolbar');
      }
      if (options?.tool) {
        params.set('tool', options.tool);
      }
      const path = `/editor/canvas?${params.toString()}`;
      pushAppHistoryPath(path);
      setSelectionStage('image-editor', { path });
    },
    [isDesktopLayout, setSelectionStage],
  );

  const replaceWithProjectGallery = useCallback(() => {
    replaceAppHistoryPath('/project');
    setSelectionStage('project', { path: '/project' });
  }, [setSelectionStage]);

  const isMobileToolStage =
    !isDesktopLayout &&
    (selectionStage === 'creation-home' ||
      selectionStage === 'project' ||
      selectionStage === 'image-editor');

  if ((!isDesktopLayout && isMobileDesktopGuideOpen) || isMobileToolStage) {
    return (
      <MobileCreationDesktopGuide
        onReturnHome={() => {
          setIsMobileDesktopGuideOpen(false);
          if (selectionStage === 'platform') {
            return;
          }
          setSelectionStage('platform', { path: '/' });
        }}
      />
    );
  }

  if (selectionStage === 'image-editor') {
    return (
      <div className="image-editor-stage-shell flex h-full min-h-0 min-w-0 flex-col overflow-hidden">
        <Suspense fallback={<LoadingPanel label="正在加载编辑器..." />}>
          <ImageCanvasEditorView
            legacyWalletBalance={legacyWalletBalance}
            onProjectAccessLost={replaceWithProjectGallery}
          />
        </Suspense>
      </div>
    );
  }

  const isAuthenticated = Boolean(authUi?.user);
  const balance = mudPointBalance?.totalPoints ?? legacyWalletBalance;
  const isCreationStage =
    !isProfileStage &&
    (selectionStage === 'platform' || selectionStage === 'creation-home');
  const avatarUrl = authUi?.user?.avatarUrl?.trim() || null;
  const avatarLabel = resolveActiveUserAvatarLabel(authUi?.user);
  const publicUserCode = resolveActivePublicUserCode(authUi?.user);
  const openRecharge = () => {
    profileCenter.setIsRechargeOpen(true);
    profileCenter.loadRechargeCenter();
  };
  const openUserSurface = () => {
    if (isAuthenticated) {
      authUi?.openAccountModal();
      return;
    }
    authUi?.openLoginModal();
  };
  const openFeedback = () => {
    window.open(FLOATING_FEEDBACK_FORM_URL, '_blank', 'noopener,noreferrer');
  };
  const submitSearch = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const keyword = searchInput.trim();
    setActiveSearchKeyword(keyword);
    if (isProfileStage) {
      openCreation();
    }
  };

  return (
    <>
      <div
        className={`flex h-full min-h-0 min-w-0 flex-col overflow-hidden ${isCreationStage ? 'creation-home-stage--landing' : ''}`}
      >
        <div className="platform-desktop-shell platform-desktop-shell--workbench platform-mobile-entry-shell flex h-full min-h-0 flex-col">
          <div className="platform-desktop-layout flex min-h-0 flex-1">
            <aside className="platform-desktop-leftbar hidden shrink-0 flex-col lg:flex">
              <ActivePlatformBrand />
              <nav
                className="platform-desktop-rail flex shrink-0 flex-col gap-3"
                aria-label="平台导航"
              >
                <ActiveRailButton
                  active={isCreationStage}
                  emphasized={isCreationStage}
                  icon={Palette}
                  iconSrc="/creation-home/nav-create.png"
                  label="创作"
                  onClick={openCreation}
                />
                <ActiveRailButton
                  active={selectionStage === 'project'}
                  icon={FolderKanban}
                  iconSrc="/creation-home/nav-projects.png"
                  label="项目"
                  onClick={openProjects}
                />
                <ActiveRailButton
                  active={isProfileStage}
                  icon={UserRound}
                  iconSrc="/creation-home/nav-profile.png"
                  label="我的"
                  onClick={openProfile}
                />
              </nav>
            </aside>

            <div className="platform-desktop-main flex min-w-0 flex-1 flex-col">
              <header className="platform-desktop-topbar flex min-h-16 shrink-0 items-center justify-between gap-1 px-4 sm:gap-3 sm:px-6">
                <div className="min-w-0 shrink-0 lg:hidden">
                  <ActivePlatformBrand />
                </div>
                <div className="platform-desktop-topbar__brand-search hidden min-w-0 flex-1 items-center lg:flex">
                  <form
                    className="platform-desktop-search flex w-full max-w-[34rem] items-center gap-2 px-3 py-2"
                    role="search"
                    onSubmit={submitSearch}
                  >
                    <img
                      src="/creation-home/topbar-search.png"
                      alt=""
                      aria-hidden="true"
                      className="creation-home-topbar-art creation-home-topbar-art--search"
                    />
                    <Search className="h-4 w-4 shrink-0" aria-hidden="true" />
                    <input
                      type="search"
                      value={searchInput}
                      placeholder="搜索项目、素材、作者或描述"
                      aria-label="搜索项目和素材"
                      className="min-w-0 flex-1 bg-transparent text-sm text-[var(--platform-text-strong)] outline-none placeholder:text-[var(--platform-text-soft)]"
                      onChange={(event) => {
                        const value = event.target.value;
                        setSearchInput(value);
                        if (!value.trim()) {
                          setActiveSearchKeyword('');
                        }
                      }}
                    />
                    <button
                      type="submit"
                      className="shrink-0 text-sm font-semibold text-[var(--platform-text-base)]"
                    >
                      搜索
                    </button>
                  </form>
                </div>

                <div className="platform-desktop-topbar__actions flex shrink-0 items-center gap-1 sm:gap-2 lg:gap-3">
                  {isAuthenticated ? (
                    <PlatformMudPointWalletEntry
                      variant={isDesktopLayout ? 'desktop' : 'mobile'}
                      balance={balance}
                      breakdown={mudPointBalance}
                      isLoading={isWalletBalanceLoading}
                      error={mudPointBalanceError || null}
                      className={
                        isDesktopLayout
                          ? 'platform-desktop-create-wallet-chip'
                          : 'platform-mobile-create-wallet-chip'
                      }
                      onRequestDetails={profileCenter.loadRechargeCenter}
                      onRecharge={openRecharge}
                      onOpenLedger={profileCenter.openWalletLedgerPanel}
                    />
                  ) : null}
                  <button
                    type="button"
                    onClick={openUserSurface}
                    className="platform-account-entry platform-desktop-search flex items-center gap-1 px-1 py-1 text-left sm:gap-2 sm:px-2 lg:gap-3 lg:px-3 lg:py-2.5"
                  >
                    <span
                      className="flex h-11 w-11 items-center justify-center overflow-hidden rounded-full text-base font-black text-white"
                      style={{
                        background: 'var(--platform-profile-avatar-fill)',
                        boxShadow: 'var(--platform-profile-avatar-shadow)',
                      }}
                    >
                      {avatarUrl ? (
                        <img
                          src={avatarUrl}
                          alt=""
                          className="h-full w-full object-cover"
                        />
                      ) : (
                        avatarLabel
                      )}
                    </span>
                    <span className="hidden min-w-0 sm:block">
                      <span className="block truncate text-sm font-semibold text-[var(--platform-text-strong)]">
                        {authUi?.user?.displayName || '登录'}
                      </span>
                      <span className="block truncate text-xs text-[var(--platform-text-soft)]">
                        {authUi?.user ? publicUserCode : '账号入口'}
                      </span>
                    </span>
                  </button>
                </div>
              </header>

              <main
                id={isCreationStage ? 'platform-tab-panel-create' : undefined}
                className={`platform-tab-panel min-h-0 min-w-0 flex-1 overflow-auto ${isCreationStage || isProfileStage ? '' : 'px-3 py-4 sm:px-6 sm:py-6'}`}
              >
                {isProfileStage ? (
                  <PlatformActiveProfileView
                    dashboard={dashboard}
                    isLoadingDashboard={isLoadingDashboard}
                    isLoadingWalletBalance={isWalletBalanceLoading}
                    legacyWalletBalance={legacyWalletBalance}
                    mudPointBalance={mudPointBalance}
                    user={authUi?.user}
                    onLogin={() => authUi?.openLoginModal()}
                    onOpenApiKeys={() => setIsApiKeysOpen(true)}
                    onOpenCommunity={() =>
                      profileCenter.openProfilePopupPanel('community')
                    }
                    onOpenFeedback={openFeedback}
                    onOpenRecharge={openRecharge}
                    onOpenRewardCode={profileCenter.openRewardCodeModal}
                    onOpenSettings={() => authUi?.openSettingsModal()}
                    onOpenWalletLedger={profileCenter.openWalletLedgerPanel}
                    onUserUpdated={(user) => authUi?.setCurrentUser(user)}
                  />
                ) : isCreationStage ? (
                  <Suspense
                    fallback={<LoadingPanel label="正在加载创作主页..." />}
                  >
                    <CreationLandingView
                      onOpenProject={openEditorProject}
                      onOpenProjects={openProjects}
                      searchKeyword={activeSearchKeyword}
                    />
                  </Suspense>
                ) : (
                  <Suspense fallback={<LoadingPanel label="正在加载项目..." />}>
                    <ProjectGalleryView
                      onOpenProject={openEditorProject}
                      searchKeyword={activeSearchKeyword}
                    />
                  </Suspense>
                )}
              </main>
            </div>
          </div>
          <div className="platform-mobile-bottom-dock min-w-0 shrink-0 lg:hidden">
            <nav
              className="platform-bottom-nav grid grid-cols-1"
              aria-label="移动平台导航"
            >
              <ActiveBottomNavButton
                active={isProfileStage}
                icon={UserRound}
                label="我的"
                onClick={openProfile}
              />
            </nav>
          </div>
        </div>
      </div>

      {profileCenter.isRechargeOpen ? (
        <PlatformProfileRechargeModal
          center={profileCenter.rechargeCenter}
          isLoading={profileCenter.isLoadingRechargeCenter}
          error={profileCenter.rechargeError}
          submittingProductId={profileCenter.submittingRechargeProductId}
          nativePayment={profileCenter.nativeWechatPayment}
          onClose={() => profileCenter.setIsRechargeOpen(false)}
          onRetry={profileCenter.loadRechargeCenter}
          onBuy={profileCenter.buyRechargeProduct}
          onConfirmNativePayment={profileCenter.confirmNativeWechatPayment}
          onCloseNativePayment={profileCenter.closeNativeWechatPayment}
        />
      ) : null}
      {profileCenter.isRewardCodeOpen ? (
        <PlatformProfileRewardCodeRedeemModal
          value={profileCenter.rewardCodeInput}
          isSubmitting={profileCenter.isSubmittingRewardCode}
          error={profileCenter.rewardCodeError}
          success={profileCenter.rewardCodeSuccess}
          onChange={profileCenter.setRewardCodeInput}
          onSubmit={profileCenter.submitRewardCode}
          onClose={() => profileCenter.setIsRewardCodeOpen(false)}
        />
      ) : null}
      {profileCenter.profilePopupPanel ? (
        <PlatformProfileReferralModal
          panel={profileCenter.profilePopupPanel}
          center={profileCenter.referralCenter}
          isLoading={profileCenter.isLoadingReferral}
          isSubmittingRedeem={profileCenter.isSubmittingReferralRedeem}
          redeemCode={profileCenter.referralRedeemCode}
          copyInviteState={profileCenter.inviteCopyState}
          error={profileCenter.referralError}
          success={profileCenter.referralSuccess}
          onClose={profileCenter.closeProfilePopupPanel}
          onCopyInvite={profileCenter.copyInviteInfo}
          onRedeemCodeChange={profileCenter.setReferralRedeemCode}
          onSubmitRedeemCode={profileCenter.submitReferralRedeemCode}
        />
      ) : null}
      {isApiKeysOpen ? (
        <PlatformProfileApiKeysModal onClose={() => setIsApiKeysOpen(false)} />
      ) : null}
      {profileCenter.isWalletLedgerOpen ? (
        <PlatformProfileWalletLedgerModal
          ledger={profileCenter.walletLedger}
          fallbackBalance={balance ?? 0}
          isLoading={profileCenter.isLoadingWalletLedger}
          error={profileCenter.walletLedgerError}
          onClose={() => profileCenter.setIsWalletLedgerOpen(false)}
          onRetry={profileCenter.loadWalletLedger}
        />
      ) : null}
      {profileCenter.rechargePaymentResult ? (
        <PlatformRechargePaymentResultDialog
          result={profileCenter.rechargePaymentResult}
          onClose={() => profileCenter.setRechargePaymentResult(null)}
        />
      ) : null}
      {profileCenter.wechatRechargeOrderConfirmationState ? (
        <PlatformRechargePaymentConfirmationMask
          orderId={profileCenter.wechatRechargeOrderConfirmationState.orderId}
        />
      ) : null}
    </>
  );
}

export default PlatformEntryFlowShellImpl;