/**
 * VendorPendingActiveDashboard - functional dashboard for PENDING_FIRST_APPROVAL / PENDING_PROCESSOR vendors.
 *
 * Layout:
 *  - Status banner (InlineNotice) at top, tone differs by state.
 *  - Optional "under manual review" line when flagReason is set.
 *  - Profile section placeholder.
 *  - Deals section placeholder with disabled "Create draft deal" button + tooltip.
 *  - For PENDING_PROCESSOR: prominent "Complete payment setup" CTA.
 */

'use client';

import { useT } from '@/lib/i18n/react';
import { InlineNotice } from '@/components/ui/feedback/InlineNotice';
import { Button } from '@/components/ui/primitives/Button';
import { Stack } from '@/components/ui/layout/Stack';
import { Section } from '@/components/ui/layout/Section';
import { Icon } from '@/components/ui/icons/Icon';
import { VendorShell } from '@/components/ui/layout/VendorShell';
import { VendorStripeStatusBanner } from '@/features/vendor-dashboard/VendorStripeStatusBanner';
import { RejectionBannerList } from '@/components/ui/domain/RejectionBannerList';
import { DraftsBanner } from '@/components/ui/domain/DraftsBanner';
import { useVendorDashboardData } from '@/features/vendor-dashboard/useVendorDashboardData';
import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from '@/components/ui/overlays/Tooltip';

export interface VendorPendingActiveDashboardProps {
  /** The current vendor account state. */
  state: 'PENDING_FIRST_APPROVAL' | 'PENDING_PROCESSOR';
  /** Business display name. */
  businessName: string;
  /** Set when the LLM flagged the application for manual review. */
  flagReason?: string | null;
  /** Render without loading vendor-specific data. */
  demo?: boolean;
}

/**
 * VendorPendingActiveDashboard
 *
 * Shown when a vendor's accountState is PENDING_FIRST_APPROVAL or PENDING_PROCESSOR.
 * Provides a working dashboard shell with status banner and section placeholders.
 *
 * @example
 * ```tsx
 * <VendorPendingActiveDashboard
 *   state="PENDING_PROCESSOR"
 *   businessName="Dana's Coffee"
 *   flagReason={null}
 * />
 * ```
 */
export function VendorPendingActiveDashboard({
  state,
  businessName,
  flagReason,
  demo = false,
}: VendorPendingActiveDashboardProps) {
  const t = useT('vendor_welcome');
  const tCommon = useT('common');
  const { data } = useVendorDashboardData({ enabled: !demo });
  const hookVendor = data?.vendor;

  const statusTitle = state === 'PENDING_PROCESSOR' ? t('status_processor') : t('status_pending');
  const noticeTone = state === 'PENDING_PROCESSOR' ? 'warning' : 'info';
  const draftsTooltip =
    state === 'PENDING_PROCESSOR'
      ? t('drafts_tooltip_processor')
      : t('drafts_tooltip_first_approval');

  return (
    <TooltipProvider>
      <VendorShell variant="dashboard" currentPath="/vendor/dashboard" demo={demo}>
        {hookVendor && (
          <>
            <VendorStripeStatusBanner
              stripeAccountId={hookVendor.stripeAccountId}
              stripeOnboardingState={hookVendor.stripeOnboardingState}
            />
            {hookVendor.imageRejections.length > 0 && (
              <RejectionBannerList notifications={hookVendor.imageRejections} />
            )}
            {hookVendor.draftsCount > 0 && <DraftsBanner count={hookVendor.draftsCount} />}
          </>
        )}
        <div aria-labelledby="vendor-pending-dash-heading">
          {/* ─── Page heading (visually hidden; accessible label) ─────── */}
          <h1 id="vendor-pending-dash-heading" className="sr-only">
            {businessName}
          </h1>

          <Stack gap="0">
            {/* ─── Status banner ─────────────────────────────────────── */}
            <div className="px-4 pt-4">
              <InlineNotice
                tone={noticeTone}
                title={statusTitle}
                description={flagReason ? t('under_manual_review') : undefined}
              />
            </div>

            {/* ─── PENDING_PROCESSOR: Stripe Connect onboarding CTA ── */}
            {state === 'PENDING_PROCESSOR' && (
              <div className="px-4 pt-4">
                <Button
                  variant="primary"
                  size="lg"
                  className="w-full"
                  onClick={() => {
                    window.location.assign('/vendor/settings/payments');
                  }}
                  iconStart={<Icon name="CreditCard" size="sm" color="inherit" />}
                >
                  {t('complete_morning_cta')}
                </Button>
              </div>
            )}

            {/* ─── Profile section ───────────────────────────────────── */}
            <Section heading={undefined} aria-label={t('profile_section_label')} py="4" px="4">
              <div className="border-border-subtle bg-surface-raised rounded-lg border p-4">
                <Stack gap="3">
                  <p className="text-text-primary text-base font-semibold">
                    {/* TODO: replace with profile editor in follow-up */}
                    {t('profile_heading')}
                  </p>
                  <p className="text-text-secondary text-sm">{businessName}</p>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <span className="inline-block">
                        <Button
                          variant="secondary"
                          size="sm"
                          disabled
                          iconStart={<Icon name="Pencil" size="sm" color="inherit" />}
                          aria-describedby="profile-edit-tooltip"
                        >
                          {tCommon('edit')}
                        </Button>
                      </span>
                    </TooltipTrigger>
                    <TooltipContent id="profile-edit-tooltip">
                      {t('edit_profile_tooltip')}
                    </TooltipContent>
                  </Tooltip>
                </Stack>
              </div>
            </Section>

            {/* ─── Deals section ─────────────────────────────────────── */}
            <Section heading={undefined} aria-label={t('deals_section_label')} py="4" px="4">
              <div className="border-border-subtle bg-surface-raised rounded-lg border p-4">
                <Stack gap="3">
                  <p className="text-text-primary text-base font-semibold">{t('deals_heading')}</p>
                  <p className="text-text-secondary text-sm">{t('no_deals')}</p>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      {/* Wrap in span so disabled button still triggers tooltip */}
                      <span className="inline-block">
                        <Button
                          variant="secondary"
                          size="sm"
                          disabled
                          iconStart={<Icon name="Plus" size="sm" color="inherit" />}
                          aria-describedby="drafts-tooltip"
                        >
                          {t('create_draft')}
                        </Button>
                      </span>
                    </TooltipTrigger>
                    <TooltipContent id="drafts-tooltip">{draftsTooltip}</TooltipContent>
                  </Tooltip>
                </Stack>
              </div>
            </Section>
          </Stack>
        </div>
      </VendorShell>
    </TooltipProvider>
  );
}