"use no memo"; // widget trees are built by calling the component as a plain function — the React Compiler must not transform it
// Home-screen widget: the same top-three "Next up" list as the home screen.
// Built only from react-native-android-widget primitives (no RN views, no
// hooks) — it renders to Android RemoteViews in a headless task.
//
// Interactions mirror the app: tap the checkbox to complete, tap the row to
// open Clarify, tap ＋ to capture, tap anywhere else to open the app.
import { FlexWidget, TextWidget } from "react-native-android-widget";
import { dueMeta, type DueTone } from "../lib/dates";
import { formatEstimate, PRIORITY_COLOR } from "../lib/priority";
import { C } from "../lib/theme";
import type { Task } from "../lib/types";

const DUE_COLOR: Record<DueTone, `#${string}`> = { overdue: C.danger, today: C.warn, later: C.muted };

function Row({ task }: { task: Task }) {
  const due = task.due_date ? dueMeta(task.due_date) : null;
  // One line per row so three rows fit the 2-cell height: right-side meta is
  // the due label when there is one, otherwise context/estimate.
  const side = due ? due.label : [task.context, formatEstimate(task.estimate_min)].filter(Boolean).join(" · ");
  return (
    <FlexWidget
      style={{ width: "match_parent", flex: 1, flexDirection: "row", alignItems: "center" }}
      clickAction="OPEN_URI"
      clickActionData={{ uri: `gtd://task/${task.id}` }}
    >
      <FlexWidget
        clickAction="COMPLETE_TASK"
        clickActionData={{ taskId: task.id }}
        accessibilityLabel={`Complete ${task.title}`}
        style={{ width: 32, height: 32, alignItems: "center", justifyContent: "center" }}
      >
        <FlexWidget
          style={{ width: 19, height: 19, borderRadius: 6, borderWidth: 2, borderColor: PRIORITY_COLOR[task.priority] }}
        />
      </FlexWidget>
      <FlexWidget style={{ flex: 1, marginLeft: 6 }}>
        <TextWidget text={task.title} truncate="END" maxLines={1} style={{ fontSize: 15, color: C.text }} />
      </FlexWidget>
      {!!side && <TextWidget text={side} truncate="END" maxLines={1} style={{ fontSize: 11, color: due ? DUE_COLOR[due.tone] : C.muted, marginLeft: 8 }} />}
    </FlexWidget>
  );
}

export function NextUpWidget({ tasks, totalNext, overdueCount }: { tasks: Task[]; totalNext: number; overdueCount: number }) {
  return (
    <FlexWidget
      clickAction="OPEN_APP"
      style={{
        width: "match_parent",
        height: "match_parent",
        flexDirection: "column",
        backgroundColor: C.surface,
        borderRadius: 24,
        paddingHorizontal: 16,
        paddingVertical: 12,
      }}
    >
      <FlexWidget
        style={{ width: "match_parent", flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }}
      >
        <FlexWidget style={{ flexDirection: "row", alignItems: "center" }}>
          <TextWidget text="Next up" style={{ fontSize: 13, fontWeight: "600", letterSpacing: 0.3, color: C.textSecondary }} />
          {totalNext > tasks.length && (
            <TextWidget text={`  +${totalNext - tasks.length} more`} style={{ fontSize: 12, color: C.muted }} />
          )}
          {overdueCount > 0 && (
            <TextWidget
              text={`  ·  ${overdueCount} overdue`}
              clickAction="OPEN_URI"
              clickActionData={{ uri: "gtd://today" }}
              style={{ fontSize: 12, color: C.danger }}
            />
          )}
        </FlexWidget>
        <FlexWidget
          clickAction="OPEN_URI"
          clickActionData={{ uri: "gtd://add" }}
          accessibilityLabel="Add task"
          style={{ width: 28, height: 28, borderRadius: 14, backgroundColor: C.accent, alignItems: "center", justifyContent: "center" }}
        >
          <TextWidget text="＋" style={{ fontSize: 16, color: C.onAccent }} />
        </FlexWidget>
      </FlexWidget>
      {tasks.length === 0 ? (
        <FlexWidget style={{ width: "match_parent", flex: 1, alignItems: "center", justifyContent: "center" }}>
          <TextWidget text="Nothing next. Tap ＋ to add." style={{ fontSize: 14, color: C.muted }} />
        </FlexWidget>
      ) : (
        <FlexWidget style={{ width: "match_parent", flex: 1, flexDirection: "column" }}>
          {tasks.map((t) => (
            <Row key={t.id} task={t} />
          ))}
        </FlexWidget>
      )}
    </FlexWidget>
  );
}