import { useMemo, useCallback } from 'react';
import type { LayoutNode, PanelComponents } from 'officerdev';
import { WorkspaceLayout } from 'officerdev';
import { useIsMobile } from 'hooks/useIsMobile';
import { useGlobal } from 'hooks/useGlobal';
import { defaultLayout } from './defaultLayout';
import { EmailList } from './EmailList';
import { EmailReader } from './EmailReader';

const PROMPT_PREFIX = `You are an email assistant. The user has a local SQLite email database available via the "email-db" tool — use it for all email queries (search, count, stats, aggregations, deletions) unless the user explicitly asks you to use Gmail. Do not use the Gmail integration for questions about existing emails.`;

export const EmailScreen = () => {
  const isMobile = useIsMobile();
  const [selectedId, setSelectedId] = useGlobal<string | null>('EMAIL_SELECTED', null);

  const components: PanelComponents = useMemo(
    () => ({
      'email-list': EmailList,
      'email-reader': EmailReader,
    }),
    [],
  );

  const mobilePanelId = isMobile && selectedId ? 'email-reader' : undefined;
  const onMobileBack = useCallback(() => setSelectedId(null), [setSelectedId]);

  return (
    <div className="h-full w-full pt-2">
      <WorkspaceLayout
        layout={defaultLayout}
        onLayoutChange={() => {}}
        components={components}
        workspaceId="email"
        promptPrefix={PROMPT_PREFIX}
        isMobile={isMobile}
        mobilePanelId={mobilePanelId}
        onMobileBack={mobilePanelId ? onMobileBack : null}
      />
    </div>
  );
};
