"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Avatar } from "@/components/ui/Avatar";
import { Icon } from "@/components/ui/Icon";
import { Swatches } from "@/components/ui/Swatches";
import { confirmDialog, alertDialog } from "@/components/ui/Dialog";
import {
  createTeamAction,
  updateTeamAction,
  setTeamMembersAction,
  setTeamBoardsAction,
  deleteTeamAction,
} from "@/lib/admin/actions";
import type { AdminTeam, PickerUser, PickerBoard } from "@/lib/admin/queries";

export function TeamsManager({
  teams,
  users,
  boards,
}: {
  teams: AdminTeam[];
  users: PickerUser[];
  boards: PickerBoard[];
}) {
  const router = useRouter();
  const [editing, setEditing] = useState<AdminTeam | "new" | null>(null);

  const onDelete = async (t: AdminTeam) => {
    if (
      !(await confirmDialog({
        title: "Team löschen?",
        message: `„${t.name}“ wird entfernt. Der zugehörige Team-Kanal wird ebenfalls gelöscht; Boards bleiben erhalten (Zuordnung wird gelöst).`,
        danger: true,
      }))
    )
      return;
    const res = await deleteTeamAction(t.id);
    if (res.error) await alertDialog({ title: "Fehler", message: res.error, danger: true });
    else router.refresh();
  };

  return (
    <>
      <section className="card" data-reveal>
        <div className="mb-4 flex items-center justify-between">
          <div>
            <h2>Teams</h2>
            <p className="text-muted text-xs mt-0.5">
              Je Team entsteht automatisch ein Team-Kanal. Zugeordnete Boards sind nur für Team-Mitglieder sichtbar.
            </p>
          </div>
          <button className="btn btn-primary btn-sm" onClick={() => setEditing("new")}>
            <Icon name="plus" size={15} /> Team erstellen
          </button>
        </div>

        {teams.length === 0 ? (
          <p className="text-muted text-sm">Noch keine Teams angelegt.</p>
        ) : (
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
            {teams.map((t) => (
              <div key={t.id} className="card-sm" style={{ background: "rgba(13,19,42,.4)" }}>
                <div className="flex items-center gap-2">
                  <span className="team-dot" style={{ background: t.color ?? "var(--blue)" }} />
                  <h3 className="truncate flex-1">{t.name}</h3>
                </div>
                {t.description ? <p className="text-muted mt-1 text-sm">{t.description}</p> : null}

                <div className="mt-3">
                  <div className="text-muted mb-1 text-xs font-bold">Mitglieder ({t.members.length})</div>
                  <div className="assignee-stack">
                    {t.members.slice(0, 5).map((m) => (
                      <Avatar key={m.id} name={m.name} src={m.avatarUrl} size={26} />
                    ))}
                    {t.members.length > 5 ? <span className="badge" style={{ marginLeft: -8 }}>+{t.members.length - 5}</span> : null}
                    {t.members.length === 0 ? <span className="text-muted text-xs">—</span> : null}
                  </div>
                </div>

                <div className="mt-3">
                  <div className="text-muted mb-1 text-xs font-bold">Boards</div>
                  <div className="flex flex-wrap gap-1">
                    {t.boards.length ? (
                      t.boards.map((b) => (
                        <span key={b.id} className="badge"><Icon name="kanban" size={12} /> {b.name}</span>
                      ))
                    ) : (
                      <span className="text-muted text-xs">—</span>
                    )}
                  </div>
                </div>

                <div className="mt-3 flex items-center gap-2">
                  <button className="btn btn-ghost btn-sm" onClick={() => setEditing(t)}>
                    <Icon name="settings" size={14} /> Bearbeiten
                  </button>
                  <button className="btn btn-ghost btn-sm" onClick={() => onDelete(t)}>
                    <Icon name="trash" size={14} />
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </section>

      {editing ? (
        <TeamDrawer
          team={editing === "new" ? null : editing}
          users={users}
          boards={boards}
          onClose={() => setEditing(null)}
        />
      ) : null}
    </>
  );
}

function TeamDrawer({
  team,
  users,
  boards,
  onClose,
}: {
  team: AdminTeam | null;
  users: PickerUser[];
  boards: PickerBoard[];
  onClose: () => void;
}) {
  const router = useRouter();
  const isNew = !team;
  const [name, setName] = useState(team?.name ?? "");
  const [description, setDescription] = useState(team?.description ?? "");
  const [color, setColor] = useState<string | null>(team?.color ?? "#9ed7ff");
  const [memberIds, setMemberIds] = useState<string[]>(team?.memberIds ?? []);
  const [boardIds, setBoardIds] = useState<string[]>(team?.boardIds ?? []);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const toggle = (arr: string[], id: string) =>
    arr.includes(id) ? arr.filter((x) => x !== id) : [...arr, id];

  const save = async () => {
    setSaving(true);
    setError(null);
    if (isNew) {
      const res = await createTeamAction({ name, description, color, memberIds, boardIds });
      setSaving(false);
      if (res.error) return setError(res.error);
    } else {
      const res = await updateTeamAction(team!.id, { name, description, color });
      if (res.error) {
        setSaving(false);
        return setError(res.error);
      }
      await setTeamMembersAction(team!.id, memberIds);
      await setTeamBoardsAction(team!.id, boardIds);
      setSaving(false);
    }
    onClose();
    router.refresh();
  };

  return (
    <div className="drawer-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="drawer animate-in">
        <div className="mb-5 flex items-center justify-between">
          <span className="eyebrow">{isNew ? "Neues Team" : "Team bearbeiten"}</span>
          <button className="btn btn-ghost btn-sm" onClick={onClose} aria-label="Schließen">
            <Icon name="close" size={16} />
          </button>
        </div>

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

        <div className="flex flex-col gap-4">
          <div className="field">
            <label className="label">Name</label>
            <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="z. B. Redaktion" />
          </div>
          <div className="field">
            <label className="label">Beschreibung</label>
            <input className="input" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Kurzbeschreibung" />
          </div>
          <div className="field">
            <label className="label">Farbe</label>
            <Swatches value={color} onChange={setColor} />
          </div>

          <div className="field">
            <label className="label">Mitglieder ({memberIds.length})</label>
            <div className="flex flex-wrap gap-2">
              {users.map((u) => (
                <button key={u.id} type="button" className="pill" data-active={memberIds.includes(u.id)} onClick={() => setMemberIds((a) => toggle(a, u.id))}>
                  <Avatar name={u.name} src={u.avatarUrl} size={20} />
                  {u.name}
                  {memberIds.includes(u.id) ? <Icon name="check" size={13} /> : null}
                </button>
              ))}
            </div>
          </div>

          <div className="field">
            <label className="label">Kanban-Boards</label>
            <div className="flex flex-wrap gap-2">
              {boards.map((b) => (
                <button key={b.id} type="button" className="pill" data-active={boardIds.includes(b.id)} onClick={() => setBoardIds((a) => toggle(a, b.id))}>
                  <Icon name="kanban" size={14} />
                  {b.name}
                  {boardIds.includes(b.id) ? <Icon name="check" size={13} /> : null}
                </button>
              ))}
            </div>
            <p className="text-muted mt-1 text-xs">
              Ein Board kann mehreren Teams zugeordnet werden. Ohne Zuordnung ist es für alle sichtbar.
            </p>
          </div>

        </div>

        <div className="form-footer">
          <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={save} disabled={saving || !name.trim()}>
              {saving ? "Speichern …" : isNew ? "Team erstellen" : "Speichern"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}