import { i18n } from "@lingui/core";
import { Plural, Trans, useLingui } from "@lingui/react/macro";
import type { Bot, CoachToday, Group, HabitToday, RunActivityRow } from "@rakazo/contracts";
import { botColors } from "@rakazo/ui-tokens";
import { BotAvatar, Button, EvooMascot, GroupAvatar } from "@rakazo/ui-web";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { CoachRhythmControl } from "../components/heute/CoachRhythmControl";
import { HeuteCoach } from "../components/heute/HeuteCoach";
import { runActivityLabel } from "../lib/agent-activity";
import type { DoingItem, DoneItem, JetztItem } from "../lib/heute-brief";
import {
  buildHeuteBrief,
  cleanBriefPreview,
  coachRefreshSignal,
  formatLocalDate,
  withHabitDone,
} from "../lib/heute-brief";
import { localizedPreview } from "../lib/onboarding-copy";
import { rpc } from "../lib/rpc";

type HeuteBriefProps = {
  bots: Bot[];
  groups: Group[];
  onOpenBot: (botId: string, spaceId: string) => void;
  onOpenGroup: (groupId: string, spaceId: string) => void;
  onOpenRun: (run: RunActivityRow) => void;
  onStartChat: () => void;
};

const DATE_LABEL: Intl.DateTimeFormatOptions = { weekday: "long", day: "numeric", month: "long" };

export function HeuteBrief({
  bots,
  groups,
  onOpenBot,
  onOpenGroup,
  onOpenRun,
  onStartChat,
}: HeuteBriefProps) {
  const [activeRuns, setActiveRuns] = useState<RunActivityRow[]>([]);
  const [recentRuns, setRecentRuns] = useState<RunActivityRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [coach, setCoach] = useState<CoachToday | null>(null);
  const [coachSettled, setCoachSettled] = useState(false);
  const latestCoachRequest = useRef(0);

  useEffect(() => {
    let cancelled = false;
    let timer: number | undefined;

    const tick = async () => {
      try {
        const [active, recent] = await Promise.all([
          rpc.runs.list({ filter: "active" }),
          rpc.runs.list({ filter: "recent" }),
        ]);
        if (cancelled) return;
        setActiveRuns(active.runs);
        setRecentRuns(recent.runs);
      } catch {
        if (cancelled) return;
      } finally {
        if (!cancelled) {
          setLoading(false);
          timer = window.setTimeout(() => void tick(), 15_000);
        }
      }
    };

    void tick();
    return () => {
      cancelled = true;
      if (timer !== undefined) window.clearTimeout(timer);
    };
  }, []);

  const refreshCoach = useCallback(async () => {
    const request = ++latestCoachRequest.current;
    try {
      const today = await rpc.coach.today();
      if (request === latestCoachRequest.current) setCoach(today);
    } catch {
      // Keep the last view; the next refresh retries.
    } finally {
      setCoachSettled(true);
    }
  }, []);

  // `coachSignal` is the trigger: a finished run may have logged a check-in or written the brief.
  const coachSignal = useMemo(() => coachRefreshSignal(recentRuns), [recentRuns]);
  useEffect(() => {
    void refreshCoach();
  }, [refreshCoach, coachSignal]);

  useEffect(() => {
    const onVisible = () => {
      if (document.visibilityState === "visible") void refreshCoach();
    };
    document.addEventListener("visibilitychange", onVisible);
    return () => {
      document.removeEventListener("visibilitychange", onVisible);
      // Ignore responses that arrive after unmount.
      latestCoachRequest.current += 1;
    };
  }, [refreshCoach]);

  const setHabitDone = useCallback(
    async (habit: HabitToday, done: boolean) => {
      if (!coach) return;
      setCoach((current) => (current ? withHabitDone(current, habit.id, done) : current));
      latestCoachRequest.current += 1;
      try {
        await rpc.coach.checkIns.log({ kind: "habit", habitId: habit.id, date: coach.date, done });
      } finally {
        void refreshCoach();
      }
    },
    [coach, refreshCoach],
  );

  const brief = useMemo(
    () =>
      buildHeuteBrief({
        bots,
        groups,
        activeRuns,
        recentRuns,
      }),
    [activeRuns, bots, groups, recentRuns],
  );

  const botColorById = useMemo(() => new Map(bots.map((bot) => [bot.id, bot.color])), [bots]);

  const locale = i18n.locale || "de";
  const dateLabel = coach
    ? formatLocalDate(coach.date, locale, DATE_LABEL)
    : new Date().toLocaleDateString(locale, DATE_LABEL);
  const hasCoachContent = Boolean(
    coach && (coach.brief || coach.habits.length > 0 || coach.goals.length > 0),
  );
  const hasContent =
    hasCoachContent || brief.needsYou.length > 0 || brief.doing.length > 0 || brief.done.length > 0;

  return (
    <div className="flex min-h-0 flex-1 flex-col overflow-hidden" data-testid="heute-brief">
      <div className="flex items-start justify-between gap-3 border-b border-border px-4 py-5 md:px-8 lg:px-10">
        <div className="min-w-0">
          <h1 className="text-ui-title font-semibold tracking-tight text-foreground">
            {dateLabel}
          </h1>
          <p className="mt-1 text-ui-body text-muted-foreground" data-testid="heute-status">
            <StatusLine
              actionCount={brief.actionCount}
              loading={loading}
              doingCount={brief.doing.length}
            />
          </p>
        </div>
        <CoachRhythmControl />
      </div>

      <div className="rk-scroll flex-1 overflow-y-auto px-4 py-6 md:px-8 lg:px-10">
        {(loading || !coachSettled) && !hasContent ? (
          <p className="text-ui-body text-muted-foreground">
            <Trans>Loading…</Trans>
          </p>
        ) : !hasContent ? (
          <EmptyDay onStartChat={onStartChat} hasBots={bots.length > 0} />
        ) : (
          <div className="mx-auto flex w-full max-w-2xl flex-col gap-8 pb-4">
            {coach ? <HeuteCoach today={coach} onHabitDone={setHabitDone} /> : null}

            {brief.needsYou.length > 0 ? (
              <section data-testid="heute-needs-you">
                <h2 className="rk-shell-section-label mb-2 px-0.5">
                  <Trans>Needs you</Trans>
                </h2>
                <div className="flex flex-col gap-1">
                  {brief.needsYou.map((item) => (
                    <NeedsYouRow
                      key={jetztRowKey(item)}
                      item={item}
                      botColorById={botColorById}
                      onOpenBot={onOpenBot}
                      onOpenGroup={onOpenGroup}
                      onOpenRun={onOpenRun}
                    />
                  ))}
                </div>
                {brief.actionCount > brief.needsYou.length ? (
                  <p className="mt-2 px-0.5 text-ui-label text-muted-foreground">
                    <Plural
                      value={brief.actionCount - brief.needsYou.length}
                      one="# more waiting"
                      other="# more waiting"
                    />
                  </p>
                ) : null}
              </section>
            ) : null}

            {brief.doing.length > 0 ? (
              <section data-testid="heute-doing">
                <h2 className="rk-shell-section-label mb-2 px-0.5">
                  <Trans>Doing</Trans>
                </h2>
                <div className="flex flex-col gap-1">
                  {brief.doing.map((item) => (
                    <DoingRow
                      key={`doing:${item.run.runId}`}
                      item={item}
                      botColorById={botColorById}
                      onOpenRun={onOpenRun}
                    />
                  ))}
                </div>
              </section>
            ) : null}

            {brief.done.length > 0 ? (
              <section data-testid="heute-done">
                <h2 className="rk-shell-section-label mb-2 px-0.5">
                  <Trans>Done</Trans>
                </h2>
                <div className="flex flex-col gap-1">
                  {brief.done.map((item) => (
                    <DoneRow
                      key={`done:${item.run.runId}`}
                      item={item}
                      botColorById={botColorById}
                      onOpenRun={onOpenRun}
                    />
                  ))}
                </div>
              </section>
            ) : null}
          </div>
        )}
      </div>
    </div>
  );
}

function StatusLine({
  actionCount,
  doingCount,
  loading,
}: {
  actionCount: number;
  doingCount: number;
  loading: boolean;
}) {
  if (loading && actionCount === 0 && doingCount === 0) {
    return <Trans>Loading…</Trans>;
  }
  if (actionCount > 0) {
    return <Plural value={actionCount} one="# thing needs you" other="# things need you" />;
  }
  if (doingCount > 0) {
    return <Plural value={doingCount} one="# Oo is working" other="# Oos are working" />;
  }
  return <Trans>All quiet</Trans>;
}

function EmptyDay({ onStartChat, hasBots }: { onStartChat: () => void; hasBots: boolean }) {
  return (
    <div
      className="mx-auto flex w-full max-w-md flex-col items-center gap-5 py-16 text-center"
      data-testid="heute-empty"
    >
      <EvooMascot size={72} pose="greeting" />
      <div className="space-y-2">
        <p className="text-ui-body-lg font-medium text-foreground">
          <Trans>Quiet day so far</Trans>
        </p>
        <p className="text-ui-body text-muted-foreground">
          <Trans>Start a conversation with an Oo when you are ready.</Trans>
        </p>
      </div>
      <Button type="button" onClick={onStartChat} data-testid="heute-start-chat">
        {hasBots ? <Trans>Open a chat</Trans> : <Trans>Create an Oo</Trans>}
      </Button>
    </div>
  );
}

function ActionableChip({ label }: { label: string }) {
  return (
    <span className="shrink-0 rounded-full border border-warning/30 bg-warning/10 px-2 py-0.5 text-ui-label font-medium text-foreground dark:text-warning">
      {label}
    </span>
  );
}

function NeedsYouRow({
  item,
  botColorById,
  onOpenBot,
  onOpenGroup,
  onOpenRun,
}: {
  item: JetztItem;
  botColorById: Map<string, string>;
  onOpenBot: (botId: string, spaceId: string) => void;
  onOpenGroup: (groupId: string, spaceId: string) => void;
  onOpenRun: (run: RunActivityRow) => void;
}) {
  const { t } = useLingui();

  if (item.kind === "run") {
    const run = item.run;
    const title = run.groupName ? `${run.botName} · ${run.groupName}` : run.botName;
    const subtitle = run.promptSnippet || runActivityLabel(run.status);
    const label = t`${title}, ${runActivityLabel(run.status)}`;
    return (
      <button
        type="button"
        aria-label={label}
        data-testid={`heute-needs-you-run-${run.runId}`}
        onClick={() => onOpenRun(run)}
        className="flex w-full items-center gap-3 rounded-2xl border border-transparent px-3 py-3 text-start transition-colors hover:border-border hover:bg-accent"
      >
        <BotAvatar
          color={botColorById.get(run.botId) ?? botColors[3]}
          identity={run.botId}
          size={40}
          status={run.status}
        />
        <div className="min-w-0 flex-1">
          <div className="truncate text-ui-body font-semibold text-foreground">{title}</div>
          <div className="mt-0.5 truncate text-ui-body-sm text-muted-foreground">{subtitle}</div>
        </div>
        <ActionableChip label={t`Needs you`} />
      </button>
    );
  }

  const { chatKind, chat } = item;
  const title = chat.name;
  const preview = cleanBriefPreview(localizedPreview(chat)) || t`Unread reply`;
  const label =
    chatKind === "bot" ? t`1:1 conversation with ${title}` : t`Group conversation ${title}`;
  return (
    <button
      type="button"
      aria-label={label}
      data-testid={`heute-needs-you-unread-${chatKind}-${chat.id}`}
      onClick={() =>
        chatKind === "bot" ? onOpenBot(chat.id, chat.spaceId) : onOpenGroup(chat.id, chat.spaceId)
      }
      className="flex w-full items-center gap-3 rounded-2xl border border-transparent px-3 py-3 text-start transition-colors hover:border-border hover:bg-accent"
    >
      {chatKind === "bot" ? (
        <BotAvatar
          color={(chat as Bot).color}
          identity={chat.id}
          size={40}
          status={(chat as Bot).status}
        />
      ) : (
        <GroupAvatar members={(chat as Group).members} size={40} />
      )}
      <div className="min-w-0 flex-1">
        <div className="truncate text-ui-body font-semibold text-foreground">{title}</div>
        <div className="mt-0.5 truncate text-ui-body-sm text-muted-foreground">{preview}</div>
      </div>
      <ActionableChip label={t`Unread`} />
    </button>
  );
}

function DoingRow({
  item,
  botColorById,
  onOpenRun,
}: {
  item: DoingItem;
  botColorById: Map<string, string>;
  onOpenRun: (run: RunActivityRow) => void;
}) {
  const { t } = useLingui();
  const run = item.run;
  const title = run.groupName ? `${run.botName} · ${run.groupName}` : run.botName;
  const subtitle = run.promptSnippet || runActivityLabel(run.status);
  const label = t`${title}, ${runActivityLabel(run.status)}`;

  return (
    <button
      type="button"
      aria-label={label}
      data-testid={`heute-doing-run-${run.runId}`}
      onClick={() => onOpenRun(run)}
      className="flex w-full items-center gap-3 rounded-2xl border border-transparent px-3 py-3 text-start transition-colors hover:border-border hover:bg-accent"
    >
      <BotAvatar
        color={botColorById.get(run.botId) ?? botColors[3]}
        identity={run.botId}
        size={40}
        status={run.status}
      />
      <div className="min-w-0 flex-1">
        <div className="truncate text-ui-body font-medium text-foreground">{title}</div>
        <div className="mt-0.5 truncate text-ui-body-sm text-muted-foreground">{subtitle}</div>
      </div>
      <span className="shrink-0 text-ui-label text-muted-foreground">
        {runActivityLabel(run.status)}
      </span>
    </button>
  );
}

function DoneRow({
  item,
  botColorById,
  onOpenRun,
}: {
  item: DoneItem;
  botColorById: Map<string, string>;
  onOpenRun: (run: RunActivityRow) => void;
}) {
  const { t } = useLingui();
  const run = item.run;
  const title = run.groupName ? `${run.botName} · ${run.groupName}` : run.botName;
  const subtitle = run.promptSnippet || runActivityLabel(run.status);
  const label = t`${title}, ${runActivityLabel(run.status)}`;

  return (
    <button
      type="button"
      aria-label={label}
      data-testid={`heute-done-run-${run.runId}`}
      onClick={() => onOpenRun(run)}
      className="flex w-full items-center gap-3 rounded-2xl border border-transparent px-3 py-3 text-start transition-colors hover:border-border hover:bg-accent"
    >
      <BotAvatar
        color={botColorById.get(run.botId) ?? botColors[3]}
        identity={run.botId}
        size={40}
      />
      <div className="min-w-0 flex-1">
        <div className="truncate text-ui-body font-medium text-foreground">{title}</div>
        <div className="mt-0.5 truncate text-ui-body-sm text-muted-foreground">{subtitle}</div>
      </div>
      <span className="shrink-0 text-ui-label text-success">{runActivityLabel(run.status)}</span>
    </button>
  );
}

function jetztRowKey(item: JetztItem): string {
  if (item.kind === "run") return `run:${item.run.runId}`;
  return `unread:${item.chatKind}:${item.chat.id}`;
}