// SecretRow.tsx
// Displays a single secret with discovered checkbox and text.
import type { Secret, Session } from "@/lib/types";
import { pb } from "@/lib/pocketbase";
import { useState } from "react";

/**
 * Renders a secret row with a discovered checkbox and secret text.
 * Handles updating the discovered state and discoveredIn relationship.
 */
export const SecretRow = ({
  secret,
  session,
}: {
  secret: Secret;
  session?: Session;
}) => {
  const [checked, setChecked] = useState(
    !!(secret.data as any)?.secret?.discovered,
  );
  const [loading, setLoading] = useState(false);

  async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const newChecked = e.target.checked;
    setLoading(true);
    setChecked(newChecked);
    try {
      await pb.collection("documents").update(secret.id, {
        data: {
          ...secret.data,
          secret: {
            ...(secret.data as any).secret,
            discovered: newChecked,
          },
        },
      });
      if (session || !newChecked) {
        // If the session exists or the element is being unchecked, remove any
        // existing discoveredIn relationship
        const rels = await pb.collection("relationships").getList(1, 1, {
          filter: `primary = "${secret.id}" && type = "discoveredIn"`,
        });
        if (rels.items.length > 0) {
          await pb.collection("relationships").delete(rels.items[0].id);
        }
      }
      if (session) {
        if (newChecked) {
          await pb.collection("relationships").create({
            primary: secret.id,
            secondary: [session.id],
            type: "discoveredIn",
          });
        }
      }
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="flex items-center gap-3">
      <input
        type="checkbox"
        checked={checked}
        onChange={handleChange}
        className="accent-emerald-500 w-5 h-5"
        aria-label="Discovered"
        disabled={loading}
      />
      <span>
        {(secret.data as any)?.secret?.text || (
          <span className="italic text-slate-400">(No secret text)</span>
        )}
      </span>
    </div>
  );
};