"use client";

import { useEffect, useMemo, useState } from "react";
import {
  Hash,
  MessageSquareText,
  Search,
  Send,
  Users2,
} from "lucide-react";
import { Avatar } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Modal } from "@/components/ui/modal";
import { Skeleton } from "@/components/ui/skeleton";
import { Textarea } from "@/components/ui/textarea";
import { useChat } from "@/hooks/use-chat";
import { cn } from "@/lib/utils";
import type { ChatThread } from "@/types";

export interface ChatSharePayload {
  files: File[];
  message?: string;
}

interface ShareToChatModalProps {
  open: boolean;
  onClose: () => void;
  buildPayload: () => Promise<ChatSharePayload>;
  title?: string;
  description?: string;
  defaultMessage?: string;
}

function getThreadTitle(thread: ChatThread, userId: string | null) {
  if (thread.thread_type === "direct") {
    const other = thread.participants?.find((participant) => participant.user_id !== userId)?.user;
    return other?.full_name || other?.username || other?.email || "Direktnachricht";
  }

  return thread.title || "Unbenannter Chat";
}

function getThreadSubtitle(thread: ChatThread, userId: string | null) {
  if (thread.thread_type === "direct") {
    const other = thread.participants?.find((participant) => participant.user_id !== userId)?.user;
    if (thread.last_message?.body) return thread.last_message.body;
    return other?.username ? `@${other.username}` : "Direktnachricht";
  }

  if (thread.last_message?.body) return thread.last_message.body;
  if (thread.thread_type === "channel") return thread.description || "Team-Kanal";
  return `${thread.participants?.length || 0} Mitglieder`;
}

export function ShareToChatModal({
  open,
  onClose,
  buildPayload,
  title = "An Chat senden",
  description = "Wähle einen Chat und sende die Datei direkt als Anhang.",
  defaultMessage = "",
}: ShareToChatModalProps) {
  const { loading, user, threads, sendMessageWithAttachments } = useChat();
  const [query, setQuery] = useState("");
  const [selectedThreadId, setSelectedThreadId] = useState<string | null>(null);
  const [message, setMessage] = useState(defaultMessage);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState("");

  const filteredThreads = useMemo(() => {
    const normalized = query.trim().toLowerCase();
    if (!normalized) return threads;

    return threads.filter((thread) => {
      const titleText = getThreadTitle(thread, user?.id || null).toLowerCase();
      const subtitleText = getThreadSubtitle(thread, user?.id || null).toLowerCase();
      return titleText.includes(normalized) || subtitleText.includes(normalized);
    });
  }, [query, threads, user?.id]);

  const selectedThread = useMemo(
    () => threads.find((thread) => thread.id === selectedThreadId) || null,
    [selectedThreadId, threads]
  );

  useEffect(() => {
    if (!open) return;
    setError("");
    setQuery("");
    setMessage(defaultMessage);
  }, [defaultMessage, open]);

  useEffect(() => {
    if (!open) return;
    if (filteredThreads.length === 0) {
      setSelectedThreadId(null);
      return;
    }

    if (!selectedThreadId || !filteredThreads.some((thread) => thread.id === selectedThreadId)) {
      setSelectedThreadId(filteredThreads[0].id);
    }
  }, [filteredThreads, open, selectedThreadId]);

  async function handleSend() {
    if (!selectedThread) {
      setError("Wähle zuerst einen Chat aus.");
      return;
    }

    setSending(true);
    setError("");

    try {
      const payload = await buildPayload();
      const files = (payload.files || []).filter(Boolean);

      if (files.length === 0) {
        throw new Error("Es konnte keine Datei zum Senden erstellt werden.");
      }

      await sendMessageWithAttachments(selectedThread, {
        body: message.trim() || payload.message || defaultMessage || "",
      }, files);

      onClose();
    } catch (nextError) {
      setError(nextError instanceof Error ? nextError.message : "Senden fehlgeschlagen.");
    } finally {
      setSending(false);
    }
  }

  return (
    <Modal open={open} onClose={onClose} title={title} className="max-w-2xl">
      <div className="space-y-4">
        <p className="text-sm text-muted-foreground">{description}</p>

        <div className="grid gap-4 lg:grid-cols-[0.95fr_1.05fr]">
          <div className="space-y-3">
            <div className="relative">
              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                value={query}
                onChange={(event) => setQuery(event.target.value)}
                placeholder="Chat suchen..."
                className="pl-9"
              />
            </div>

            <div className="max-h-[360px] space-y-1 overflow-y-auto rounded-xl border border-border/60 p-2">
              {loading ? (
                <div className="space-y-2">
                  <Skeleton className="h-14 rounded-lg" />
                  <Skeleton className="h-14 rounded-lg" />
                  <Skeleton className="h-14 rounded-lg" />
                </div>
              ) : filteredThreads.length === 0 ? (
                <div className="rounded-lg border border-dashed border-border/60 px-4 py-8 text-center text-sm text-muted-foreground">
                  Keine Chats gefunden.
                </div>
              ) : (
                filteredThreads.map((thread) => {
                  const threadTitle = getThreadTitle(thread, user?.id || null);
                  const subtitle = getThreadSubtitle(thread, user?.id || null);
                  const isSelected = thread.id === selectedThreadId;

                  return (
                    <button
                      key={thread.id}
                      onClick={() => setSelectedThreadId(thread.id)}
                      className={cn(
                        "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors",
                        isSelected
                          ? "bg-primary/10 ring-1 ring-primary/20"
                          : "hover:bg-accent/60"
                      )}
                    >
                      {thread.thread_type === "direct" ? (
                        <Avatar
                          src={thread.participants?.find((participant) => participant.user_id !== user?.id)?.user?.avatar_url}
                          name={threadTitle}
                          size="sm"
                        />
                      ) : thread.thread_type === "channel" ? (
                        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/10 text-primary">
                          <Hash className="h-4 w-4" />
                        </div>
                      ) : (
                        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/10 text-primary">
                          <Users2 className="h-4 w-4" />
                        </div>
                      )}

                      <div className="min-w-0 flex-1">
                        <p className="truncate text-sm font-medium">
                          {thread.thread_type === "channel" ? "# " : ""}
                          {threadTitle}
                        </p>
                        <p className="truncate text-xs text-muted-foreground">{subtitle}</p>
                      </div>
                    </button>
                  );
                })
              )}
            </div>
          </div>

          <div className="space-y-3 rounded-xl border border-border/60 bg-background/50 p-4">
            <div className="flex items-center gap-2">
              <MessageSquareText className="h-4 w-4 text-primary" />
              <p className="text-sm font-medium">Begleitnachricht</p>
            </div>

            <Textarea
              value={message}
              onChange={(event) => setMessage(event.target.value)}
              placeholder="Optionaler Text für den Chat..."
              className="min-h-[180px]"
            />

            {selectedThread && (
              <div className="rounded-lg bg-muted/50 px-3 py-2 text-xs text-muted-foreground">
                Sendet an{" "}
                <span className="font-medium text-foreground">
                  {selectedThread.thread_type === "channel" ? "# " : ""}
                  {getThreadTitle(selectedThread, user?.id || null)}
                </span>
              </div>
            )}

            {error && (
              <div className="rounded-lg border border-rose-500/20 bg-rose-500/10 px-3 py-2 text-xs text-rose-300">
                {error}
              </div>
            )}
          </div>
        </div>

        <div className="flex justify-end gap-2">
          <Button variant="ghost" onClick={onClose} disabled={sending}>
            Abbrechen
          </Button>
          <Button onClick={() => void handleSend()} disabled={sending || !selectedThread}>
            <Send className="h-4 w-4" />
            {sending ? "Wird gesendet..." : "An Chat senden"}
          </Button>
        </div>
      </div>
    </Modal>
  );
}