// src/components/templates/todos/FilterBar.tsx
import { jsx, jsxs } from "react/jsx-runtime";
function FilterBar({ value, onChange, categories }) {
  const handleChange = (key, nextValue) => {
    onChange({ ...value, [key]: nextValue });
  };
  return /* @__PURE__ */ jsxs("div", {
    className: "border-border bg-card grid gap-3 rounded-2xl border p-4 md:grid-cols-4",
    children: [
      /* @__PURE__ */ jsxs("label", {
        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
        children: [
          "Status",
          /* @__PURE__ */ jsxs("select", {
            className: "border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm",
            value: value.status,
            onChange: (event) => handleChange("status", event.target.value),
            children: [
              /* @__PURE__ */ jsx("option", {
                value: "all",
                children: "All tasks"
              }),
              /* @__PURE__ */ jsx("option", {
                value: "active",
                children: "Active"
              }),
              /* @__PURE__ */ jsx("option", {
                value: "completed",
                children: "Completed"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("label", {
        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
        children: [
          "Priority",
          /* @__PURE__ */ jsxs("select", {
            className: "border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm",
            value: value.priority,
            onChange: (event) => handleChange("priority", event.target.value),
            children: [
              /* @__PURE__ */ jsx("option", {
                value: "all",
                children: "All"
              }),
              /* @__PURE__ */ jsx("option", {
                value: "LOW",
                children: "Low"
              }),
              /* @__PURE__ */ jsx("option", {
                value: "MEDIUM",
                children: "Medium"
              }),
              /* @__PURE__ */ jsx("option", {
                value: "HIGH",
                children: "High"
              }),
              /* @__PURE__ */ jsx("option", {
                value: "URGENT",
                children: "Urgent"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("label", {
        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
        children: [
          "Category",
          /* @__PURE__ */ jsxs("select", {
            className: "border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm",
            value: value.categoryId,
            onChange: (event) => handleChange("categoryId", event.target.value),
            children: [
              /* @__PURE__ */ jsx("option", {
                value: "all",
                children: "All categories"
              }),
              categories.map((category) => /* @__PURE__ */ jsx("option", {
                value: category.id,
                children: category.name
              }, category.id))
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("label", {
        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
        children: [
          "Search",
          /* @__PURE__ */ jsx("input", {
            type: "search",
            className: "border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm",
            placeholder: "Search by title",
            value: value.search,
            onChange: (event) => handleChange("search", event.target.value)
          })
        ]
      })
    ]
  });
}

// src/components/templates/todos/TaskForm.tsx
import { useState } from "react";
import { useMutation } from "@apollo/client/react";
import { gql } from "@apollo/client";
import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
"use client";
var CREATE_TASK = gql`
  mutation CreateTask($input: CreateTaskInput!) {
    createTask(input: $input) {
      id
      title
    }
  }
`;
function TaskForm({ categories }) {
  const { projectId } = useTemplateRuntime();
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [priority, setPriority] = useState("MEDIUM");
  const [categoryId, setCategoryId] = useState("none");
  const [tagsInput, setTagsInput] = useState("");
  const [createTask, { loading }] = useMutation(CREATE_TASK);
  const handleSubmit = async (event) => {
    event.preventDefault();
    if (!title.trim())
      return;
    await createTask({
      variables: {
        input: {
          projectId,
          title: title.trim(),
          description: description.trim() || undefined,
          priority,
          categoryId: categoryId === "none" ? undefined : categoryId,
          tags: parseTags(tagsInput)
        }
      },
      refetchQueries: ["Tasks"],
      awaitRefetchQueries: true
    });
    setTitle("");
    setDescription("");
    setPriority("MEDIUM");
    setCategoryId("none");
    setTagsInput("");
  };
  return /* @__PURE__ */ jsxs2("form", {
    onSubmit: handleSubmit,
    className: "border-border bg-background/60 space-y-3 rounded-2xl border p-4",
    children: [
      /* @__PURE__ */ jsx2("div", {
        children: /* @__PURE__ */ jsxs2("label", {
          className: "text-muted-foreground text-xs font-semibold uppercase",
          children: [
            "Title",
            /* @__PURE__ */ jsx2("input", {
              type: "text",
              className: "border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm",
              placeholder: "What needs to get done?",
              value: title,
              onChange: (event) => setTitle(event.target.value),
              required: true
            })
          ]
        })
      }),
      /* @__PURE__ */ jsx2("div", {
        children: /* @__PURE__ */ jsxs2("label", {
          className: "text-muted-foreground text-xs font-semibold uppercase",
          children: [
            "Description",
            /* @__PURE__ */ jsx2("textarea", {
              className: "border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm",
              rows: 3,
              placeholder: "Add context or policy notes",
              value: description,
              onChange: (event) => setDescription(event.target.value)
            })
          ]
        })
      }),
      /* @__PURE__ */ jsxs2("div", {
        className: "grid gap-3 md:grid-cols-3",
        children: [
          /* @__PURE__ */ jsxs2("label", {
            className: "text-muted-foreground text-xs font-semibold uppercase",
            children: [
              "Priority",
              /* @__PURE__ */ jsxs2("select", {
                className: "border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm",
                value: priority,
                onChange: (event) => setPriority(event.target.value),
                children: [
                  /* @__PURE__ */ jsx2("option", {
                    value: "LOW",
                    children: "Low"
                  }),
                  /* @__PURE__ */ jsx2("option", {
                    value: "MEDIUM",
                    children: "Medium"
                  }),
                  /* @__PURE__ */ jsx2("option", {
                    value: "HIGH",
                    children: "High"
                  }),
                  /* @__PURE__ */ jsx2("option", {
                    value: "URGENT",
                    children: "Urgent"
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs2("label", {
            className: "text-muted-foreground text-xs font-semibold uppercase",
            children: [
              "Category",
              /* @__PURE__ */ jsxs2("select", {
                className: "border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm",
                value: categoryId,
                onChange: (event) => setCategoryId(event.target.value),
                children: [
                  /* @__PURE__ */ jsx2("option", {
                    value: "none",
                    children: "None"
                  }),
                  categories.map((category) => /* @__PURE__ */ jsx2("option", {
                    value: category.id,
                    children: category.name
                  }, category.id))
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs2("label", {
            className: "text-muted-foreground text-xs font-semibold uppercase",
            children: [
              "Tags",
              /* @__PURE__ */ jsx2("input", {
                className: "border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm",
                placeholder: "Comma separated (optional)",
                value: tagsInput,
                onChange: (event) => setTagsInput(event.target.value)
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsx2("button", {
        type: "submit",
        className: "btn-primary w-full py-2 text-sm font-semibold",
        disabled: loading,
        children: loading ? "Saving..." : "Add task"
      })
    ]
  });
}
function parseTags(input) {
  return input.split(",").map((tag) => tag.trim()).filter(Boolean);
}

// src/components/templates/todos/TaskItem.tsx
import { Check, Circle, Trash2 } from "lucide-react";
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
function TaskItem({ task, onToggle, onDelete }) {
  const badgeColor = task.priority === "URGENT" ? "text-red-200 bg-red-500/10 border-red-500/40" : task.priority === "HIGH" ? "text-amber-200 bg-amber-500/10 border-amber-500/40" : task.priority === "LOW" ? "text-emerald-200 bg-emerald-500/10 border-emerald-500/40" : "text-violet-200 bg-violet-500/10 border-violet-500/40";
  return /* @__PURE__ */ jsxs3("div", {
    className: "border-border/70 bg-card/60 hover:border-border flex items-start gap-4 rounded-2xl border p-4 transition",
    children: [
      /* @__PURE__ */ jsx3("button", {
        type: "button",
        className: "border-border text-muted-foreground hover:bg-muted/40 rounded-full border p-2",
        "aria-pressed": task.completed,
        onClick: () => onToggle?.(task),
        children: task.completed ? /* @__PURE__ */ jsx3(Check, {
          className: "h-4 w-4 text-emerald-400"
        }) : /* @__PURE__ */ jsx3(Circle, {
          className: "h-4 w-4"
        })
      }),
      /* @__PURE__ */ jsxs3("div", {
        className: "flex-1 space-y-2",
        children: [
          /* @__PURE__ */ jsxs3("div", {
            className: "flex flex-wrap items-center gap-2",
            children: [
              /* @__PURE__ */ jsx3("p", {
                className: `font-medium ${task.completed ? "text-muted-foreground line-through" : "text-foreground"}`,
                children: task.title
              }),
              /* @__PURE__ */ jsx3("span", {
                className: `rounded-full border px-2 py-0.5 text-xs ${badgeColor}`,
                children: task.priority.charAt(0) + task.priority.slice(1).toLowerCase()
              }),
              task.category ? /* @__PURE__ */ jsx3("span", {
                className: "bg-muted/40 text-muted-foreground rounded-full px-2 py-0.5 text-xs",
                children: task.category.name
              }) : null,
              task.dueDate ? /* @__PURE__ */ jsxs3("span", {
                className: "text-muted-foreground text-xs",
                children: [
                  "Due ",
                  new Date(task.dueDate).toLocaleDateString()
                ]
              }) : null
            ]
          }),
          task.description ? /* @__PURE__ */ jsx3("p", {
            className: "text-muted-foreground text-sm",
            children: task.description
          }) : null,
          task.tags.length ? /* @__PURE__ */ jsx3("div", {
            className: "flex flex-wrap gap-1",
            children: task.tags.map((tag) => /* @__PURE__ */ jsxs3("span", {
              className: "bg-muted/40 text-muted-foreground rounded-full px-2 py-0.5 text-xs",
              children: [
                "#",
                tag
              ]
            }, tag))
          }) : null
        ]
      }),
      /* @__PURE__ */ jsx3("button", {
        type: "button",
        className: "text-muted-foreground hover:text-destructive",
        "aria-label": `Delete ${task.title}`,
        onClick: () => onDelete?.(task),
        children: /* @__PURE__ */ jsx3(Trash2, {
          className: "h-4 w-4"
        })
      })
    ]
  });
}

// src/components/templates/todos/TaskList.tsx
import { useMemo, useState as useState2 } from "react";
import { useMutation as useMutation2, useQuery } from "@apollo/client/react";
import { gql as gql2 } from "@apollo/client";
import {
  registerTemplateComponents,
  useTemplateRuntime as useTemplateRuntime2
} from "@contractspec/lib.example-shared-ui";
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
"use client";
var TASKS_QUERY = gql2`
  query Tasks($projectId: ID!) {
    taskCategories(projectId: $projectId) {
      id
      name
      color
    }
    tasks(projectId: $projectId) {
      id
      title
      description
      completed
      priority
      dueDate
      tags
      category {
        id
        name
        color
      }
    }
  }
`;
var TOGGLE_TASK = gql2`
  mutation ToggleTask($id: ID!, $completed: Boolean!) {
    toggleTask(id: $id, completed: $completed) {
      id
      completed
    }
  }
`;
var DELETE_TASK = gql2`
  mutation DeleteTask($id: ID!) {
    deleteTask(id: $id)
  }
`;
function TaskList() {
  const { projectId } = useTemplateRuntime2();
  const [filters, setFilters] = useState2({
    status: "all",
    priority: "all",
    categoryId: "all",
    search: ""
  });
  const { data, loading } = useQuery(TASKS_QUERY, {
    variables: { projectId },
    fetchPolicy: "cache-and-network"
  });
  const [toggleTask] = useMutation2(TOGGLE_TASK);
  const [deleteTask] = useMutation2(DELETE_TASK);
  const categories = data?.taskCategories ?? [];
  const tasks = data?.tasks ?? [];
  const filtered = useMemo(() => {
    return tasks.filter((task) => {
      if (filters.status === "active" && task.completed)
        return false;
      if (filters.status === "completed" && !task.completed)
        return false;
      if (filters.priority !== "all" && task.priority !== filters.priority)
        return false;
      if (filters.categoryId !== "all" && task.category?.id !== filters.categoryId)
        return false;
      if (filters.search && !task.title.toLowerCase().includes(filters.search.toLowerCase()))
        return false;
      return true;
    });
  }, [tasks, filters]);
  const handleToggle = async (task) => {
    await toggleTask({
      variables: { id: task.id, completed: !task.completed },
      optimisticResponse: {
        toggleTask: {
          __typename: "Task",
          id: task.id,
          completed: !task.completed
        }
      },
      update(cache) {
        cache.modify({
          fields: {
            tasks(existing = []) {
              return existing.map((ref) => ref.__ref?.endsWith(task.id) ? { ...ref, completed: !task.completed } : ref);
            }
          }
        });
      }
    });
  };
  const handleDelete = async (task) => {
    await deleteTask({
      variables: { id: task.id },
      refetchQueries: [{ query: TASKS_QUERY, variables: { projectId } }]
    });
  };
  return /* @__PURE__ */ jsxs4("div", {
    className: "space-y-6",
    children: [
      /* @__PURE__ */ jsx4(FilterBar, {
        value: filters,
        onChange: setFilters,
        categories
      }),
      /* @__PURE__ */ jsx4(TaskForm, {
        categories
      }),
      loading ? /* @__PURE__ */ jsx4("p", {
        className: "text-muted-foreground text-sm",
        children: "Loading tasks…"
      }) : filtered.length ? /* @__PURE__ */ jsx4("div", {
        className: "space-y-3",
        children: filtered.map((task) => /* @__PURE__ */ jsx4(TaskItem, {
          task,
          onToggle: handleToggle,
          onDelete: handleDelete
        }, task.id))
      }) : /* @__PURE__ */ jsx4("div", {
        className: "border-border rounded-2xl border border-dashed p-8 text-center",
        children: /* @__PURE__ */ jsx4("p", {
          className: "text-muted-foreground",
          children: "No tasks match your filters. Create one above."
        })
      })
    ]
  });
}
registerTemplateComponents("todos-app", {
  list: TaskList,
  detail: TaskList,
  form: TaskForm
});
export {
  TaskList,
  TaskItem,
  TaskForm,
  FilterBar
};
