import { createFileRoute } from "@tanstack/react-router";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import { useState } from "react";
import { Loader2, Pencil, Trash2, UserPlus } from "lucide-react";
import { useBusiness } from "@/lib/business-context";
import {
  Card,
  Field,
  PartnerShell,
  StatusPill,
  inputClass,
} from "@/components/partner/PartnerShell";
import { Drawer } from "@/components/partner/Drawer";
import { listTeam, removeTeamMember, saveTeamMember } from "@/lib/partner.functions";
import { TEAM_PERMISSIONS, TEAM_ROLES } from "@/lib/partner-catalog";

export const Route = createFileRoute("/_partner/partner/team")({
  head: () => ({
    meta: [
      { title: "Team Management — Airfis Partner" },
      {
        name: "description",
        content: "Invite staff, assign roles and control permissions for your Airfis account.",
      },
      { property: "og:title", content: "Team Management — Airfis Partner" },
      {
        property: "og:description",
        content: "Manage staff, roles and permissions in the Airfis partner console.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary" },
      { name: "robots", content: "noindex" },
    ],
  }),
  component: TeamPage,
});

type Member = {
  id: string;
  name: string;
  role: string;
  phone: string | null;
  email: string | null;
  permissions: string[] | null;
  status: string;
};

function TeamPage() {
  const qc = useQueryClient();
  const { activeId } = useBusiness();
  const fetchTeam = useServerFn(listTeam);
  const save = useServerFn(saveTeamMember);
  const remove = useServerFn(removeTeamMember);

  const { data, isLoading } = useQuery({
    queryKey: ["partner", "team", activeId],
    queryFn: () => fetchTeam({ data: { businessId: activeId } }),
  });
  const members = (data ?? []) as unknown as Member[];

  const [open, setOpen] = useState(false);
  const [editing, setEditing] = useState<Member | null>(null);
  const [name, setName] = useState("");
  const [role, setRole] = useState(TEAM_ROLES[1]!);
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");
  const [perms, setPerms] = useState<string[]>(["View requests"]);
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);

  function openInvite() {
    setEditing(null);
    setName("");
    setRole(TEAM_ROLES[1]!);
    setPhone("");
    setEmail("");
    setPerms(["View requests"]);
    setError("");
    setOpen(true);
  }

  function openEdit(m: Member) {
    setEditing(m);
    setName(m.name);
    setRole(m.role);
    setPhone((m.phone ?? "").replace(/\D/g, "").slice(-10));
    setEmail(m.email ?? "");
    setPerms(m.permissions ?? []);
    setError("");
    setOpen(true);
  }

  async function submit() {
    setError("");
    if (name.trim().length < 3) return setError("Enter the team member's name.");
    if (!/^[6-9]\d{9}$/.test(phone)) return setError("Enter a valid 10-digit mobile number.");
    setBusy(true);
    try {
      await save({
        data: {
          businessId: activeId,
          member: {
            ...(editing ? { id: editing.id } : {}),
            name: name.trim(),
            role,
            phone: `+91 ${phone}`,
            email: email.trim() || null,
            permissions: perms,
            status: editing ? editing.status : "invited",
          },
        },
      });
      setOpen(false);
      await qc.invalidateQueries({ queryKey: ["partner", "team"] });
    } catch (e) {
      setError(e instanceof Error ? e.message : "Could not save");
    } finally {
      setBusy(false);
    }
  }

  return (
    <PartnerShell
      title="Users & Team"
      description="Users of the selected business — roles and permissions"
      actions={
        <button
          type="button"
          onClick={openInvite}
          disabled={isLoading}
          className="btn-brand inline-flex items-center gap-2 text-sm disabled:opacity-50"
        >
          <UserPlus className="h-4 w-4" /> Invite a user
        </button>
      }
    >
      {isLoading ? (
        <Card className="flex justify-center py-20">
          <Loader2 className="h-5 w-5 animate-spin text-ink-3" />
        </Card>
      ) : (
        <div className="space-y-6">
          <Card>
            <h3 className="font-bold text-ink">Users in this business</h3>
            <div className="mt-4 space-y-3">
              {members.length === 0 && <p className="text-sm text-ink-2">No users added yet.</p>}
              {members.map((m) => (
                <div
                  key={m.id}
                  className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-hairline px-4 py-3"
                >
                  <div className="min-w-0">
                    <p className="text-sm font-semibold text-ink">
                      {m.name} <span className="text-ink-3 font-normal">· {m.role}</span>
                    </p>
                    <p className="text-xs text-ink-2">
                      {[m.phone, m.email].filter(Boolean).join(" · ")}
                      {(m.permissions ?? []).length ? ` — ${(m.permissions ?? []).join(", ")}` : ""}
                    </p>
                  </div>
                  <div className="flex items-center gap-3">
                    <StatusPill status={m.status} />
                    <button
                      type="button"
                      aria-label={`Edit ${m.name}`}
                      onClick={() => openEdit(m)}
                      className="text-ink-3 hover:text-[#FF4308]"
                    >
                      <Pencil className="h-4 w-4" />
                    </button>
                    <button
                      type="button"
                      aria-label={`Remove ${m.name}`}
                      onClick={async () => {
                        await remove({ data: { businessId: activeId, id: m.id } });
                        await qc.invalidateQueries({ queryKey: ["partner", "team"] });
                      }}
                      className="text-ink-3 hover:text-rose-600"
                    >
                      <Trash2 className="h-4 w-4" />
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>
      )}

      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        title={editing ? "Edit user" : "Invite a user to this business"}
        description="Name, role, contact and permissions"
      >
        <div className="space-y-5">
          <Field label="Name">
            <input className={inputClass} value={name} onChange={(e) => setName(e.target.value)} />
          </Field>
          <Field label="Role">
            <select className={inputClass} value={role} onChange={(e) => setRole(e.target.value)}>
              {TEAM_ROLES.map((r) => (
                <option key={r} value={r}>
                  {r}
                </option>
              ))}
            </select>
          </Field>
          <Field label="Mobile">
            <input
              inputMode="numeric"
              className={inputClass}
              value={phone}
              onChange={(e) => setPhone(e.target.value.replace(/\D/g, "").slice(0, 10))}
            />
          </Field>
          <Field label="Email (optional)">
            <input
              className={inputClass}
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </Field>
          <Field label="Permissions">
            <div className="flex flex-wrap gap-2">
              {TEAM_PERMISSIONS.map((p) => (
                <button
                  key={p}
                  type="button"
                  onClick={() =>
                    setPerms((prev) =>
                      prev.includes(p) ? prev.filter((x) => x !== p) : [...prev, p],
                    )
                  }
                  className={`rounded-full px-3.5 py-1.5 text-sm font-medium transition-colors ${
                    perms.includes(p)
                      ? "bg-[#ffebe3] text-[#FF4308]"
                      : "bg-[#f4f4f3] text-ink-2 hover:bg-[#ececea]"
                  }`}
                >
                  {p}
                </button>
              ))}
            </div>
          </Field>
          {error && <p className="text-sm text-rose-700">{error}</p>}
          <div className="flex gap-3 pt-2">
            <button
              type="button"
              onClick={submit}
              disabled={busy}
              className="btn-brand inline-flex items-center gap-2 disabled:opacity-50"
            >
              {busy ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <UserPlus className="h-4 w-4" />
              )}
              {editing ? "Save changes" : "Send invite"}
            </button>
            <button type="button" onClick={() => setOpen(false)} className="btn-ghost">
              Cancel
            </button>
          </div>
        </div>
      </Drawer>
    </PartnerShell>
  );
}