"use client";

import { useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";

type Member = {
  membershipId: string;
  role: string;
  displayName: string | null;
  email: string | null;
  phone: string | null;
  isSelf: boolean;
};

const ROLES = ["OWNER", "ADMIN", "EDITOR", "CONTRIBUTOR", "MEMBER", "VIEWER"];

export default function MembersPanel({
  trahId,
  members,
  canManage,
}: {
  trahId: string;
  members: Member[];
  canManage: boolean;
}) {
  const router = useRouter();
  const [inviteTarget, setInviteTarget] = useState("");
  const [inviteRole, setInviteRole] = useState("MEMBER");
  const [inviteLink, setInviteLink] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  async function handleInvite(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);
    setInviteLink(null);
    setBusy(true);

    try {
      const target = inviteTarget.trim();
      const body = target
        ? {
            target: {
              type: target.includes("@") ? "EMAIL" : "PHONE",
              value: target,
            },
            proposedRole: inviteRole,
          }
        : { target: { type: "LINK" }, proposedRole: inviteRole };

      const res = await fetch(`/api/trahs/${trahId}/invite`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });

      const data = (await res.json().catch(() => null)) as
        | { invitationId?: string; token?: string | null; error?: string }
        | null;

      if (res.ok && data?.token) {
        setInviteLink(`${window.location.origin}/invitations/${data.token}`);
        setInviteTarget("");
      } else {
        setError("Could not create the invitation.");
      }
    } catch {
      setError("Something went wrong. Please try again.");
    } finally {
      setBusy(false);
    }
  }

  async function handleChangeRole(membershipId: string, newRole: string) {
    setError(null);
    setBusy(true);
    try {
      const res = await fetch(`/api/trahs/${trahId}/members/${membershipId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ role: newRole }),
      });
      if (!res.ok) {
        setError("Could not change that member's role.");
        return;
      }
      router.refresh();
    } catch {
      setError("Something went wrong. Please try again.");
    } finally {
      setBusy(false);
    }
  }

  async function handleRemove(membershipId: string) {
    setError(null);
    setBusy(true);
    try {
      const res = await fetch(`/api/trahs/${trahId}/members/${membershipId}`, {
        method: "DELETE",
      });
      if (!res.ok) {
        setError("Could not remove that member.");
        return;
      }
      router.refresh();
    } catch {
      setError("Something went wrong. Please try again.");
    } finally {
      setBusy(false);
    }
  }

  return (
    <section>
      <h2>Members</h2>
      {error && (
        <p role="alert" style={{ color: "crimson" }}>
          {error}
        </p>
      )}
      <ul style={{ listStyle: "none", padding: 0 }}>
        {members.map((member) => (
          <li
            key={member.membershipId}
            style={{
              display: "flex",
              alignItems: "center",
              gap: "0.5rem",
              padding: "0.5rem 0",
              borderBottom: "1px solid #eee",
            }}
          >
            <span style={{ flex: 1 }}>
              {member.displayName ?? member.email ?? member.phone ?? member.membershipId}
              {member.isSelf ? " (you)" : ""}
            </span>

            {canManage ? (
              <select
                value={member.role}
                disabled={busy}
                onChange={(e) => handleChangeRole(member.membershipId, e.target.value)}
              >
                {ROLES.map((role) => (
                  <option key={role} value={role}>
                    {role}
                  </option>
                ))}
              </select>
            ) : (
              <span>{member.role}</span>
            )}

            {canManage && (
              <button
                type="button"
                disabled={busy}
                onClick={() => handleRemove(member.membershipId)}
              >
                Remove
              </button>
            )}
          </li>
        ))}
      </ul>

      {canManage && (
        <div style={{ marginTop: "1.5rem" }}>
          <h2>Invite someone</h2>
          <form onSubmit={handleInvite}>
            <div style={{ marginBottom: "1rem" }}>
              <label htmlFor="inviteTarget">Email or phone (leave blank for a shareable link)</label>
              <input
                id="inviteTarget"
                type="text"
                value={inviteTarget}
                onChange={(e) => setInviteTarget(e.target.value)}
                style={{ display: "block", width: "100%" }}
              />
            </div>
            <div style={{ marginBottom: "1rem" }}>
              <label htmlFor="inviteRole">Role</label>
              <select
                id="inviteRole"
                value={inviteRole}
                onChange={(e) => setInviteRole(e.target.value)}
              >
                {ROLES.filter((role) => role !== "OWNER").map((role) => (
                  <option key={role} value={role}>
                    {role}
                  </option>
                ))}
              </select>
            </div>
            <button type="submit" disabled={busy}>
              {busy ? "Sending…" : "Create invitation"}
            </button>
          </form>
          {inviteLink && (
            <p>
              Invitation link: <code>{inviteLink}</code>
            </p>
          )}
        </div>
      )}
    </section>
  );
}