// src/components/team-member-sites-dialog.tsx — owner/admin pick which sites a
// member can access. Loads the member's current grants on open, saves the
// checked set. Owner/admin gating is also enforced server-side in the actions.
"use client";

import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import {
  getMemberSiteIdsAction,
  setMemberSiteAccessAction,
} from "@/lib/sites/access-actions";

export function MemberSitesDialog({
  userId,
  memberName,
  sites,
}: {
  userId: string;
  memberName: string;
  sites: { id: string; name: string }[];
}) {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [checked, setChecked] = useState<Set<string>>(new Set());

  async function onOpenChange(o: boolean) {
    setOpen(o);
    if (!o) return;
    setLoading(true);
    try {
      const ids = await getMemberSiteIdsAction(userId);
      setChecked(new Set(ids));
    } catch {
      toast.error("Impossible de charger les accès.");
    } finally {
      setLoading(false);
    }
  }

  function toggle(id: string, on: boolean) {
    setChecked((prev) => {
      const next = new Set(prev);
      if (on) next.add(id);
      else next.delete(id);
      return next;
    });
  }

  async function save() {
    setSaving(true);
    try {
      await setMemberSiteAccessAction(userId, [...checked]);
      toast.success("Accès aux sites mis à jour.");
      setOpen(false);
    } catch {
      toast.error("Impossible d'enregistrer.");
    } finally {
      setSaving(false);
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogTrigger asChild>
        <Button variant="outline" size="sm">
          Sites
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>Sites partagés</DialogTitle>
          <DialogDescription>
            Choisis les sites auxquels {memberName} a accès.
          </DialogDescription>
        </DialogHeader>
        {loading ? (
          <p className="text-muted-foreground text-sm">Chargement…</p>
        ) : sites.length === 0 ? (
          <p className="text-muted-foreground text-sm">
            Aucun site dans cette organisation.
          </p>
        ) : (
          <div className="grid max-h-72 gap-2 overflow-auto">
            {sites.map((s) => (
              <Label
                key={s.id}
                className="flex items-center gap-2 rounded-md border p-2 font-normal"
              >
                <Checkbox
                  checked={checked.has(s.id)}
                  onCheckedChange={(v) => toggle(s.id, v === true)}
                />
                <span className="min-w-0 truncate">{s.name}</span>
              </Label>
            ))}
          </div>
        )}
        <div className="flex justify-end gap-2">
          <Button
            variant="outline"
            onClick={() => setOpen(false)}
            disabled={saving}
          >
            Annuler
          </Button>
          <Button onClick={save} disabled={saving || loading}>
            {saving ? "Enregistrement…" : "Enregistrer"}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}