<svelte:options
  customElement={{
    props: {
      columns: { type: "Array" },
    },
    shadow: "none",
    tag: "table-viewer",
  }}
/>

<script lang="ts">
  import { z } from "zod";

  import icon_cloud_arrow_up from "../assets/heroicons/20/solid/cloud-arrow-up.svg?raw";
  import icon_cube_transparent from "../assets/heroicons/20/solid/cube-transparent.svg?raw";
  import icon_exclamation_circle from "../assets/heroicons/20/solid/exclamation-circle.svg?raw";
  import icon_sparkles from "../assets/heroicons/20/solid/sparkles.svg?raw";
  import { type Datum, datum_schema } from "./datum.svelte";
  import DatumEditor from "./datum-editor.svelte";
  import {
    DEFAULT_EDITOR_STATE,
    datum_from_editor_state,
    type EditorState,
  } from "./editor-state.svelte";
  import {
    type Coords,
    type Row,
    type FieldInfo,
    coords_eq,
    field_info_schema,
  } from "./field.svelte";
  import FieldHeader from "./field-header.svelte";
  import { get_empty_datum_for } from "./presentation.svelte";

  type Props = {
    columns?: string[];
  };

  let { columns = [] }: Props = $props();

  type CommittedChange = {
    coords_initial: Coords;
    // This will be identical to coords_initial, unless the change altered a
    // primary key.
    coords_updated: Coords;
    value_initial: Datum;
    value_updated: Datum;
  };

  type LazyData = {
    rows: Row[];
    fields: FieldInfo[];
  };

  type Selection = {
    region: "main" | "inserter";
    coords: Coords;
    original_value: Datum;
  };

  type ParsedPkey = Record<string, Datum>;

  let selections = $state<Selection[]>([]);
  let editing = $state(false);
  let editor_state = $state<EditorState>(DEFAULT_EDITOR_STATE);
  let committed_changes = $state<CommittedChange[][]>([]);
  let reverted_changes = $state<CommittedChange[][]>([]);
  let editor_input_element = $state<HTMLInputElement | undefined>();
  let table_element = $state<HTMLDivElement | undefined>();
  let inserter_rows = $state<Row[]>([]);
  let lazy_data = $state<LazyData | undefined>();

  // -------- Helper Functions -------- //

  function arrow_key_direction(
    key: string,
  ): "Down" | "Left" | "Right" | "Up" | undefined {
    if (key === "ArrowDown") {
      return "Down";
    } else if (key === "ArrowLeft") {
      return "Left";
    } else if (key === "ArrowRight") {
      return "Right";
    } else if (key === "ArrowUp") {
      return "Up";
    } else {
      return undefined;
    }
  }

  // -------- Updates and Effects -------- //

  function set_selections(arr: Omit<Selection, "original_value">[]) {
    selections = arr.map((sel) => {
      let cell_data: Datum | undefined;
      if (sel.region === "main") {
        cell_data = lazy_data?.rows[sel.coords[0]].data[sel.coords[1]];
      } else if (sel.region === "inserter") {
        cell_data = inserter_rows[sel.coords[0]].data[sel.coords[1]];
      } else {
        throw new Error("invalid region");
      }
      return {
        ...sel,
        original_value: cell_data!,
      };
    });
    if (arr.length === 1) {
      const [sel] = arr;
      let cell_data: Datum | undefined;
      if (sel.region === "main") {
        cell_data = lazy_data?.rows[sel.coords[0]].data[sel.coords[1]];
      } else if (sel.region === "inserter") {
        cell_data = inserter_rows[sel.coords[0]].data[sel.coords[1]];
      }
      if (cell_data?.t === "Text" || cell_data?.t === "Uuid") {
        editor_state.text_value = cell_data.c ?? "";
      } else {
        editor_state.text_value = "";
      }
    } else {
      editor_state.text_value = "";
    }
  }

  function try_move_selection(direction: "Down" | "Left" | "Right" | "Up") {
    if (lazy_data && !editing && selections.length > 0) {
      const last_selection = selections[selections.length - 1];
      if (
        direction === "Right" &&
        last_selection.coords[1] < lazy_data.fields.length - 1
      ) {
        set_selections([
          {
            region: last_selection.region,
            coords: [last_selection.coords[0], last_selection.coords[1] + 1],
          },
        ]);
      } else if (direction === "Left" && last_selection.coords[1] > 0) {
        set_selections([
          {
            region: last_selection.region,
            coords: [last_selection.coords[0], last_selection.coords[1] - 1],
          },
        ]);
      } else if (direction === "Down") {
        if (last_selection.region === "main") {
          if (last_selection.coords[0] < lazy_data.rows.length - 1) {
            set_selections([
              {
                region: "main",
                coords: [
                  last_selection.coords[0] + 1,
                  last_selection.coords[1],
                ],
              },
            ]);
          } else {
            // At bottom of main table.
            set_selections([
              {
                region: "inserter",
                coords: [0, last_selection.coords[1]],
              },
            ]);
          }
        } else if (last_selection.region === "inserter") {
          if (last_selection.coords[0] < inserter_rows.length - 1) {
            set_selections([
              {
                region: "inserter",
                coords: [
                  last_selection.coords[0] + 1,
                  last_selection.coords[1],
                ],
              },
            ]);
          }
        }
      } else if (direction === "Up") {
        if (last_selection.region === "main") {
          if (last_selection.coords[0] > 0) {
            set_selections([
              {
                region: "main",
                coords: [
                  last_selection.coords[0] - 1,
                  last_selection.coords[1],
                ],
              },
            ]);
          }
        } else if (last_selection.region === "inserter") {
          if (last_selection.coords[0] > 0) {
            set_selections([
              {
                region: "inserter",
                coords: [
                  last_selection.coords[0] - 1,
                  last_selection.coords[1],
                ],
              },
            ]);
          } else {
            // At top of inserter table.
            set_selections([
              {
                region: "main",
                coords: [lazy_data.rows.length - 1, last_selection.coords[1]],
              },
            ]);
          }
        }
      }
    }
  }

  function try_sync_edit_to_cells() {
    if (lazy_data && editing && selections.length === 1) {
      const [sel] = selections;
      const parsed = datum_from_editor_state(
        editor_state,
        lazy_data.fields[sel.coords[1]].field.presentation,
      );
      if (parsed !== undefined) {
        if (sel.region === "main") {
          lazy_data.rows[sel.coords[0]].data[sel.coords[1]] = parsed;
        } else if (sel.region === "inserter") {
          inserter_rows[sel.coords[0]].data[sel.coords[1]] = parsed;
        } else {
          throw new Error("Unknown region");
        }
      }
    }
  }

  function try_start_edit() {
    if (!editing) {
      editing = true;
      editor_input_element?.focus();
    }
  }

  function try_commit_edit() {
    (async function () {
      if (lazy_data && editing && editor_state && selections.length === 1) {
        const [sel] = selections;
        const field = lazy_data.fields[sel.coords[1]];
        const parsed = datum_from_editor_state(
          editor_state,
          field.field.presentation,
        );
        if (parsed !== undefined) {
          if (sel.region === "main") {
            const pkey = JSON.parse(
              lazy_data.rows[sel.coords[0]].key as string,
            ) as ParsedPkey;
            const resp = await fetch("update-value", {
              method: "post",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                column: field.field.name,
                pkeys: pkey,
                value: parsed,
              }),
            });
            if (resp.status >= 200 && resp.status < 300) {
              committed_changes.push([
                {
                  coords_initial: sel.coords,
                  coords_updated: sel.coords, // TODO: this assumes no inserted/deleted rows
                  value_initial: sel.original_value,
                  value_updated: parsed,
                },
              ]);
              editing = false;
              selections = [{ ...sel, original_value: parsed }];
              table_element?.focus();
            } else {
              // TODO display feedback to user
              console.error(resp);
              console.error(await resp.text());
            }
          } else if (sel.region === "inserter") {
            table_element?.focus();
            editing = false;
            selections = [{ ...sel, original_value: parsed }];
          } else {
            throw new Error("Unknown region");
          }
        } else {
          // TODO
        }
      }
    })().catch(console.error);
  }

  function cancel_edit() {
    selections.forEach(({ coords, original_value, region }) => {
      if (region === "main") {
        if (lazy_data) {
          lazy_data.rows[coords[0]].data[coords[1]] = original_value;
        }
      } else if (region === "inserter") {
        inserter_rows[coords[0]].data[coords[1]] = original_value;
      } else {
        throw new Error("Unknown region");
      }
    });
    // Reset editor input value
    set_selections(selections);
    editing = false;
    table_element?.focus();
  }

  // -------- Event Handlers: Both Tables -------- //

  function handle_table_keydown(ev: KeyboardEvent) {
    if (lazy_data) {
      const arrow_direction = arrow_key_direction(ev.key);
      if (arrow_direction) {
        try_move_selection(arrow_direction);
        ev.preventDefault();
      }
      if (ev.key === "Enter") {
        if (ev.shiftKey) {
          if (selections[0]?.region === "main") {
            set_selections([
              {
                region: "inserter",
                coords: [0, selections[0]?.coords[1] ?? 0],
              },
            ]);
          } else {
            inserter_rows = [
              ...inserter_rows,
              {
                key: inserter_rows.length,
                data: lazy_data.fields.map(({ field: { presentation } }) =>
                  get_empty_datum_for(presentation),
                ),
              },
            ];
          }
        } else {
          try_start_edit();
        }
      }
    }
  }

  function handle_table_cell_dblclick(_: Coords) {
    try_start_edit();
  }

  function handle_table_focus() {
    if (selections.length === 0 && (lazy_data?.rows[0]?.data.length ?? 0) > 0) {
      set_selections([{ region: "main", coords: [0, 0] }]);
    }
  }

  // -------- Event Handlers: Main Table -------- //

  function handle_main_cell_click(ev: MouseEvent, coords: Coords) {
    if (!editing) {
      if (ev.metaKey || ev.ctrlKey) {
        // TODO
        // selections = [...selections.filter((prev) => !coords_eq(prev, coords)), coords];
        // editor_input_value = "";
      } else {
        set_selections([{ region: "main", coords }]);
      }
    }
  }

  // -------- Event Handlers: Inserter Table -------- //

  function handle_inserter_cell_click(ev: MouseEvent, coords: Coords) {
    if (!editing) {
      if (ev.metaKey || ev.ctrlKey) {
        // TODO
        // selections = [...selections.filter((prev) => !coords_eq(prev, coords)), coords];
        // editor_input_value = "";
      } else {
        set_selections([{ region: "inserter", coords }]);
      }
    }
  }

  // -------- Event Handlers: Editor -------- //

  function handle_editor_blur() {
    try_commit_edit();
  }

  function handle_editor_focus() {
    try_start_edit();
  }

  function handle_editor_input() {
    try_sync_edit_to_cells();
  }

  function handle_editor_keydown(ev: KeyboardEvent) {
    if (ev.key === "Enter") {
      try_commit_edit();
    } else if (ev.key === "Escape") {
      cancel_edit();
    }
  }

  // -------- Initial API Fetch -------- //

  (async function () {
    const get_data_response_schema = z.object({
      rows: z.array(
        z.object({
          pkey: z.string(),
          data: z.array(datum_schema),
        }),
      ),
      fields: z.array(field_info_schema),
    });
    const resp = await fetch("get-data");
    const body = get_data_response_schema.parse(await resp.json());
    lazy_data = {
      fields: body.fields,
      rows: body.rows.map(({ data, pkey }) => ({ data, key: pkey })),
    };
    inserter_rows = [
      {
        key: 0,
        data: body.fields.map(({ field: { presentation } }) =>
          get_empty_datum_for(presentation),
        ),
      },
    ];
  })().catch(console.error);
</script>

{#snippet table_region({
  region_name,
  rows,
  on_cell_click,
}: {
  region_name: "main" | "inserter";
  rows: Row[];
  on_cell_click(ev: MouseEvent, coords: Coords): void;
})}
  {#if lazy_data}
    {#each rows as row, row_index}
      <div class="lens-table__row" role="row">
        {#each lazy_data.fields as field, field_index}
          {@const cell_data = row.data[field_index]}
          {@const cell_coords: Coords = [row_index, field_index]}
          {@const cell_selected = selections.some(
            (sel) =>
              sel.region === region_name && coords_eq(sel.coords, cell_coords),
          )}
          {@const null_value_html =
            region_name === "inserter" && field.has_default
              ? icon_sparkles
              : icon_cube_transparent}
          {@const invalid_value =
            field.not_null && !field.has_default && cell_data.c === undefined}
          <!-- svelte-ignore a11y_click_events_have_key_events -->
          <div
            aria-colindex={field_index}
            aria-rowindex={row_index}
            aria-selected={cell_selected}
            class="lens-table__cell"
            onmousedown={(ev) => on_cell_click(ev, cell_coords)}
            ondblclick={() => handle_table_cell_dblclick(cell_coords)}
            role="gridcell"
            style:width={`${field.field.table_width_px}px`}
            tabindex="-1"
          >
            <div
              class={[
                "lens-cell__container",
                cell_selected && "lens-cell__container--selected",
              ]}
            >
              {#if cell_data.t === "Text"}
                <div
                  class={[
                    "lens-cell__content",
                    "lens-cell__content--text",
                    cell_data.c === undefined && "lens-cell__content--null",
                  ]}
                >
                  {#if cell_data.c === undefined}
                    {@html null_value_html}
                  {:else}
                    {cell_data.c}
                  {/if}
                </div>
              {:else if cell_data.t === "Uuid"}
                <div
                  class={[
                    "lens-cell__content",
                    "lens-cell__content--uuid",
                    cell_data.c === undefined && "lens-cell__content--null",
                  ]}
                >
                  {#if cell_data.c === undefined}
                    {@html null_value_html}
                  {:else}
                    {cell_data.c}
                  {/if}
                </div>
              {:else}
                <div
                  class={["lens-cell__content", "lens-cell__content--unknown"]}
                >
                  <div>UNKNOWN</div>
                </div>
              {/if}
              {#if invalid_value}
                <div class="lens-cell__notice">
                  {@html icon_exclamation_circle}
                </div>
              {/if}
            </div>
          </div>
        {/each}
      </div>
    {/each}
  {/if}
{/snippet}

<div class="lens-grid">
  {#if lazy_data}
    <div
      bind:this={table_element}
      class="lens-table"
      onfocus={handle_table_focus}
      onkeydown={handle_table_keydown}
      role="grid"
      tabindex="0"
    >
      <div class={["lens-table__headers"]}>
        {#each lazy_data.fields as _, field_index}
          <FieldHeader
            bind:field={lazy_data.fields[field_index]}
            index={field_index}
          />
        {/each}
        <div class="lens-table__header-actions">
          <field-adder {columns}></field-adder>
        </div>
      </div>
      <div class="lens-table__main">
        {@render table_region({
          region_name: "main",
          rows: lazy_data.rows,
          on_cell_click: handle_main_cell_click,
        })}
      </div>
      <form method="post" action="insert">
        <div class="lens-table__inserter">
          <div class="lens-inserter__rows">
            {@render table_region({
              region_name: "inserter",
              rows: inserter_rows,
              on_cell_click: handle_inserter_cell_click,
            })}
          </div>
          <button
            class="lens-inserter__submit"
            onkeydown={(ev) => {
              // Prevent keypress (e.g. pressing Enter on the button to submit
              // it) from triggering a table interaction.
              ev.stopPropagation();
            }}
            type="submit"
          >
            {@html icon_cloud_arrow_up}
          </button>
        </div>
        {#each inserter_rows as row}
          {#each lazy_data.fields as field, field_index}
            <input
              type="hidden"
              name={field.field.name}
              value={JSON.stringify(row.data[field_index])}
            />
          {/each}
        {/each}
      </form>
    </div>
    <div class="lens-editor">
      {#if selections.length === 1 && editor_state}
        <DatumEditor
          bind:editor_state
          field_info={lazy_data.fields[selections[0].coords[1]]}
        />
      {/if}
      <!--
      <input
        bind:this={editor_input_element}
        bind:value={editor_input_value}
        class={[
          "lens-editor__input",
          selections.length !== 1 && "lens-editor__input--hidden",
        ]}
        onblur={handle_editor_blur}
        onfocus={handle_editor_focus}
        oninput={handle_editor_input}
        onkeydown={handle_editor_keydown}
        tabindex="-1"
      />
      -->
    </div>
  {/if}
</div>
