'use client';

import Link from 'next/link';
import { useSellerDashboard } from '@/lib/queries/use-seller-dashboard';
import { useNotifications } from '@/lib/queries/use-notifications';
import { useSelectedStoreId } from '@/lib/stores/store-context';
import { KpiCard } from '@/components/seller/kpi-card';
import { OrdersActionList } from '@/components/seller/orders-action-list';
import { ListingsAttentionWidget } from '@/components/seller/listings-attention-widget';
import { SellerBalanceWidget } from '@/components/seller/seller-balance-widget';
import { SellerReviewsWidget } from '@/components/seller/seller-reviews-widget';
import { ConnectHealthBanner } from '@/components/seller/connect-health-banner';
import { NotificationRow } from '@/components/notifications/notification-row';

function formatDollars(cents: number | null): string {
  if (cents === null) return '—';
  return `$${(cents / 100).toLocaleString(undefined, { maximumFractionDigits: 0 })}`;
}

function deltaText(
  current: number,
  prior: number,
  suffix: string,
  format: 'count' | 'dollars' = 'count',
): { direction: 'up' | 'down' | 'flat'; text: string } {
  const diff = current - prior;
  if (diff === 0) return { direction: 'flat', text: `Flat ${suffix}` };
  const sign = diff > 0 ? '+' : '−';
  const magnitude = Math.abs(diff);
  const formatted =
    format === 'dollars'
      ? `$${(magnitude / 100).toLocaleString(undefined, { maximumFractionDigits: 0 })}`
      : String(magnitude);
  return {
    direction: diff > 0 ? 'up' : 'down',
    text: `${sign}${formatted} ${suffix}`,
  };
}

export default function SellerDashboardPage() {
  const storeId = useSelectedStoreId();

  const { data: metrics, isLoading: metricsLoading } = useSellerDashboard(storeId);
  const { data: inbox } = useNotifications('unread');
  const recentUnread = inbox?.pages.flatMap((p) => p.data).slice(0, 5) ?? [];

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-semibold text-ink">Dashboard</h1>

      {/* Connect health banner — only renders when payouts are paused. */}
      {storeId ? <ConnectHealthBanner storeId={storeId} /> : null}

      {/* Balance widget — high importance for sellers, mounted above KPIs */}
      {storeId ? (
        <section className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <SellerBalanceWidget storeId={storeId} />
          <SellerReviewsWidget storeId={storeId} />
        </section>
      ) : null}

      {/* KPI row */}
      <section className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
        <KpiCard
          label="Revenue this month"
          value={metricsLoading || !metrics ? '—' : formatDollars(metrics.revenue_this_month.current_cents)}
          delta={metrics ? deltaText(
            metrics.revenue_this_month.current_cents,
            metrics.revenue_this_month.prior_cents,
            'vs last month',
            'dollars',
          ) : undefined}
        />
        <KpiCard
          label="Active listings"
          value={metricsLoading || !metrics ? '—' : String(metrics.active_listings.current)}
          delta={metrics ? {
            direction: metrics.active_listings.delta_last_7_days > 0 ? 'up' : 'flat',
            text: `+${metrics.active_listings.delta_last_7_days} this week`,
          } : undefined}
        />
        <KpiCard
          label="Orders this month"
          value={metricsLoading || !metrics ? '—' : String(metrics.orders_this_month.current)}
          delta={metrics ? deltaText(
            metrics.orders_this_month.current,
            metrics.orders_this_month.prior,
            'vs last month',
          ) : undefined}
        />
        <KpiCard
          label="Next payout"
          value={metricsLoading || !metrics ? '—' : formatDollars(metrics.next_payout.amount_cents)}
        />
      </section>

      {/* Triage row: orders left, inbox right */}
      <section className="grid grid-cols-1 gap-4 xl:grid-cols-3">
        <div className="xl:col-span-2">
          {metrics ? (
            <OrdersActionList counts={metrics.action_counts} />
          ) : (
            <div className="rounded-md border border-forest/10 bg-white p-4 text-sm text-forest/50">
              Loading orders…
            </div>
          )}
        </div>

        <div className="rounded-md border border-forest/20 bg-white p-4">
          <div className="mb-2 flex items-center justify-between">
            <div className="text-xs uppercase tracking-wide text-forest/70">Unread inbox</div>
            <Link href="/seller/inbox" className="text-xs text-terracotta hover:underline">
              See all
            </Link>
          </div>
          {recentUnread.length === 0 ? (
            <div className="py-6 text-center text-sm text-forest/60">No unread notifications.</div>
          ) : (
            <div className="divide-y divide-forest/10">
              {recentUnread.map((n) => <NotificationRow key={n.id} item={n} />)}
            </div>
          )}
        </div>
      </section>

      {/* Listings attention */}
      <section>
        {metrics ? (
          <ListingsAttentionWidget count={metrics.action_counts.listings_needs_attention} />
        ) : null}
      </section>
    </div>
  );
}