"use client";

import { useState, useTransition } from "react";
import { Icon } from "@/components/ui/Icon";
import { Avatar } from "@/components/ui/Avatar";
import { createChannelAction } from "@/lib/chat/actions";

type UserOption = { id: string; name: string };

export function NewChannelDialog({ users }: { users: UserOption[] }) {
  const [open, setOpen] = useState(false);
  const [tab, setTab] = useState<"GROUP" | "DIRECT">("GROUP");
  const [name, setName] = useState("");
  const [query, setQuery] = useState("");
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [error, setError] = useState<string | null>(null);
  const [pending, startTransition] = useTransition();

  const filtered = users.filter((u) =>
    u.name.toLowerCase().includes(query.toLowerCase()),
  );

  const reset = () => {
    setName("");
    setQuery("");
    setSelected(new Set());
    setError(null);
  };

  const toggle = (id: string) => {
    setSelected((prev) => {
      const next = new Set(prev);
      if (tab === "DIRECT") {
        next.clear();
        next.add(id);
      } else if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  };

  const submit = () => {
    setError(null);
    const memberIds = [...selected];
    if (tab === "DIRECT" && memberIds.length !== 1) {
      setError("Bitte genau eine Person auswählen.");
      return;
    }
    if (tab === "GROUP" && memberIds.length === 0) {
      setError("Bitte mindestens eine Person hinzufügen.");
      return;
    }
    if (tab === "GROUP" && !name.trim()) {
      setError("Bitte einen Kanalnamen eingeben.");
      return;
    }
    startTransition(async () => {
      await createChannelAction({
        type: tab,
        name: tab === "GROUP" ? name : undefined,
        memberIds,
      });
    });
  };

  return (
    <>
      <button
        className="btn btn-primary btn-sm btn-block"
        onClick={() => {
          reset();
          setOpen(true);
        }}
      >
        <Icon name="plus" size={16} /> Neuer Kanal
      </button>

      {open ? (
        <div
          className="fixed inset-0 z-[100] flex items-center justify-center p-4"
          style={{ background: "rgba(3,5,16,.6)", backdropFilter: "blur(6px)" }}
          onMouseDown={(e) => {
            if (e.target === e.currentTarget) setOpen(false);
          }}
        >
          <div className="dialog-card animate-in w-full max-w-[480px]">
            <div className="mb-4 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <span className="dialog-icon"><Icon name="chat" size={18} /></span>
                <h2 className="leading-tight">Neuer Kanal</h2>
              </div>
              <button className="btn btn-ghost btn-sm" onClick={() => setOpen(false)} aria-label="Schließen">
                <Icon name="close" size={16} />
              </button>
            </div>

            <div className="seg mb-4">
              <button
                className="seg-btn"
                data-active={tab === "GROUP"}
                onClick={() => { setTab("GROUP"); setSelected(new Set()); }}
              >
                <Icon name="hash" size={15} /> Gruppe
              </button>
              <button
                className="seg-btn"
                data-active={tab === "DIRECT"}
                onClick={() => { setTab("DIRECT"); setSelected(new Set()); }}
              >
                <Icon name="user" size={15} /> Direkt
              </button>
            </div>

            {tab === "GROUP" ? (
              <div className="field mb-3">
                <label className="label" htmlFor="ch-name">Kanalname</label>
                <input
                  id="ch-name"
                  className="input"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder="z. B. Marketing"
                  maxLength={160}
                />
              </div>
            ) : null}

            <div className="field mb-2">
              <label className="label">
                {tab === "DIRECT" ? "Person auswählen" : `Mitglieder${selected.size ? ` · ${selected.size}` : ""}`}
              </label>
              <div className="relative">
                <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted">
                  <Icon name="search" size={15} />
                </span>
                <input
                  className="input"
                  style={{ paddingLeft: 36 }}
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  placeholder="Nach Name suchen …"
                />
              </div>
            </div>

            <div className="new-channel-list">
              {filtered.length === 0 ? (
                <p className="text-muted px-1 py-4 text-center text-sm">Niemand gefunden.</p>
              ) : (
                filtered.map((u) => {
                  const active = selected.has(u.id);
                  return (
                    <button key={u.id} className="channel-item" data-active={active} onClick={() => toggle(u.id)} type="button">
                      <Avatar name={u.name} size={34} />
                      <span className="flex-1 font-bold">{u.name}</span>
                      <span className="select-check" data-active={active}>
                        {active ? <Icon name="check" size={13} /> : null}
                      </span>
                    </button>
                  );
                })
              )}
            </div>

            {error ? <p className="field-error mt-2">{error}</p> : null}

            <button className="btn btn-primary btn-block mt-4" onClick={submit} disabled={pending}>
              {pending ? "Wird erstellt …" : tab === "DIRECT" ? "Direktnachricht starten" : "Kanal erstellen"}
            </button>
          </div>
        </div>
      ) : null}
    </>
  );
}