import React from 'react';
import { ClipboardPlus, ListTodo, TreePalm } from 'lucide-react';
import { Parasol } from '../../../components/ui/parasol';
import type { ClinicalTier } from '../../../utils/roleTier';
import { statusToBucket, type QueueItem } from './encounterLifecycle';
import type { OwedWork, OwedWorkRow } from './owedWork';

type OwedId = OwedWorkRow['id'];

export type OverviewEmpty =
  | { kind: 'ready' }
  | { kind: 'caught-up' }
  | { kind: 'owed'; owed: { id: OwedId; count: number }[] }
  | { kind: 'nothing-ahead' };

/**
 * What the overview's panel says while nobody is selected. Nothing while the day is unread; an
 * all-clear only when the owed-work read has actually come back empty.
 */
export const overviewEmptyState = (state: {
  loading: boolean;
  items: QueueItem[];
  tier: ClinicalTier;
  work: OwedWork;
}): OverviewEmpty | undefined => {
  if (state.loading) return undefined;
  if (state.items.some((item) => statusToBucket(item.status, state.tier) !== 'seen')) return { kind: 'ready' };
  const owed = (['notes', 'messages', 'results'] as OwedId[])
    .map((id) => ({ id, count: state.work.rows.find((row) => row.id === id)?.count ?? 0 }))
    .filter((row) => row.count > 0);
  if (owed.length > 0) return { kind: 'owed', owed };
  return state.work.nothingOwed ? { kind: 'caught-up' } : { kind: 'nothing-ahead' };
};

const owedPhrase = ({ id, count }: { id: OwedId; count: number }): string => {
  if (id === 'notes') return count === 1 ? '1 note that needs submitting' : `${count} notes that need submitting`;
  if (id === 'messages') return count === 1 ? '1 message that needs a reply' : `${count} messages that need a reply`;
  return count === 1 ? '1 result to review' : `${count} results to review`;
};

const ICON_STROKE = 0.7;

interface Props {
  loading: boolean;
  items: QueueItem[];
  tier: ClinicalTier;
  work: OwedWork;
  onOpenOwed: (id: OwedId) => void;
}

export const OverviewEmptyState: React.FC<Props> = ({ loading, items, tier, work, onOpenOwed }) => {
  const state = overviewEmptyState({ loading, items, tier, work });
  if (!state) return null;

  let message: React.ReactNode;
  let icons: React.ReactNode = null;
  let duo = false;
  if (state.kind === 'ready') {
    message = 'Ready to start your next encounter';
    icons = <ClipboardPlus strokeWidth={ICON_STROKE} data-icon="clipboard-plus" />;
  } else if (state.kind === 'caught-up') {
    message = 'You’re all caught up for the day!';
    duo = true;
    icons = (
      <>
        <TreePalm strokeWidth={ICON_STROKE} data-icon="tree-palm" />
        <Parasol strokeWidth={ICON_STROKE} data-icon="parasol" />
      </>
    );
  } else if (state.kind === 'owed') {
    message = (
      <>
        No more visits scheduled for today but you have{' '}
        {state.owed.map((row, index) => (
          <React.Fragment key={row.id}>
            {index > 0 && (index === state.owed.length - 1 ? ' and ' : ', ')}
            <button type="button" className="ak-clinday__emptylink" onClick={() => onOpenOwed(row.id)}>
              {owedPhrase(row)}
            </button>
          </React.Fragment>
        ))}
      </>
    );
    icons = <ListTodo strokeWidth={ICON_STROKE} data-icon="list-todo" />;
  } else {
    message = 'No more visits scheduled for today.';
  }

  return (
    <div className="ak-clinday__emptypanel">
      <div className="ak-clinday__emptystate">
        <p className="ak-clinday__emptymsg">{message}</p>
        {icons && (
          <div className={`ak-clinday__emptyicon${duo ? ' ak-clinday__emptyicon--duo' : ''}`} aria-hidden="true">
            {icons}
          </div>
        )}
      </div>
    </div>
  );
};