import { useState } from "react";
import { removeProjectItem, updateProjectItem } from "~/fns/projects";
import { useAction } from "~/hooks/use-action";
import { ItemTitle } from "./ItemTitle";
import type { ProjectData, ProjectField, ProjectItem } from "./ItemTitle";
import { inputClass } from "~/ui/Field";
import { EmptyState } from "~/ui/EmptyState";
import { cn } from "~/utils/cn";

type Ref = { owner: string; number: number };

function Cell({
  projectRef,
  item,
  field,
  canWrite,
}: {
  projectRef: Ref;
  item: ProjectItem;
  field: ProjectField;
  canWrite: boolean;
}) {
  const current = item.values[field.id] ?? "";
  const [draft, setDraft] = useState(current);
  const update = useAction(updateProjectItem);
  const save = (value: string) => {
    if (value === current) return;
    void update.run({ data: { ...projectRef, itemId: item.id, fieldId: field.id, value: value || null } });
  };
  if (!canWrite) return <span className="text-gray-300">{current}</span>;
  if (field.kind === "single_select")
    return (
      <select
        aria-label={field.name}
        value={current}
        onChange={(event) => save(event.target.value)}
        className={cn(inputClass, "h-7 border-transparent bg-transparent text-xs")}
      >
        <option value="">—</option>
        {field.options.map((option) => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>
    );
  return (
    <input
      aria-label={field.name}
      type={field.kind === "date" ? "date" : field.kind === "number" ? "number" : "text"}
      value={draft}
      onChange={(event) => setDraft(event.target.value)}
      onBlur={() => save(draft)}
      onKeyDown={(event) => event.key === "Enter" && event.currentTarget.blur()}
      className={cn(inputClass, "h-7 border-transparent bg-transparent text-xs", update.error && "border-danger-700")}
      title={update.error ?? undefined}
    />
  );
}

export function ProjectTable({ data }: { data: ProjectData }) {
  const remove = useAction(removeProjectItem);
  const projectRef = { owner: data.project.owner, number: data.project.number };
  if (data.items.length === 0)
    return (
      <EmptyState title="No items yet" icon="project">
        Add issues, pull requests or notes.
      </EmptyState>
    );
  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead className="border-b border-gray-800 text-left text-xs text-gray-500">
          <tr>
            <th className="px-3 py-2 font-medium">Title</th>
            {data.fields.map((field) => (
              <th key={field.id} className="min-w-32 px-3 py-2 font-medium">
                {field.name}
              </th>
            ))}
            {data.canWrite && <th className="w-8" aria-label="Actions" />}
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-800/70">
          {data.items.map((item) => (
            <tr key={item.id}>
              <td className="max-w-md px-3 py-1.5">
                <ItemTitle item={item} />
              </td>
              {data.fields.map((field) => (
                <td key={field.id} className="px-2 py-1">
                  <Cell
                    key={item.values[field.id] ?? ""}
                    projectRef={projectRef}
                    item={item}
                    field={field}
                    canWrite={data.canWrite}
                  />
                </td>
              ))}
              {data.canWrite && (
                <td className="px-2">
                  <button
                    type="button"
                    aria-label="Remove item"
                    className="text-gray-600 hover:text-danger-400"
                    onClick={() => remove.run({ data: { ...projectRef, itemId: item.id } })}
                  >
                    ×
                  </button>
                </td>
              )}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}