/** @jsxImportSource react */
import type { ReactElement } from 'react';
import { useTheme } from '@lilith/ui-theme';
import { useProjectContext } from '../useProjectContext';
import { useIncomeSummary } from '@features/income/frontend/useIncome';
import { useTasks } from '@features/tasks/frontend/useTasks';
import { DEFAULT_CURRENCY, TaskStatus } from '@life-platform/shared';
import { formatCurrency } from '@lilith/format';
import { StatsBar, StatPill, PillValue, PillLabel } from './header-styles';

export default function ClientWorkHeader(): ReactElement | null {
  const { project } = useProjectContext();
  const { theme } = useTheme();
  const accent = project.color || theme.colors.primary.main;

  const { data: monthSummary } = useIncomeSummary({
    period: 'month',
    projectId: project.id,
  });

  const { data: tasksResult } = useTasks({
    projectId: project.id,
    status: `${TaskStatus.Todo},${TaskStatus.InProgress}`,
    limit: 100,
  });

  const tasks = tasksResult?.data ?? [];
  const monthTotal = monthSummary?.total ?? '0';
  const currency = monthSummary?.currency ?? DEFAULT_CURRENCY;

  return (
    <StatsBar>
      <StatPill accent={accent}>
        <PillValue accent={accent}>{formatCurrency(monthTotal, currency, { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</PillValue>
        <PillLabel>MTD</PillLabel>
      </StatPill>
      <StatPill accent={accent}>
        <PillValue accent={accent}>{tasks.length}</PillValue>
        <PillLabel>Active</PillLabel>
      </StatPill>
    </StatsBar>
  );
}