"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Icon } from "@/components/ui/Icon";
import { SharePicker, type ShareTargets } from "@/components/ui/SharePicker";
import { setCloudSharesAction } from "@/lib/cloud/actions";
import type { CloudTarget } from "@/lib/cloud/queries";

export type ShareSubject = {
  kind: "folder" | "file";
  id: string;
  name: string;
  users: CloudTarget[];
  teams: CloudTarget[];
  roles: CloudTarget[];
};

/** Eigener Dialog nur für Freigaben — von Ordnern wie von Dateien. */
export function ShareDialog({
  subject,
  targets,
  onClose,
}: {
  subject: ShareSubject;
  targets: ShareTargets;
  onClose: () => void;
}) {
  const router = useRouter();
  const [userIds, setUserIds] = useState<string[]>(subject.users.map((u) => u.id));
  const [teamIds, setTeamIds] = useState<string[]>(subject.teams.map((t) => t.id));
  const [roleIds, setRoleIds] = useState<string[]>(subject.roles.map((r) => r.id));
  const [canEdit, setCanEdit] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const count = userIds.length + teamIds.length + roleIds.length;

  const save = async () => {
    setError(null);
    setSaving(true);
    const res = await setCloudSharesAction(
      subject.kind === "folder" ? { folderId: subject.id } : { fileId: subject.id },
      { userIds, teamIds, roleIds, canEdit },
    );
    setSaving(false);
    if (res.error) return setError(res.error);
    onClose();
    router.refresh();
  };

  return (
    <div className="dialog-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="dialog-card dialog-wide animate-in" role="dialog" aria-modal="true">
        <div className="mb-4 flex items-start gap-3">
          <span
            className="vault-mark"
            style={{ color: "var(--blue)", background: "rgba(158,215,255,.12)" }}
          >
            <Icon name="share" size={18} />
          </span>
          <div className="min-w-0 flex-1">
            <h3 className="leading-tight">Freigeben</h3>
            <p className="text-muted mt-1 truncate text-sm">
              {subject.kind === "folder" ? "Ordner" : "Datei"} „{subject.name}“
            </p>
          </div>
        </div>

        {error ? <p className="field-error mb-3">{error}</p> : null}

        <div className="flex flex-col gap-3">
          <SharePicker
            targets={targets}
            userIds={userIds}
            teamIds={teamIds}
            roleIds={roleIds}
            onUsers={setUserIds}
            onTeams={setTeamIds}
            onRoles={setRoleIds}
          />

          {count > 0 ? (
            <>
              <div className="segmented self-start">
                <button
                  type="button"
                  className="segmented-btn"
                  data-active={!canEdit}
                  onClick={() => setCanEdit(false)}
                >
                  <Icon name="eye" size={14} /> Nur lesen
                </button>
                <button
                  type="button"
                  className="segmented-btn"
                  data-active={canEdit}
                  onClick={() => setCanEdit(true)}
                >
                  <Icon name="edit" size={14} /> Bearbeiten
                </button>
              </div>
              {subject.kind === "folder" ? (
                <p className="text-muted text-xs">
                  Die Freigabe gilt auch für alle Unterordner und deren Dateien.
                </p>
              ) : null}
            </>
          ) : null}
        </div>

        <div className="mt-5 flex items-center justify-between gap-2">
          <span className="text-muted text-xs">
            {count === 0 ? "Keine Freigabe — nur für dich sichtbar" : `${count} Freigabe(n)`}
          </span>
          <div className="flex items-center gap-2">
            <button className="btn btn-ghost" onClick={onClose} disabled={saving}>
              Abbrechen
            </button>
            <button className="btn btn-primary" onClick={() => void save()} disabled={saving}>
              {saving ? "Speichern …" : "Übernehmen"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}