"use client";

import { useState, useEffect, useCallback } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { PlusIcon, SearchIcon, ArrowLeftIcon, SendIcon, PaperclipIcon } from "lucide-react";
import { formatDistanceToNow } from "date-fns";
import { getTickets, getTicket, getTicketTransactions, getQueues, createTicket } from "@/lib/api";
import type { Ticket, Queue, Transaction } from "@/lib/types";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

const STATUS_COLORS: Record<string, string> = {
  new: "#8a8f98",
  open: "#7170ff",
  in_progress: "#f59e0b",
  resolved: "#22c55e",
  closed: "#6b7280",
};

const STATUS_LABELS: Record<string, string> = {
  new: "New",
  open: "Open",
  in_progress: "In progress",
  resolved: "Resolved",
  closed: "Closed",
};

const FILTERS = [
  { key: null, label: "All" },
  { key: "open", label: "Open" },
  { key: "in_progress", label: "In progress" },
  { key: "resolved", label: "Resolved" },
  { key: "my", label: "My tickets" },
  { key: "unassigned", label: "Unassigned" },
] as const;

type FilterKey = (typeof FILTERS)[number]["key"];

function getInitial(name: string): string {
  if (!name) return "?";
  return name.charAt(0).toUpperCase();
}

function getInitialColor(name: string): string {
  const colors = ["#5e6ad2", "#7170ff", "#828fff", "#f59e0b", "#22c55e"];
  let hash = 0;
  for (let i = 0; i < name.length; i++) {
    hash = name.charCodeAt(i) + ((hash << 5) - hash);
  }
  return colors[Math.abs(hash) % colors.length];
}

function TicketRow({ ticket, selected, onClick }: { ticket: Ticket; selected: boolean; onClick: () => void }) {
  const statusColor = STATUS_COLORS[ticket.status] || STATUS_COLORS.new;
  const shortId = ticket.id.slice(0, 8);
  const timeAgo = formatDistanceToNow(new Date(ticket.updated_at), { addSuffix: true });

  return (
    <button
      onClick={onClick}
      className={cn(
        "w-full flex items-center gap-3 py-4 px-4 text-left transition-all duration-150 border-l-2 border-b border-border",
        selected
          ? "bg-accent border-l-primary"
          : "border-l-transparent hover:bg-accent hover:border-l-primary"
      )}
    >
      <span
        className="w-2 h-2 rounded-full flex-shrink-0"
        style={{ backgroundColor: statusColor }}
      />
      <span className="font-mono text-xs text-muted-foreground w-16 flex-shrink-0">
        {shortId}
      </span>
      <span className="text-sm text-foreground flex-1 truncate font-medium">
        {ticket.subject}
      </span>
      <span className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded font-medium flex-shrink-0">
        {ticket.queue_id.slice(0, 8)}
      </span>
      {ticket.owner_id ? (
        <span className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
          <span className="text-primary-foreground text-[10px] font-semibold leading-none">
            {ticket.owner_id.charAt(0).toUpperCase()}
          </span>
        </span>
      ) : (
        <span className="w-5 h-5 rounded-full border border-border flex items-center justify-center flex-shrink-0">
          <span className="text-muted-foreground text-[10px]">?</span>
        </span>
      )}
      <span className="text-xs text-muted-foreground w-24 text-right flex-shrink-0 tabular-nums">
        {timeAgo}
      </span>
    </button>
  );
}

function SkeletonRow() {
  return (
    <div className="flex items-center gap-3 py-4 px-4 border-b border-border">
      <div className="w-2 h-2 rounded-full bg-muted animate-pulse" />
      <div className="w-16 h-3 bg-muted rounded animate-pulse" />
      <div className="flex-1 h-3 bg-muted rounded animate-pulse" />
      <div className="w-12 h-4 bg-muted rounded animate-pulse" />
      <div className="w-5 h-5 rounded-full bg-muted animate-pulse" />
      <div className="w-20 h-3 bg-muted rounded animate-pulse" />
    </div>
  );
}

function TicketDetailPanel({
  ticketId,
  onBack,
}: {
  ticketId: string;
  onBack: () => void;
}) {
  const [ticket, setTicket] = useState<Ticket | null>(null);
  const [transactions, setTransactions] = useState<Transaction[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [replyText, setReplyText] = useState("");

  useEffect(() => {
    setLoading(true);
    setError(null);
    setTicket(null);
    setTransactions([]);
    setReplyText("");
    Promise.all([
      getTicket(ticketId),
      getTicketTransactions(ticketId),
    ]).then(([ticketRes, txRes]) => {
      if (ticketRes.error) {
        setError(ticketRes.error);
      } else {
        setTicket(ticketRes.data);
      }
      if (txRes.data) {
        setTransactions(txRes.data);
      }
      setLoading(false);
    });
  }, [ticketId]);

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="flex items-center gap-3 px-4 py-2.5 border-b border-border shrink-0">
        <button
          onClick={onBack}
          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-all duration-150 flex-shrink-0"
        >
          <ArrowLeftIcon className="w-3.5 h-3.5" />
          Back
        </button>
      </div>

      {loading && (
        <div className="flex-1 p-4 space-y-4 overflow-y-auto">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="flex gap-3">
              <div className="w-6 h-6 rounded-full bg-muted animate-pulse" />
              <div className="flex-1 space-y-2">
                <div className="h-3 bg-muted rounded animate-pulse w-3/4" />
                <div className="h-3 bg-muted rounded animate-pulse w-1/2" />
              </div>
            </div>
          ))}
        </div>
      )}

      {error && (
        <div className="flex flex-col items-center justify-center flex-1">
          <p className="text-sm text-destructive">{error}</p>
        </div>
      )}

      {!loading && !error && ticket && (
        <>
          {/* Title */}
          <div className="px-4 py-3 border-b border-border shrink-0">
            <h2 className="text-sm font-semibold truncate">
              {ticket.subject}
            </h2>
            <p className="text-xs text-muted-foreground mt-0.5">
              <span className="font-mono">{ticket.id.slice(0, 8)}</span>
            </p>
          </div>

          {/* Conversation */}
          <div className="flex-1 overflow-y-auto">
            {transactions.length === 0 && (
              <div className="flex flex-col items-center justify-center py-20">
                <p className="text-sm text-muted-foreground">
                  No activity yet
                </p>
              </div>
            )}
            {transactions.map((tx) => {
              const isSystem =
                tx.transaction_type === "status_change" ||
                tx.transaction_type === "assignment" ||
                tx.transaction_type === "create";
              const isAgent =
                tx.transaction_type === "agent_reply" ||
                tx.transaction_type === "internal_note";

              if (isSystem) {
                const txTimeAgo = formatDistanceToNow(
                  new Date(tx.created_at),
                  { addSuffix: true }
                );
                let message = "";
                if (tx.transaction_type === "create") {
                  message = "Ticket created";
                } else if (tx.transaction_type === "status_change") {
                  const oldLabel = tx.old_value
                    ? STATUS_LABELS[tx.old_value] || tx.old_value
                    : "?";
                  const newLabel = tx.new_value
                    ? STATUS_LABELS[tx.new_value] || tx.new_value
                    : "?";
                  message = `${getInitial(tx.creator_id)} changed status from ${oldLabel} to ${newLabel}`;
                } else if (tx.transaction_type === "assignment") {
                  message = tx.new_value
                    ? `${getInitial(tx.creator_id)} assigned to ${tx.new_value}`
                    : `${getInitial(tx.creator_id)} unassigned`;
                } else {
                  message = tx.transaction_type;
                }
                return (
                  <div
                    key={tx.id}
                    className="flex justify-center py-2"
                  >
                    <span className="text-xs text-muted-foreground">
                      {message} · {txTimeAgo}
                    </span>
                  </div>
                );
              }

              const isInternal =
                tx.transaction_type === "internal_note";
              const txTimeAgo = formatDistanceToNow(
                new Date(tx.created_at),
                { addSuffix: true }
              );

              return (
                <div
                  key={tx.id}
                  className={cn(
                    "flex gap-3 py-3 px-4",
                    isAgent ? "flex-row-reverse" : ""
                  )}
                >
                  <div
                    className="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0"
                    style={{
                      backgroundColor: isAgent
                        ? getInitialColor(tx.creator_id)
                        : "var(--muted)",
                    }}
                  >
                    <span
                      className="text-[11px] font-semibold"
                      style={{
                        color: isAgent
                          ? "#f7f8f8"
                          : "var(--muted-foreground)",
                      }}
                    >
                      {getInitial(tx.creator_id)}
                    </span>
                  </div>
                  <div
                    className={cn(
                      "max-w-[75%] rounded-lg px-3 py-2",
                      isAgent
                        ? "bg-primary/15 text-foreground"
                        : isInternal
                          ? "bg-muted border border-border text-foreground"
                          : "bg-muted text-foreground"
                    )}
                  >
                    {isInternal && (
                      <div className="text-[10px] font-semibold text-chart-3 mb-0.5 uppercase tracking-wider">
                        Internal note
                      </div>
                    )}
                    <p className="text-sm whitespace-pre-wrap">
                      {typeof tx.data === "object" &&
                      tx.data !== null &&
                      "body" in (tx.data as Record<string, unknown>)
                        ? String(
                            (tx.data as Record<string, unknown>).body
                          )
                        : tx.transaction_type}
                    </p>
                    <p className="text-[10px] text-muted-foreground mt-1">
                      {txTimeAgo}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Reply box */}
          <div className="border-t border-border bg-sidebar p-3 shrink-0">
            <div className="flex items-end gap-2">
              <textarea
                value={replyText}
                onChange={(e) => setReplyText(e.target.value)}
                placeholder="Reply to this ticket..."
                rows={2}
                className="flex-1 px-3 py-2 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary resize-none transition-all duration-150"
              />
              <div className="flex items-center gap-1">
                <button
                  className="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-all duration-150"
                  title="Attach file (coming soon)"
                >
                  <PaperclipIcon className="w-4 h-4" />
                </button>
                <button
                  disabled={!replyText.trim()}
                  className={cn(
                    "w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-150",
                    replyText.trim()
                      ? "bg-primary text-primary-foreground hover:bg-primary/80"
                      : "bg-muted text-muted-foreground cursor-not-allowed"
                  )}
                >
                  <SendIcon className="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

function TicketListPageContent() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const [tickets, setTickets] = useState<Ticket[]>([]);
  const [queues, setQueues] = useState<Queue[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [activeFilter, setActiveFilter] = useState<FilterKey>(null);
  const [searchQuery, setSearchQuery] = useState("");

  // New ticket dialog
  const [dialogOpen, setDialogOpen] = useState(false);
  const [newSubject, setNewSubject] = useState("");
  const [newQueueId, setNewQueueId] = useState("");
  const [newDescription, setNewDescription] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [createError, setCreateError] = useState<string | null>(null);

  // Selected ticket
  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null);

  const initialQueueId = searchParams.get("queue") || "";

  const fetchData = useCallback(async () => {
    setLoading(true);
    setError(null);

    const statusParam = activeFilter && activeFilter !== "my" && activeFilter !== "unassigned"
      ? activeFilter
      : undefined;

    const [ticketsRes, queuesRes] = await Promise.all([
      getTickets(statusParam ? { status: statusParam } : undefined),
      getQueues(),
    ]);

    if (ticketsRes.error) {
      setError(ticketsRes.error);
      setTickets([]);
    } else {
      let result = ticketsRes.data ?? [];

      if (activeFilter === "my") {
        result = result.filter((t) => t.owner_id);
      } else if (activeFilter === "unassigned") {
        result = result.filter((t) => !t.owner_id);
      }

      if (initialQueueId && !activeFilter) {
        result = result.filter((t) => t.queue_id === initialQueueId);
      }

      if (searchQuery) {
        const q = searchQuery.toLowerCase();
        result = result.filter((t) => t.subject.toLowerCase().includes(q));
      }

      setTickets(result);
    }

    if (queuesRes.data) {
      setQueues(queuesRes.data);
    }

    setLoading(false);
  }, [activeFilter, searchQuery, initialQueueId]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  // Check for "new" query param to open dialog
  useEffect(() => {
    if (searchParams.get("new") === "true") {
      setDialogOpen(true);
      const url = new URL(window.location.href);
      url.searchParams.delete("new");
      window.history.replaceState({}, "", url.toString());
    }
  }, [searchParams]);

  const handleCreate = async () => {
    if (!newSubject.trim() || !newQueueId) return;
    setSubmitting(true);
    setCreateError(null);

    const { data, error } = await createTicket({
      subject: newSubject.trim(),
      queue_id: newQueueId,
    });

    setSubmitting(false);

    if (error) {
      setCreateError(error);
    } else if (data) {
      setDialogOpen(false);
      setNewSubject("");
      setNewQueueId("");
      setNewDescription("");
      setSelectedTicketId(data.id);
      // Refresh the list to show the new ticket
      fetchData();
    }
  };

  const handleSelectTicket = (ticketId: string) => {
    setSelectedTicketId(ticketId);
  };

  const handleDeselectTicket = () => {
    setSelectedTicketId(null);
  };

  return (
    <div className="flex h-full">
      {/* Ticket list column */}
      <div
        className={cn(
          "flex flex-col h-full overflow-hidden transition-[width] duration-300 ease-out",
          selectedTicketId
            ? "w-full flex-shrink-0 border-r border-border max-lg:hidden lg:w-[40%] lg:min-w-[360px]"
            : "flex-1 min-w-0"
        )}
      >
        {/* Top bar */}
        <div className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0">
          <div className="relative flex-1">
            <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
            <input
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Search tickets..."
              className="w-full h-8 pl-9 pr-3 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all duration-150"
            />
          </div>
          <Button
            onClick={() => setDialogOpen(true)}
            className="h-8 px-3 rounded-lg text-sm font-medium bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
          >
            <PlusIcon className="w-4 h-4 mr-1.5" />
            New ticket
          </Button>
        </div>

        {/* Filter chips */}
        <div className="flex items-center gap-1.5 px-4 py-2 border-b border-border shrink-0">
          {FILTERS.map((filter) => (
            <button
              key={filter.key ?? "all"}
              onClick={() => setActiveFilter(filter.key)}
              className={cn(
                "px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-150",
                activeFilter === filter.key
                  ? "bg-primary text-primary-foreground"
                  : "text-muted-foreground hover:text-foreground hover:bg-accent"
              )}
            >
              {filter.label}
            </button>
          ))}
        </div>

        {/* Ticket list */}
        <div className="flex-1 overflow-y-auto">
          {error && (
            <div className="px-4 py-3 text-sm text-destructive bg-destructive/5 border-b border-destructive/10">
              {error}{" "}
              <button
                onClick={fetchData}
                className="underline hover:text-destructive/80"
              >
                Retry
              </button>
            </div>
          )}

          {loading &&
            Array.from({ length: 12 }).map((_, i) => <SkeletonRow key={i} />)}

          {!loading &&
            !error &&
            tickets.length === 0 && (
              <div className="flex flex-col items-center justify-center py-20 px-4">
                <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4">
                  <SearchIcon className="w-5 h-5 text-muted-foreground" />
                </div>
                <p className="text-sm text-foreground font-medium">
                  No tickets match your filters
                </p>
                <p className="text-xs text-muted-foreground mt-1">
                  Try adjusting your search or filter criteria
                </p>
                <Button
                  onClick={() => setDialogOpen(true)}
                  className="mt-4 h-8 px-3 rounded-lg text-sm font-medium bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
                >
                  <PlusIcon className="w-4 h-4 mr-1.5" />
                  Create a ticket
                </Button>
              </div>
            )}

          {!loading &&
            !error &&
            tickets.map((ticket) => (
              <TicketRow
                key={ticket.id}
                ticket={ticket}
                selected={ticket.id === selectedTicketId}
                onClick={() => handleSelectTicket(ticket.id)}
              />
            ))}
        </div>
      </div>

      {/* Ticket detail column */}
      {selectedTicketId && (
        <div
          className="flex-1 min-w-0 lg:min-w-[480px] overflow-hidden"
          style={{ animation: "slide-in-right 300ms ease-out" }}
        >
          <TicketDetailPanel
            ticketId={selectedTicketId}
            onBack={handleDeselectTicket}
          />
        </div>
      )}

      {/* Create ticket dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent
          className="sm:max-w-md"
          showCloseButton={true}
        >
          <DialogHeader>
            <DialogTitle>New ticket</DialogTitle>
            <DialogDescription>
              Create a new ticket to track an issue or request.
            </DialogDescription>
          </DialogHeader>

          <div className="flex flex-col gap-3">
            <div>
              <label className="block text-xs font-medium text-foreground mb-1">
                Subject
              </label>
              <input
                value={newSubject}
                onChange={(e) => setNewSubject(e.target.value)}
                placeholder="Ticket subject"
                className="w-full h-8 px-2.5 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all duration-150"
                autoFocus
              />
            </div>

            <div>
              <label className="block text-xs font-medium text-foreground mb-1">
                Queue
              </label>
              <div className="relative">
                <select
                  value={newQueueId}
                  onChange={(e) => setNewQueueId(e.target.value)}
                  className="w-full h-8 px-2.5 rounded-lg bg-background border border-border text-sm text-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary appearance-none transition-all duration-150"
                >
                  <option value="" disabled>
                    Select a queue...
                  </option>
                  {queues.map((q) => (
                    <option key={q.id} value={q.id}>
                      {q.name}
                    </option>
                  ))}
                </select>
                <svg
                  className="absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              </div>
            </div>

            <div>
              <label className="block text-xs font-medium text-foreground mb-1">
                Description{" "}
                <span className="text-muted-foreground font-normal">
                  (optional)
                </span>
              </label>
              <textarea
                value={newDescription}
                onChange={(e) => setNewDescription(e.target.value)}
                placeholder="Add a description..."
                rows={3}
                className="w-full px-2.5 py-2 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary resize-none transition-all duration-150"
              />
            </div>
          </div>

          {createError && (
            <p className="text-xs text-destructive">{createError}</p>
          )}

          <DialogFooter showCloseButton={false}>
            <button
              onClick={handleCreate}
              disabled={!newSubject.trim() || !newQueueId || submitting}
              className={cn(
                "h-8 px-4 rounded-lg text-sm font-medium transition-all duration-150",
                "bg-primary hover:bg-primary/80 text-primary-foreground",
                "disabled:opacity-40 disabled:cursor-not-allowed"
              )}
            >
              {submitting ? "Creating..." : "Create ticket"}
            </button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

import { Suspense } from "react";

export default function TicketListPage() {
  return (
    <Suspense fallback={<div className="flex items-center justify-center h-64 text-muted-foreground">Loading tickets...</div>}>
      <TicketListPageContent />
    </Suspense>
  );
}