import { useState } from "react";
import {
  createWebStudioComponent,
  tryConform,
  useLiveField,
  useQuery,
  type ObjectRef,
  type QueryState,
  type ReactComponentImplementationProps,
} from "@quixos/web-studio-react-runtime";
import {
  queries,
  reactInterfaces,
  type QueryResults,
  type QueryVariables,
  type ReactResults,
} from "./gen/react-props.gen.js";
import "./tracker.css";

type Tag = QueryResults["Catalog"]["root"]["tags"]["entries"][number]["node"];
type TagChoice = { id: string; name: string; color: string };
const TaskEditor = createWebStudioComponent<ObjectRef<"atom:task">, { tagChoices: TagChoice[] }, never>({
  expectedAtomId: "atom:task",
});
type Props = ReactComponentImplementationProps<ReactResults["propsGet"], { compact?: boolean }, never>;
type ListProps = {
  root: string;
  variables: QueryVariables["Tasks"];
  selected: string | null;
  select(id: string): void;
  next(cursor: string | null): void;
  reset(): void;
};
function Rows({ result, selected, select, next, reset }: ListProps & { result: QueryState<QueryResults["Tasks"]> }) {
  if (result.status === "error")
    return (
      <div role="alert" className="tt-notice">
        {result.error.message}
        <button onClick={reset}>Return to first page</button>
      </div>
    );
  if (result.status !== "ready") return <p className="tt-notice">Loading tasks…</p>;
  const page = result.data.root.tasks;
  return (
    <>
      <div className="tt-rows" aria-label="Tasks">
        {page.entries.length === 0 && <p className="tt-notice">No tasks match this view.</p>}
        {page.entries.map(({ key, node: task }) => (
          <button
            className={"tt-row" + (selected === task._qx.ref.$quixosRef ? " is-selected" : "")}
            aria-pressed={selected === task._qx.ref.$quixosRef}
            key={key}
            onClick={() => select(task._qx.ref.$quixosRef)}
          >
            <span className={"tt-status status-" + task.status.toLowerCase()}>
              {task.status === "DONE" ? "✓" : task.status === "ARCHIVED" ? "—" : "○"}
            </span>
            <span className="tt-row-body">
              <strong>{task.title}</strong>
              <span className="tt-row-meta">
                {task.dueDate || "No due date"}
                {task.repeatDays > 0 ? ` · Every ${task.repeatDays}d` : ""}
                {task.estimatedHours > 0 ? ` · ${task.estimatedHours}h` : ""}
                {task.priority === "HIGH" ? " · High priority" : ""}
              </span>
              <span className="tt-tag-line">
                {task.tags.entries.map(({ node: tag }) => (
                  <span className="tt-tag" key={tag._qx.ref.$quixosRef}>
                    <i style={{ background: tag.color }} />
                    {tag.name}
                  </span>
                ))}
              </span>
              {task._qx.relations.completions.aggregate.count > 0n && (
                <span className="tt-row-meta">
                  {String(task._qx.relations.completions.aggregate.count)} completions
                </span>
              )}
            </span>
          </button>
        ))}
      </div>
      <div className="tt-page">
        <button onClick={reset}>First page</button>
        {page.pageInfo.hasNextPage && <button onClick={() => next(page.pageInfo.endCursor)}>Next 50 tasks →</button>}
      </div>
    </>
  );
}
function AllRows(props: ListProps) {
  return <Rows {...props} result={useQuery(queries.Tasks, { root: props.root, variables: props.variables })} />;
}
function UntaggedRows(props: ListProps) {
  return <Rows {...props} result={useQuery(queries.UntaggedTasks, { root: props.root, variables: props.variables })} />;
}
function TaggedRows(props: ListProps & { tags: Tag["_qx"]["ref"][] }) {
  return (
    <Rows
      {...props}
      result={useQuery(queries.TaggedTasks, { root: props.root, variables: { ...props.variables, tags: props.tags } })}
    />
  );
}
export default function ProjectComponent({ camino }: Props) {
  const [name, setName] = useLiveField(camino.named.fields.name);
  const root = camino.tasks.$quixosRef;
  const catalog = useQuery(queries.Catalog, { root, variables: {} });
  const summary = useQuery(queries.Summary, { root, variables: {} });
  const [selected, setSelected] = useState<string | null>(null);
  const [status, setStatus] = useState("OPEN");
  const [tagIds, setTagIds] = useState<string[]>([]);
  const [untagged, setUntagged] = useState(false);
  const [after, setAfter] = useState<string | null>(null);
  const [newTitle, setNewTitle] = useState("");
  const [newTag, setNewTag] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const tags = catalog.status === "ready" ? catalog.data.root.tags.entries.map((e) => e.node) : [];
  const run = async (action: () => Promise<unknown>) => {
    if (busy) return;
    setBusy(true);
    setError("");
    try {
      await action();
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setBusy(false);
    }
  };
  const actions = async () => {
    const view = await tryConform(root, reactInterfaces.ProjectActions);
    if (!view) throw new Error("This project no longer supports task actions");
    return view.call;
  };
  const addTask = () =>
    run(async () => {
      if (!newTitle.trim()) return;
      const task = await (await actions())["addTask.call"](newTitle.trim());
      setNewTitle("");
      setAfter(null);
      setStatus("OPEN");
      setTagIds([]);
      setUntagged(false);
      setSelected(task);
    });
  const editTag = (tag: Tag, field: "name" | "color", value: string) =>
    run(async () => {
      if (!value.trim()) throw new Error("A tag needs a name");
      const view = await tryConform(tag._qx.ref, reactInterfaces.TagData);
      if (!view) throw new Error("Tag is no longer available");
      await view.call[field === "name" ? "name.set" : "color.set"](value);
    });
  const choices = tags.map((tag) => ({ id: tag._qx.ref.$quixosRef, name: tag.name, color: tag.color }));
  const totals = summary.status === "ready" ? summary.data.root._qx.relations.tasks : undefined;
  const list: ListProps = {
    root,
    variables: { first: 50, after, statuses: status === "ALL" ? ["OPEN", "DONE", "ARCHIVED"] : [status] },
    selected,
    select: setSelected,
    next: setAfter,
    reset: () => {
      setAfter(null);
    },
  };
  const activeTags = tags.filter((t) => tagIds.includes(t._qx.ref.$quixosRef));
  return (
    <section className="tt-board">
      <header className="tt-header">
        <input
          aria-label="Project name"
          value={name}
          onChange={(e) => {
            void setName(e.target.value).catch((err) => setError(String(err)));
          }}
        />
        <span>{totals ? `${String(totals.aggregate.count)} tasks` : "Task tracker"}</span>
      </header>
      {error && (
        <div role="alert" className="tt-error">
          {error}
        </div>
      )}
      <form
        className="tt-add"
        onSubmit={(e) => {
          e.preventDefault();
          void addTask();
        }}
      >
        <input
          aria-label="New task title"
          placeholder="Add a task"
          value={newTitle}
          onChange={(e) => setNewTitle(e.target.value)}
          disabled={busy}
        />
        <button disabled={busy || !newTitle.trim()} type="submit">
          Add task
        </button>
      </form>
      <nav className="tt-filters" aria-label="Task filters">
        <select
          aria-label="Task status"
          value={status}
          onChange={(e) => {
            setStatus(e.target.value);
            setAfter(null);
          }}
        >
          <option value="OPEN">Open</option>
          <option value="DONE">Done</option>
          <option value="ARCHIVED">Archived</option>
          <option value="ALL">All statuses</option>
        </select>
        <button
          aria-pressed={!untagged && tagIds.length === 0}
          onClick={() => {
            setTagIds([]);
            setUntagged(false);
            setAfter(null);
          }}
        >
          All tags
        </button>
        <button
          aria-pressed={untagged}
          onClick={() => {
            setTagIds([]);
            setUntagged(true);
            setAfter(null);
          }}
        >
          Untagged
        </button>
        {tags.map((tag) => (
          <button
            key={tag._qx.ref.$quixosRef}
            aria-pressed={tagIds.includes(tag._qx.ref.$quixosRef)}
            onClick={() => {
              setUntagged(false);
              setAfter(null);
              setTagIds((ids) =>
                ids.includes(tag._qx.ref.$quixosRef)
                  ? ids.filter((id) => id !== tag._qx.ref.$quixosRef)
                  : [...ids, tag._qx.ref.$quixosRef],
              );
            }}
          >
            <i style={{ background: tag.color }} />
            {tag.name}
          </button>
        ))}
      </nav>
      {tagIds.length > 1 && <p className="tt-filter-note">Matching any selected tag</p>}
      {catalog.status === "error" && (
        <p role="alert" className="tt-error">
          Tags: {catalog.error.message}
        </p>
      )}
      <main className={"tt-body" + (selected ? " has-detail" : "")}>
        <section className="tt-list">
          {untagged ? (
            <UntaggedRows {...list} />
          ) : activeTags.length ? (
            <TaggedRows {...list} tags={activeTags.map((t) => t._qx.ref)} />
          ) : (
            <AllRows {...list} />
          )}
        </section>
        <section className="tt-detail">
          {selected ? (
            <>
              <div className="tt-detail-bar">
                <button onClick={() => setSelected(null)}>← Task list</button>
                <a href={`/entity/${encodeURIComponent(selected)}`}>Open separately ↗</a>
              </div>
              {/* The queried relation explicitly targets atom Task; query refs carry its TaskData view. */}
              <TaskEditor
                forObject={selected as ObjectRef<"atom:task">}
                tagChoices={choices}
                style={{ flex: 1, minHeight: 0, height: "100%" }}
              />
            </>
          ) : (
            <div className="tt-empty">Select a task to edit it or view completion history.</div>
          )}
        </section>
      </main>
      <details className="tt-manage">
        <summary>Tags & project totals</summary>
        <div className="tt-management">
          <section>
            <h3>Tags</h3>
            {tags.map((tag) => (
              <div className="tt-tag-edit" key={tag._qx.ref.$quixosRef}>
                <input
                  aria-label={`Color for ${tag.name}`}
                  type="color"
                  value={/^#[0-9a-f]{6}$/i.test(tag.color) ? tag.color : "#557a68"}
                  disabled={busy}
                  onChange={(e) => {
                    void editTag(tag, "color", e.target.value);
                  }}
                />
                <input
                  aria-label={`Rename ${tag.name}`}
                  defaultValue={tag.name}
                  key={tag.name}
                  disabled={busy}
                  onBlur={(e) => {
                    if (e.target.value !== tag.name) void editTag(tag, "name", e.target.value);
                  }}
                />
              </div>
            ))}
            <form
              className="tt-add"
              onSubmit={(e) => {
                e.preventDefault();
                void run(async () => {
                  await (await actions())["addTag.call"](newTag);
                  setNewTag("");
                });
              }}
            >
              <input
                aria-label="New tag name"
                placeholder="New tag"
                value={newTag}
                onChange={(e) => setNewTag(e.target.value)}
              />
              <button disabled={busy || !newTag.trim()}>Add tag</button>
            </form>
          </section>
          <section>
            <h3>Project totals</h3>
            {summary.status === "error" && <p role="alert">{summary.error.message}</p>}
            {totals?.groups.entries.map((row) => (
              <p key={row.group.status}>
                {row.group.status.toLowerCase()}: <strong>{String(row.aggregate.count)}</strong> ·{" "}
                {row.aggregate.sum.estimatedHours ?? 0}h estimated
              </p>
            ))}
            <h4>Open tasks by tag</h4>
            {totals?.filter.expand.tags.groups.entries.map((row) => (
              <p key={row.group.target._qx.ref.$quixosRef}>
                <i style={{ background: row.group.target.color }} />
                {row.group.target.name}: {String(row.aggregate.count)} · {row.aggregate.sum.source.estimatedHours ?? 0}h
              </p>
            ))}
            <small>A task can contribute to more than one tag. Project totals count each task once.</small>
          </section>
        </div>
      </details>
    </section>
  );
}