"use client";

import { Suspense } from "react";
import { useEffect, useMemo, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { useAuth } from "@/context/AuthContext";
import { api } from "@/lib/api";
import { SupportTicket, SupportMessage } from "@/types";
import { useSettings } from "@/context/SettingsContext";
import { Loader2, MessageCircle, ArrowRight, ArrowLeft } from "lucide-react";

function SupportContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { user, isLoading: authLoading } = useAuth();
  const { locale } = useSettings();

  const [tickets, setTickets] = useState<SupportTicket[]>([]);
  const [selectedId, setSelectedId] = useState<number | null>(null);
  const [selectedTicket, setSelectedTicket] = useState<(SupportTicket & { messages: SupportMessage[] }) | null>(null);
  const [loadingTickets, setLoadingTickets] = useState(true);
  const [loadingTicket, setLoadingTicket] = useState(false);
  const [creating, setCreating] = useState(false);
  const [newSubject, setNewSubject] = useState("");
  const [newMessage, setNewMessage] = useState("");
  const [replyText, setReplyText] = useState("");
  const [sendingReply, setSendingReply] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const initialOrderId = useMemo(() => {
    const val = searchParams.get("order_id");
    if (!val) return null;
    const parsed = Number(val);
    return Number.isNaN(parsed) ? null : parsed;
  }, [searchParams]);

  useEffect(() => {
    if (!authLoading && !user) {
      router.push("/login?redirect=/support");
      return;
    }
    if (!user) return;

    const load = async () => {
      setLoadingTickets(true);
      try {
        const res = await api.getSupportTickets();
        if (res.data) {
          setTickets(res.data);
          if (res.data.length > 0) {
            setSelectedId(res.data[0].id);
          }
        }
      } catch {
        setError("Unable to load support tickets right now.");
      } finally {
        setLoadingTickets(false);
      }
    };

    load();
  }, [user, authLoading, router]);

  useEffect(() => {
    if (!selectedId) {
      setSelectedTicket(null);
      return;
    }
    const loadTicket = async () => {
      setLoadingTicket(true);
      try {
        const res = await api.getSupportTicketById(selectedId);
        if (res.data) {
          setSelectedTicket(res.data as any);
        }
      } catch {
        setError("Unable to load this conversation.");
      } finally {
        setLoadingTicket(false);
      }
    };
    loadTicket();
  }, [selectedId]);

  const handleCreateTicket = async () => {
    if (!newSubject.trim() || !newMessage.trim()) {
      setError("Subject and message are required.");
      return;
    }
    setError(null);
    setCreating(true);
    try {
      const res = await api.createSupportTicket({
        subject: newSubject.trim(),
        message: newMessage.trim(),
        order_id: initialOrderId || undefined,
      });
      if (res.data) {
        const list = [res.data, ...tickets];
        setTickets(list);
        setSelectedId(res.data.id);
        setNewSubject("");
        setNewMessage("");
      }
    } catch {
      setError("Failed to create support ticket. Please try again.");
    } finally {
      setCreating(false);
    }
  };

  const handleReply = async () => {
    if (!selectedId || !replyText.trim()) return;
    setSendingReply(true);
    setError(null);
    try {
      const res = await api.replySupportTicket(selectedId, replyText.trim());
      if (res.data && selectedTicket) {
        const updatedMessages = [...(selectedTicket.messages || []), res.data];
        setSelectedTicket({ ...selectedTicket, messages: updatedMessages });
        const updatedTickets = tickets.map((t) =>
          t.id === selectedId
            ? {
                ...t,
                last_message_at: res.data.created_at,
                last_message_preview: res.data.message.slice(0, 120),
                last_message_is_admin: Boolean(res.data.is_admin),
              }
            : t
        );
        setTickets(updatedTickets);
        setReplyText("");
      }
    } catch {
      setError("Failed to send reply. Please try again.");
    } finally {
      setSendingReply(false);
    }
  };

  const formatDateTime = (value: string | undefined | null) => {
    if (!value) return "";
    try {
      return new Date(value).toLocaleString(locale);
    } catch {
      return value;
    }
  };

  return (
    <div className="min-h-screen bg-zinc-50">
      <Header />
      <main className="container mx-auto px-4 py-8 lg:py-12">
        <div className="max-w-5xl mx-auto">
          <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
            <div>
              <p className="text-[10px] font-black text-emerald-600 uppercase tracking-[0.25em] mb-2">
                Help & Support
              </p>
              <h1 className="text-3xl md:text-4xl font-black text-zinc-900 tracking-tight">
                Talk to our support team.
              </h1>
              <p className="text-sm text-zinc-500 mt-2 max-w-xl">
                Raise a ticket for any order or account issue and chat directly with an expert from our support team.
              </p>
            </div>
            <button
              onClick={() => {
                const el = document.getElementById("new-ticket-card");
                if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
              }}
              className="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-2xl bg-zinc-900 text-white text-xs font-black uppercase tracking-[0.2em] shadow-lg shadow-zinc-300 hover:bg-black"
            >
              New ticket
              <ArrowRight size={14} />
            </button>
          </div>

          {error && (
            <div className="mb-6 rounded-2xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm text-rose-700">
              {error}
            </div>
          )}

          <div className="grid grid-cols-1 lg:grid-cols-[260px,minmax(0,1fr)] gap-6">
            <section className="bg-white rounded-3xl border border-zinc-100 shadow-sm p-4 md:p-5 flex flex-col">
              <div className="flex items-center gap-2 mb-4">
                <div className="w-9 h-9 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center">
                  <MessageCircle size={18} />
                </div>
                <div>
                  <p className="text-xs font-black text-zinc-900 uppercase tracking-[0.22em]">
                    Your tickets
                  </p>
                  <p className="text-[11px] text-zinc-400">
                    {tickets.length} active conversations
                  </p>
                </div>
              </div>

              {loadingTickets ? (
                <div className="flex-1 flex items-center justify-center py-10">
                  <Loader2 className="w-5 h-5 text-emerald-600 animate-spin" />
                </div>
              ) : tickets.length === 0 ? (
                <div className="flex-1 flex flex-col items-center justify-center text-center py-10 px-4">
                  <div className="w-10 h-10 rounded-2xl bg-zinc-50 flex items-center justify-center mb-3">
                    <MessageCircle size={18} className="text-zinc-400" />
                  </div>
                  <p className="text-sm font-semibold text-zinc-900 mb-1">
                    No tickets yet
                  </p>
                  <p className="text-xs text-zinc-500">
                    Create your first ticket from the form on the right.
                  </p>
                </div>
              ) : (
                <div className="flex-1 overflow-y-auto space-y-2 pr-1">
                  {tickets.map((ticket) => {
                    const isActive = ticket.id === selectedId;
                    const status = ticket.status.toLowerCase();
                    const badgeClasses =
                      status === "open"
                        ? "bg-emerald-50 text-emerald-700 border-emerald-100"
                        : status === "pending"
                        ? "bg-amber-50 text-amber-700 border-amber-100"
                        : "bg-zinc-50 text-zinc-600 border-zinc-100";

                    return (
                      <button
                        key={ticket.id}
                        onClick={() => setSelectedId(ticket.id)}
                        className={`w-full text-left rounded-2xl border px-3.5 py-3 transition-all ${
                          isActive
                            ? "border-emerald-200 bg-emerald-50/60"
                            : "border-zinc-100 bg-white hover:border-zinc-200"
                        }`}
                      >
                        <div className="flex items-center justify-between gap-2 mb-1.5">
                          <p className="text-[11px] font-black text-zinc-500 uppercase tracking-[0.2em]">
                            Ticket #{String(ticket.id).padStart(3, "0")}
                          </p>
                          <span
                            className={`inline-flex items-center px-2 py-0.5 rounded-full border text-[10px] font-semibold ${badgeClasses}`}
                          >
                            {status === "open"
                              ? "Open"
                              : status === "pending"
                              ? "Pending"
                              : "Closed"}
                          </span>
                        </div>
                        <p className="text-xs font-semibold text-zinc-900 line-clamp-2 mb-1">
                          {ticket.subject}
                        </p>
                        {ticket.last_message_preview && (
                          <p className="text-[11px] text-zinc-400 line-clamp-1">
                            {ticket.last_message_preview}
                          </p>
                        )}
                        <p className="text-[10px] text-zinc-400 mt-1">
                          Updated {formatDateTime(ticket.last_message_at || ticket.created_at)}
                        </p>
                      </button>
                    );
                  })}
                </div>
              )}
            </section>

            <section className="space-y-6">
              <div
                id="new-ticket-card"
                className="bg-white rounded-3xl border border-zinc-100 shadow-sm p-6"
              >
                <div className="flex items-center justify-between gap-3 mb-4">
                  <div>
                    <p className="text-[10px] font-black text-zinc-400 uppercase tracking-[0.25em] mb-1">
                      Create new ticket
                    </p>
                    <p className="text-sm text-zinc-500">
                      Share maximum details so we can resolve faster.
                    </p>
                  </div>
                  {initialOrderId && (
                    <span className="inline-flex items-center px-3 py-1 rounded-full bg-zinc-50 border border-zinc-100 text-[11px] font-semibold text-zinc-600">
                      Linked to order #{initialOrderId}
                    </span>
                  )}
                </div>
                <div className="space-y-3">
                  <input
                    type="text"
                    value={newSubject}
                    onChange={(e) => setNewSubject(e.target.value)}
                    placeholder="Subject (for example: Issue with my delivery)"
                    className="w-full border border-zinc-200 rounded-2xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-100 focus:border-emerald-400"
                  />
                  <textarea
                    value={newMessage}
                    onChange={(e) => setNewMessage(e.target.value)}
                    placeholder="Describe your issue clearly. Include order number, item name, and what went wrong."
                    rows={4}
                    className="w-full border border-zinc-200 rounded-2xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-100 focus:border-emerald-400 resize-none"
                  />
                </div>
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mt-4">
                  <p className="text-[11px] text-zinc-400">
                    Support responds typically within{" "}
                    <span className="font-semibold text-zinc-600">15–30 minutes</span> during
                    business hours.
                  </p>
                  <button
                    onClick={handleCreateTicket}
                    disabled={creating}
                    className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-2xl bg-emerald-600 text-white text-xs font-black uppercase tracking-[0.2em] disabled:opacity-60"
                  >
                    {creating && <Loader2 size={14} className="animate-spin" />}
                    Submit ticket
                  </button>
                </div>
              </div>

              <div className="bg-white rounded-3xl border border-zinc-100 shadow-sm p-6 min-h-[280px] flex flex-col">
                <div className="flex items-center justify-between gap-3 mb-4">
                  <div>
                    <p className="text-[10px] font-black text-zinc-400 uppercase tracking-[0.25em] mb-1">
                      Conversation
                    </p>
                    <p className="text-sm text-zinc-500">
                      View and reply to messages from our support team.
                    </p>
                  </div>
                  {selectedTicket && (
                    <span className="inline-flex items-center gap-2 text-[11px] text-zinc-500">
                      <ArrowLeft size={14} />
                      Scroll to see older messages
                    </span>
                  )}
                </div>

                {loadingTicket ? (
                  <div className="flex-1 flex items-center justify-center">
                    <Loader2 className="w-5 h-5 text-emerald-600 animate-spin" />
                  </div>
                ) : !selectedTicket ? (
                  <div className="flex-1 flex flex-col items-center justify-center text-center text-sm text-zinc-500">
                    Select a ticket from the left to view the conversation.
                  </div>
                ) : (
                  <>
                    <div className="flex-1 overflow-y-auto space-y-3 pr-1 pb-4">
                      {selectedTicket.messages?.map((msg) => {
                        const isMine = !msg.is_admin;
                        return (
                          <div
                            key={msg.id}
                            className={`flex ${isMine ? "justify-end" : "justify-start"}`}
                          >
                            <div className="max-w-[80%]">
                              <div className="flex items-center gap-2 mb-1">
                                <span className="text-[10px] font-semibold text-zinc-500">
                                  {isMine ? "You" : "Support team"}
                                </span>
                                <span className="text-[10px] text-zinc-400">
                                  {formatDateTime(msg.created_at)}
                                </span>
                              </div>
                              <div
                                className={`rounded-2xl px-4 py-2.5 text-sm leading-relaxed ${
                                  isMine
                                    ? "bg-emerald-600 text-white rounded-br-sm"
                                    : "bg-zinc-100 text-zinc-900 rounded-bl-sm"
                                }`}
                              >
                                {msg.message}
                              </div>
                            </div>
                          </div>
                        );
                      })}
                    </div>

                    <div className="pt-4 border-t border-zinc-100 mt-auto">
                      <div className="flex items-center gap-3">
                        <textarea
                          value={replyText}
                          onChange={(e) => setReplyText(e.target.value)}
                          rows={2}
                          placeholder="Type your reply..."
                          className="flex-1 border border-zinc-200 rounded-2xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-100 focus:border-emerald-400 resize-none"
                        />
                        <button
                          onClick={handleReply}
                          disabled={sendingReply || !replyText.trim()}
                          className="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-2xl bg-zinc-900 text-white text-xs font-black uppercase tracking-[0.18em] disabled:opacity-60"
                        >
                          {sendingReply ? (
                            <Loader2 size={14} className="animate-spin" />
                          ) : (
                            <MessageCircle size={14} />
                          )}
                          Send
                        </button>
                      </div>
                    </div>
                  </>
                )}
              </div>
            </section>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}

export default function SupportPage() {
  return (
    <Suspense>
      <SupportContent />
    </Suspense>
  );
}