"use client";

import { useMemo, useOptimistic, useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import type { User } from "@/lib/types";
import { updateUser } from "@/app/actions";
import EditableCell from "./editable-cell";

type Props = { initial: User[]; prefixPattern: string };

type SortDir = "asc" | "desc";
type SortKey = "f_username" | "last_update_time";

type OptimisticPatch = {
  f_username: string;
  field: keyof Pick<User, "f_password" | "t_username" | "t_password">;
  value: string;
};

function timeOf(t: string | null) {
  if (!t) return 0;
  const ms = Date.parse(t);
  return Number.isNaN(ms) ? 0 : ms;
}

function sortUsers(rows: User[], key: SortKey, dir: SortDir, prefix: string): User[] {
  return [...rows].sort((a, b) => {
    const ap = a.f_username.startsWith(prefix);
    const bp = b.f_username.startsWith(prefix);
    if (ap && !bp) return -1;
    if (!ap && bp) return 1;
    if (key === "f_username") {
      return dir === "asc"
        ? a.f_username.localeCompare(b.f_username)
        : b.f_username.localeCompare(a.f_username);
    }
    return dir === "asc"
      ? timeOf(a.last_update_time) - timeOf(b.last_update_time)
      : timeOf(b.last_update_time) - timeOf(a.last_update_time);
  });
}

function formatTime(t: string | null) {
  if (!t) return <em className="not-italic text-zinc-400">—</em>;
  const d = new Date(t);
  if (Number.isNaN(d.getTime())) return t;
  return d.toLocaleString(undefined, {
    year: "numeric",
    month: "short",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  });
}

export default function UsersTable({ initial, prefixPattern }: Props) {
  const router = useRouter();
  const [sortKey, setSortKey] = useState<SortKey>("last_update_time");
  const [sortDir, setSortDir] = useState<SortDir>("desc");
  const [editingKey, setEditingKey] = useState<string | null>(null);
  const [, startTransition] = useTransition();
  const [refreshing, setRefreshing] = useState(false);

  const [optimistic, applyOptimistic] = useOptimistic<User[], OptimisticPatch>(
    initial,
    (state, patch) =>
      state.map((row) =>
        row.f_username === patch.f_username ? { ...row, [patch.field]: patch.value } : row,
      ),
  );

  const sorted = useMemo(
    () => sortUsers(optimistic, sortKey, sortDir, prefixPattern),
    [optimistic, sortKey, sortDir, prefixPattern],
  );

  function saveCell(
    f_username: string,
    field: OptimisticPatch["field"],
    value: string,
  ) {
    return new Promise<{ ok: boolean; error?: string }>((resolve) => {
      startTransition(async () => {
        applyOptimistic({ f_username, field, value });
        const row = initial.find((r) => r.f_username === f_username);
        if (!row) {
          resolve({ ok: false, error: "row not found" });
          return;
        }
        const next = {
          f_username: row.f_username,
          f_password: row.f_password,
          t_username: row.t_username,
          t_password: row.t_password,
          [field]: value,
        };
        const result = await updateUser(next);
        if (result.ok) resolve({ ok: true });
        else resolve({ ok: false, error: result.error });
      });
    });
  }

  function refresh() {
    setRefreshing(true);
    startTransition(() => {
      router.refresh();
      setTimeout(() => setRefreshing(false), 400);
    });
  }

  function toggleSort(k: SortKey) {
    if (sortKey === k) {
      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
    } else {
      setSortKey(k);
      setSortDir("desc");
    }
  }

  if (initial.length === 0) {
    return (
      <div className="mx-auto max-w-3xl px-4 py-16">
        <h1 className="font-mono text-2xl font-bold uppercase tracking-tight text-zinc-900">
          Users
        </h1>
        <div className="mt-8 border-2 border-dashed border-zinc-300 bg-white p-10 text-center">
          <p className="font-mono text-sm text-zinc-500">No users yet.</p>
        </div>
      </div>
    );
  }

  function HeaderButton({ k, label }: { k: SortKey; label: string }) {
    const active = sortKey === k;
    return (
      <button
        type="button"
        onClick={() => toggleSort(k)}
        className={`inline-flex items-center gap-1 font-mono text-[10px] font-bold uppercase tracking-[0.2em] ${
          active ? "text-zinc-900" : "text-zinc-700"
        } hover:text-zinc-900`}
      >
        {label}
        <span aria-hidden="true">{active ? (sortDir === "asc" ? "↑" : "↓") : "↕"}</span>
      </button>
    );
  }

  return (
    <div className="mx-auto max-w-6xl px-4 py-8 sm:py-12">
      <div className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <p className="font-mono text-[11px] font-bold uppercase tracking-[0.25em] text-zinc-500">
            // table
          </p>
          <h1 className="mt-1 font-mono text-2xl font-bold uppercase tracking-tight text-zinc-900 sm:text-3xl">
            Users
          </h1>
        </div>
        <div className="flex items-center gap-3">
          <div className="inline-flex items-baseline gap-2 border-2 border-zinc-900 bg-white px-3 py-1.5">
            <span className="font-mono text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500">
              count
            </span>
            <span className="font-mono text-lg font-bold text-zinc-900">{optimistic.length}</span>
          </div>
          <button
            type="button"
            onClick={refresh}
            disabled={refreshing}
            className="inline-flex items-center gap-1.5 border-2 border-zinc-900 bg-yellow-300 px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-[0.2em] text-zinc-900 hover:bg-zinc-900 hover:text-yellow-300 disabled:opacity-60"
          >
            <span aria-hidden="true" className={refreshing ? "inline-block animate-spin" : ""}>
              ↻
            </span>
            refresh
          </button>
        </div>
      </div>

      <div className="mt-6 hidden border-2 border-zinc-900 bg-white sm:block">
        <table className="w-full table-fixed border-collapse">
          <thead>
            <tr className="border-b-2 border-zinc-900 bg-zinc-50">
              <th className="w-[18%] px-3 py-2 text-left">
                <HeaderButton k="f_username" label="from username" />
              </th>
              <th className="w-[18%] px-3 py-2 text-left font-mono text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-700">
                from password
              </th>
              <th className="w-[18%] px-3 py-2 text-left font-mono text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-700">
                to username
              </th>
              <th className="w-[18%] px-3 py-2 text-left font-mono text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-700">
                to password
              </th>
              <th className="px-3 py-2 text-left">
                <HeaderButton k="last_update_time" label="last update" />
              </th>
            </tr>
          </thead>
          <tbody>
            {sorted.map((row) => {
              const k = (f: string) => `${row.f_username}::${f}`;
              return (
                <tr
                  key={row.f_username}
                  className="border-b border-zinc-200 last:border-b-0 hover:bg-zinc-50"
                >
                  <td className="px-3 py-2 align-middle font-mono text-sm font-semibold text-zinc-900">
                    {row.f_username}
                  </td>
                  <td className="px-3 py-2 align-middle">
                    <EditableCell
                      value={row.f_password}
                      label={`from password for ${row.f_username}`}
                      isCurrentlyEditing={editingKey === k("f_password")}
                      onEditStart={() => setEditingKey(k("f_password"))}
                      onEditEnd={() => setEditingKey(null)}
                      onSave={(v) => saveCell(row.f_username, "f_password", v)}
                    />
                  </td>
                  <td className="px-3 py-2 align-middle">
                    <EditableCell
                      value={row.t_username}
                      label={`to username for ${row.f_username}`}
                      isCurrentlyEditing={editingKey === k("t_username")}
                      onEditStart={() => setEditingKey(k("t_username"))}
                      onEditEnd={() => setEditingKey(null)}
                      onSave={(v) => saveCell(row.f_username, "t_username", v)}
                    />
                  </td>
                  <td className="px-3 py-2 align-middle">
                    <EditableCell
                      value={row.t_password}
                      label={`to password for ${row.f_username}`}
                      isCurrentlyEditing={editingKey === k("t_password")}
                      onEditStart={() => setEditingKey(k("t_password"))}
                      onEditEnd={() => setEditingKey(null)}
                      onSave={(v) => saveCell(row.f_username, "t_password", v)}
                    />
                  </td>
                  <td className="px-3 py-2 align-middle font-mono text-xs text-zinc-600">
                    {formatTime(row.last_update_time)}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div className="mt-6 space-y-3 sm:hidden">
        {sorted.map((row) => {
          const k = (f: string) => `${row.f_username}::${f}`;
          return (
            <div key={row.f_username} className="border-2 border-zinc-900 bg-white p-3">
              <div className="flex items-baseline justify-between gap-2">
                <span className="font-mono text-base font-bold text-zinc-900">
                  {row.f_username}
                </span>
                <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-zinc-500">
                  {formatTime(row.last_update_time)}
                </span>
              </div>
              <dl className="mt-3 grid grid-cols-[max-content_1fr] items-baseline gap-x-3 gap-y-2 border-t border-zinc-200 pt-3">
                <dt className="font-mono text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500">
                  from pw
                </dt>
                <dd>
                  <EditableCell
                    value={row.f_password}
                    label={`from password for ${row.f_username}`}
                    isCurrentlyEditing={editingKey === k("f_password")}
                    onEditStart={() => setEditingKey(k("f_password"))}
                    onEditEnd={() => setEditingKey(null)}
                    onSave={(v) => saveCell(row.f_username, "f_password", v)}
                  />
                </dd>
                <dt className="font-mono text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500">
                  to user
                </dt>
                <dd>
                  <EditableCell
                    value={row.t_username}
                    label={`to username for ${row.f_username}`}
                    isCurrentlyEditing={editingKey === k("t_username")}
                    onEditStart={() => setEditingKey(k("t_username"))}
                    onEditEnd={() => setEditingKey(null)}
                    onSave={(v) => saveCell(row.f_username, "t_username", v)}
                  />
                </dd>
                <dt className="font-mono text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500">
                  to pw
                </dt>
                <dd>
                  <EditableCell
                    value={row.t_password}
                    label={`to password for ${row.f_username}`}
                    isCurrentlyEditing={editingKey === k("t_password")}
                    onEditStart={() => setEditingKey(k("t_password"))}
                    onEditEnd={() => setEditingKey(null)}
                    onSave={(v) => saveCell(row.f_username, "t_password", v)}
                  />
                </dd>
              </dl>
            </div>
          );
        })}
      </div>
    </div>
  );
}