budget2.0/src/ui/routes/settings/PostsSection.tsx

import { Fragment, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useDataset } from "../../hooks/useDataset.ts";
import { useMutate } from "../../hooks/useMutate.ts";
import { addPost, movePost, setPostArchived, updatePost } from "../../../store/actions.ts";
import { CURRENCIES, type Currency, type Post } from "../../../domain/types.ts";
import { ruleAt } from "../../../domain/allocation.ts";
import { currentMonth } from "../../../store/index.ts";
import { RuleHistory } from "../../components/RuleHistory.tsx";
import { Section } from "../../components/Section.tsx";

export function PostsSection() {
  const dataset = useDataset();
  const { mutate } = useMutate();
  const [newName, setNewName] = useState("");
  const [openHistory, setOpenHistory] = useState<string | null>(null);
  const ordered = [...dataset.posts].sort((a, b) => a.order - b.order);
  const base = dataset.settings.baseCurrency;

  function ruleSummary(post: Post) {
    const effective = ruleAt(post, currentMonth);
    if (!effective) {
      return <span className="text-xs text-muted-foreground">not budgeted</span>;
    }
    const { rule } = effective;
    return (
      <span className="text-xs">
        {rule.kind === "fixed"
          ? `${rule.amount.amount} ${rule.amount.currency}`
          : `${rule.percent}% of income`}
        <span className="ml-1 text-muted-foreground">from {effective.from}</span>
      </span>
    );
  }

  return (
    <Section
      title="Posts"
      hint="A post's allocation is a dated series: each rule applies from its own month onward until the next one takes over, so changing it never rewrites what earlier months got. Click a rule to see and edit that history. A single month can still override its own allocation from the month view, and percentages may total more than 100%."
    >

      <table className="w-full text-sm">
        <thead className="text-left">
          <tr className="border-b border-budget-rule text-[0.6875rem] uppercase tracking-wider text-budget-ink-muted">
            <th className="py-2 font-medium">Name</th>
            <th className="py-2 font-medium">Display currency</th>
            <th className="py-2 font-medium">Rule</th>
            <th className="py-2" />
          </tr>
        </thead>
        <tbody>
          {ordered.map((post, index) => (
            <Fragment key={post.id}>
              <tr className={`border-b last:border-0 ${post.archived ? "opacity-50" : ""}`}>
                <td className="py-2">
                  <Input
                    className="h-8 w-48"
                    value={post.name}
                    onChange={(event) => {
                      const name = event.target.value;
                      mutate((draft) => updatePost(draft, post.id, { name }));
                    }}
                  />
                </td>
                <td className="py-2">
                  <select
                    className="h-8 rounded border bg-background px-1 text-xs"
                    value={post.currency}
                    onChange={(event) => {
                      const currency = event.target.value as Currency;
                      mutate((draft) => updatePost(draft, post.id, { currency }));
                    }}
                  >
                    {CURRENCIES.map((currency) => (
                      <option key={currency} value={currency}>
                        {currency}
                      </option>
                    ))}
                  </select>
                </td>
                <td className="py-2">
                  <button
                    type="button"
                    className="underline decoration-dotted"
                    aria-expanded={openHistory === post.id}
                    onClick={() =>
                      setOpenHistory((id) => (id === post.id ? null : post.id))
                    }
                  >
                    {ruleSummary(post)}
                  </button>
                </td>
                <td className="py-2 text-right">
                  <Button size="sm" variant="ghost" disabled={index === 0}
                    onClick={() => mutate((draft) => movePost(draft, post.id, -1))}>
                    up
                  </Button>
                  <Button size="sm" variant="ghost" disabled={index === ordered.length - 1}
                    onClick={() => mutate((draft) => movePost(draft, post.id, 1))}>
                    down
                  </Button>
                  <Button size="sm" variant="ghost"
                    onClick={() => mutate((draft) => setPostArchived(draft, post.id, !post.archived))}>
                    {post.archived ? "restore" : "archive"}
                  </Button>
                </td>
              </tr>
              {openHistory === post.id && (
                <tr className="border-b last:border-0">
                  <td colSpan={4} className="pb-3">
                    <RuleHistory post={post} />
                  </td>
                </tr>
              )}
            </Fragment>
          ))}
        </tbody>
      </table>
      <p className="text-xs text-budget-ink-muted">
        Archiving hides a post from new purchases while keeping its history. Posts
        are never deleted, because purchases reference them.
      </p>

      <div className="flex items-end gap-2">
        <Input
          className="w-48"
          placeholder="New post name"
          value={newName}
          onChange={(event) => setNewName(event.target.value)}
        />
        <Button
          variant="outline"
          disabled={newName.trim() === ""}
          onClick={() => {
            mutate((draft) => addPost(draft, newName.trim(), base));
            setNewName("");
          }}
        >
          Add post
        </Button>
      </div>
    </Section>
  );
}