import { useMemo, useCallback, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router';
import type { LayoutNode, PanelComponents } from 'officerdev';
import { WorkspaceView } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
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 { emailId } = useParams<{ emailId?: string }>();
  const navigate = useNavigate();
  const [selectedId, setSelectedId] = useGlobal<string | null>('EMAIL_SELECTED', null);

  // Sync URL param → global state
  useEffect(() => {
    if (emailId && emailId !== selectedId) setSelectedId(emailId);
  }, [emailId]);

  // Sync global state → URL
  useEffect(() => {
    if (selectedId && selectedId !== emailId) {
      navigate(`/email/${selectedId}`, { replace: true });
    } else if (!selectedId && emailId) {
      navigate('/email', { replace: true });
    }
  }, [selectedId]);
  const workspace = useDashboardState<LayoutNode>('screens/email', defaultLayout);

  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">
      <WorkspaceView
        workspace={workspace}
        locked
        components={components}
        promptPrefix={PROMPT_PREFIX}
        mobilePanelId={mobilePanelId}
        onMobilePanelChange={mobilePanelId ? () => onMobileBack() : undefined}
      />
    </div>
  );
};