'use client';
import { useLocale, useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
import { Avatar, Box, Skeleton, Stack, Typography } from '@mui/material';
import {
  AppButton,
  AppIcon,
  AppLink,
  CountdownTimer,
  EmptyState,
  ErrorState,
  Money,
  SurfaceCard,
  TrustBadge,
} from '@/components';
import { ROUTES } from '@/constants';
import { formatRelativeTime, formatShamsiDate, localeTag, parseIrr } from '@/utils';
import { useMe } from '@/services/auth';
import { useNurseRequestInbox } from '@/services/bookingRequests';
import { useTodaySessions } from '@/services/bookings';
import { useNurseEarningsBalance } from '@/services/payouts';
import { useUnreadCount } from '@/services/notifications';
import { useVerificationStatus } from '@/services/verification';
import { ownBadgeState } from '@/services/verification/types';
import { coarseResponseLabel } from '@/services/bookingRequests/format';
import DashboardActivationSlot from './DashboardActivationSlot';

const DASHBOARD_MAX_WIDTH = 960;
/** The pill's urgency tiers (ui-phase-7 §3.4): teal >2h · amber <2h · terracotta <30min. */
const URGENT_THRESHOLD_SECONDS = 30 * 60;
const WARN_THRESHOLD_SECONDS = 2 * 60 * 60;

/**
 * The nurse "امروز" dashboard (ui-phase-7 §3.1) — the operational home replacing the `PlaceholderScreen`.
 * Pure assembly: every widget reads an already-cached query. Order matters — the pending-requests strip
 * is the most time-critical thing a nurse can miss, so it sits above the earnings snapshot.
 */
export default function NurseDashboardScreen() {
  const t = useTranslations('dashboard');
  const { data: me, isLoading: meLoading } = useMe();
  const verification = useVerificationStatus();

  const displayName = me ? [me.firstName, me.lastName].filter(Boolean).join(' ').trim() || me.phone : '';

  return (
    <Stack sx={{ gap: 3, maxWidth: DASHBOARD_MAX_WIDTH, mx: 'auto', width: '100%' }}>
      <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center' }}>
        {meLoading ? (
          <>
            <Skeleton variant="circular" width={44} height={44} />
            <Skeleton variant="text" width={160} height={32} />
          </>
        ) : (
          <>
            <Avatar sx={{ width: 44, height: 44, bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)', fontWeight: 700 }}>
              {(displayName || '؟').charAt(0)}
            </Avatar>
            <Stack sx={{ gap: 0.5 }}>
              <Typography variant="h6" component="h1" sx={{ fontWeight: 700 }}>
                {t('greeting', { name: displayName })}
              </Typography>
              {!verification.isLoading ? <TrustBadge state={ownBadgeState(verification.data)} /> : null}
            </Stack>
          </>
        )}
      </Stack>

      <NextVisitCard />
      <RequestsStrip />
      <EarningsSnapshotCard />
      <DashboardActivationSlot />
      <NotificationsEntryRow />
    </Stack>
  );
}

/** First actionable session from `useTodaySessions` + a display-only "time until" line. */
function NextVisitCard() {
  const t = useTranslations('dashboard');
  const locale = useLocale();
  const router = useRouter();
  const { data, isLoading, isError, refetch } = useTodaySessions();

  if (isLoading) return <Skeleton variant="rounded" height={140} />;
  if (isError) {
    return <ErrorState message={t('next_visit_error')} retryLabel={t('retry')} onRetry={() => refetch()} />;
  }

  const items = data?.items ?? [];
  const next = items.find((item) => item.status === 'scheduled' || item.status === 'in_progress');

  if (!next) {
    return <EmptyState icon="visits" title={t('next_visit_empty')} />;
  }

  const timeFmt = new Intl.DateTimeFormat(localeTag(locale), { hour: '2-digit', minute: '2-digit' });
  const timeRangeLabel = `${timeFmt.format(new Date(`${next.scheduledDate}T${next.scheduledTimeStart}`))} – ${timeFmt.format(new Date(`${next.scheduledDate}T${next.scheduledTimeEnd}`))}`;
  const timeUntil = formatRelativeTime(`${next.scheduledDate}T${next.scheduledTimeStart}`, locale, formatShamsiDate);

  return (
    <SurfaceCard data-widget="next-visit">
      <Stack sx={{ gap: 1.25 }}>
        <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
          <AppIcon icon="visits" size={20} color="var(--bal-primary)" />
          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
            {t('next_visit_title')}
          </Typography>
        </Stack>
        <Stack sx={{ gap: 0.25 }}>
          <Typography variant="body1" sx={{ fontWeight: 500 }}>
            {next.patientName}
          </Typography>
          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
            <Typography component="span" dir="ltr" sx={{ fontVariantNumeric: 'tabular-nums' }}>
              {timeRangeLabel}
            </Typography>
            {timeUntil ? ` · ${t('next_visit_starts_in', { relative: timeUntil })}` : ''}
          </Typography>
        </Stack>
        <AppButton
          variant="contained"
          color="secondary"
          startIcon="check_in"
          onClick={() => router.push(`/${locale}${ROUTES.NURSE_VISITS}`)}
          sx={{ alignSelf: 'flex-start' }}
        >
          {t('next_visit_cta')}
        </AppButton>
      </Stack>
    </SurfaceCard>
  );
}

/** The most time-critical widget: pending-request count + the most urgent countdown, inline into detail. */
function RequestsStrip() {
  const t = useTranslations('dashboard');
  const tb = useTranslations('booking');
  const locale = useLocale();
  const router = useRouter();
  const { data, isLoading, isError, refetch } = useNurseRequestInbox();

  if (isLoading) return <Skeleton variant="rounded" height={140} />;
  if (isError) {
    return <ErrorState message={t('requests_strip_error')} retryLabel={t('retry')} onRetry={() => refetch()} />;
  }

  const items = data?.items ?? [];
  const total = data?.total ?? 0;

  if (items.length === 0) {
    return <EmptyState icon="requests" title={t('requests_strip_empty')} />;
  }

  const mostUrgent = items[0];

  return (
    <SurfaceCard data-widget="requests-strip">
      <Stack sx={{ gap: 1.25 }}>
        <Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'space-between' }}>
          <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
            <AppIcon icon="requests" size={20} color="var(--bal-secondary)" />
            <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
              {t('requests_strip_title', { count: total })}
            </Typography>
          </Stack>
          <AppButton
            variant="text"
            color="primary"
            endIcon="requests"
            onClick={() => router.push(`/${locale}${ROUTES.NURSE_REQUESTS}`)}
          >
            {t('requests_strip_cta')}
          </AppButton>
        </Stack>

        <Stack
          direction="row"
          sx={{ gap: 1.5, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}
        >
          <Stack sx={{ gap: 0.25, minWidth: 0 }}>
            <Typography variant="body1" sx={{ fontWeight: 500 }}>
              {mostUrgent.counterpartyName}
            </Typography>
            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
              {formatShamsiDate(mostUrgent.requestedDate, locale)}
            </Typography>
          </Stack>
          <CountdownTimer
            deadlineIso={mostUrgent.nurseResponseDeadlineAt}
            elapsedText={tb('response_elapsed')}
            warnThresholdSeconds={WARN_THRESHOLD_SECONDS}
            urgentThresholdSeconds={URGENT_THRESHOLD_SECONDS}
            coarseLabel={(minutes) => coarseResponseLabel(minutes, tb)}
            size="sm"
          />
        </Stack>

        <AppButton
          variant="outlined"
          color="primary"
          endIcon="requests"
          onClick={() => router.push(`/${locale}${ROUTES.NURSE_REQUESTS}/${mostUrgent.id}`)}
          sx={{ alignSelf: 'flex-start' }}
        >
          {t('requests_strip_open')}
        </AppButton>
      </Stack>
    </SurfaceCard>
  );
}

/** A compact two-stat row (net payable + eligible) — never clamps a negative net balance. */
function EarningsSnapshotCard() {
  const t = useTranslations('dashboard');
  const tp = useTranslations('payouts');
  const locale = useLocale();
  const router = useRouter();
  const { data, isLoading, isError, refetch } = useNurseEarningsBalance();

  if (isLoading) return <Skeleton variant="rounded" height={120} />;
  if (isError) {
    return <ErrorState message={t('earnings_snapshot_error')} retryLabel={t('retry')} onRetry={() => refetch()} />;
  }
  if (!data) return null;

  const net = parseIrr(data.netPayableBalanceIrr);
  const isOwed = net < BigInt(0);
  const magnitude = isOwed ? -net : net;

  return (
    <SurfaceCard data-widget="earnings-snapshot">
      <Stack sx={{ gap: 1.5 }}>
        <Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'space-between' }}>
          <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
            <AppIcon icon="earnings" size={20} color="var(--bal-primary)" />
            <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
              {t('earnings_snapshot_title')}
            </Typography>
          </Stack>
          <AppButton
            variant="text"
            color="primary"
            endIcon="earnings"
            onClick={() => router.push(`/${locale}${ROUTES.NURSE_EARNINGS}`)}
          >
            {t('earnings_snapshot_cta')}
          </AppButton>
        </Stack>
        <Box sx={{ display: 'grid', gap: 1.5, gridTemplateColumns: '1fr 1fr' }}>
          <Stack sx={{ gap: 0.25 }}>
            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
              {isOwed ? tp('balance_owed_label') : tp('balance_net_label')}
            </Typography>
            <Money amountIrr={String(magnitude)} size="lg" tone={isOwed ? 'error' : 'emphasis'} sx={{ fontWeight: 800 }} />
          </Stack>
          <Stack sx={{ gap: 0.25 }}>
            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
              {tp('bucket_eligible')}
            </Typography>
            <Money amountIrr={data.eligibleTotalIrr} size="lg" sx={{ fontWeight: 800 }} />
          </Stack>
        </Box>
      </Stack>
    </SurfaceCard>
  );
}

/** The unread-count entry row — the bell in the shell chrome is Phase 2's; this is a dashboard shortcut. */
function NotificationsEntryRow() {
  const t = useTranslations('dashboard');
  const locale = useLocale();
  const unread = useUnreadCount();

  return (
    <AppLink to={`/${locale}${ROUTES.NURSE_NOTIFICATIONS}`} color="inherit" underline="none" sx={{ display: 'block' }}>
      <SurfaceCard data-widget="notifications-entry">
        <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center', justifyContent: 'space-between' }}>
          <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
            <AppIcon icon="notifications" size={20} color="var(--bal-primary)" />
            <Typography variant="body1" sx={{ fontWeight: 500 }}>
              {t('notifications_entry_title')}
            </Typography>
          </Stack>
          <Typography
            variant="body2"
            // --bal-secondary-dark, not --bal-secondary: the plain terracotta fails AA contrast for
            // small text on a light surface (frontend-designer skill §2) — this is body copy, not an icon.
            sx={{ color: unread > 0 ? 'var(--bal-secondary-dark)' : 'text.secondary', fontWeight: unread > 0 ? 700 : 400 }}
          >
            {unread > 0 ? t('notifications_entry_unread', { count: unread }) : t('notifications_entry_empty')}
          </Typography>
        </Stack>
      </SurfaceCard>
    </AppLink>
  );
}