"use client";

import React, { useEffect, useState } from "react";
import DashboardLayout from "@/components/layout/DashboardLayout";
import { useRouter } from "next/navigation";
import apis, { BUCKET_ROOT } from "@/utils/apis";
import dayjs from "dayjs";
import {
  Pagination,
  PaginationContent,
  PaginationLink,
  PaginationItem,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from "@/components/ui/pagination";
import { useGlobalContext } from "@/context/Provider";
import { MessageSquare, Clock, AlertCircle, CheckCircle2, Eye, Calendar, ImageIcon, X } from "lucide-react";
import { Dialog, DialogContent } from "@/components/ui/dialog";

const getStatusStyle = (status: string) => {
  const normalized = status?.toLowerCase() || "pending";
  switch (normalized) {
    case "resolved":
    case "completed":
    case "closed":
      return "bg-green-50 text-green-700 border-green-200";
    case "in_progress":
    case "in progress":
    case "active":
      return "bg-blue-50 text-blue-700 border-blue-200";
    case "pending":
    case "open":
    default:
      return "bg-yellow-50 text-yellow-700 border-yellow-200";
  }
};

const getStatusLabel = (status: string) => {
  const normalized = status?.toLowerCase() || "pending";
  switch (normalized) {
    case "resolved":
    case "completed":
    case "closed":
      return "Resolved";
    case "in_progress":
    case "in progress":
    case "active":
      return "In Progress";
    case "pending":
    case "open":
    default:
      return "Pending";
  }
};

const QueryCard = ({ query, onViewImage }: { query: any; onViewImage: (url: string) => void }) => {
  const hasReply = !!query?.reply;
  const statusLabel = hasReply ? "Resolved" : getStatusLabel(query?.status || query?.query_status);
  const statusClass = hasReply ? "bg-green-50 text-green-700 border-green-200" : getStatusStyle(query?.status || query?.query_status);
  const queryText = query?.query_text || query?.description || "No description provided";
  const vendorName = query?.restaurant?.restaurant_name || query?.store?.restaurant_name || query?.restaurant_id?.restaurant_name || "Vendor Partner";
  const imageKey = query?.image || query?.image_url;

  return (
    <div className="group bg-white rounded-2xl shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 overflow-hidden flex flex-col h-fit">
      <div className="p-5 flex flex-col gap-3">
        {/* Header */}
        <div className="flex justify-between items-start gap-2">
          <div className="flex flex-col min-w-0">
            <h3 className="font-bold text-gray-900 text-lg leading-tight truncate">
              {vendorName}
            </h3>
            <div className="flex items-center text-gray-400 text-xs mt-1">
              <Calendar className="w-3.5 h-3.5 mr-1 flex-shrink-0" />
              <span>
                {dayjs(query?.createdAt || query?.created_at).isValid()
                  ? dayjs(query?.createdAt || query?.created_at).format("DD MMM YYYY, hh:mm a")
                  : "Date Unknown"}
              </span>
            </div>
          </div>
          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold border flex-shrink-0 ${statusClass}`}>
            {statusLabel}
          </span>
        </div>

        {/* Description */}
        <p className="text-gray-600 text-sm whitespace-pre-line leading-relaxed">
          {queryText}
        </p>

        {/* Vendor Reply */}
        {hasReply && (
          <div className="p-3 bg-green-50/50 border border-green-100 rounded-xl">
            <div className="flex items-center gap-1.5 text-xs font-bold text-green-700 mb-1">
              <CheckCircle2 className="w-3.5 h-3.5" />
              <span>Vendor Reply</span>
            </div>
            <p className="text-xs text-gray-700 leading-relaxed font-medium">
              {query.reply}
            </p>
            {query.replied_at && (
              <span className="text-[10px] text-gray-400 mt-1 block">
                Replied at {dayjs(query.replied_at).format("DD MMM YYYY, hh:mm a")}
              </span>
            )}
          </div>
        )}

        {/* Attachment & Details */}
        {imageKey && (
          <div className="pt-3 border-t border-gray-100 flex items-center justify-between mt-1">
            <div className="flex items-center gap-1.5 text-xs font-medium text-gray-500">
              <ImageIcon className="w-4 h-4 text-primary" />
              <span>1 Attachment</span>
            </div>
            <button
              onClick={() => {
                const fullUrl = imageKey.startsWith("http") ? imageKey : BUCKET_ROOT + imageKey;
                onViewImage(fullUrl);
              }}
              className="text-xs font-semibold text-primary hover:text-brand-700 flex items-center gap-1 transition-colors"
            >
              <Eye className="w-3.5 h-3.5" /> View Image
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

const MyQueriesList = () => {
  const router = useRouter();
  const { Toast } = useGlobalContext();
  const [list, setList] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [pageNumber, setPageNumber] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const limitItems = 9;

  const getQueries = async () => {
    try {
      setLoading(true);
      const urlSearchParam = new URLSearchParams();
      urlSearchParam.set("page", String(pageNumber));
      urlSearchParam.set("limit", String(limitItems));

      const apiRes = await apis.report.customerQueriesList(urlSearchParam.toString());
      if (apiRes) {
        const dataList = apiRes.data || (Array.isArray(apiRes) ? apiRes : []);
        const cleanList = Array.isArray(dataList) ? dataList : (dataList.list || []);
        setList(cleanList);
        const totalCount = apiRes.count || apiRes.total || cleanList.length || 0;
        setTotalPages(Math.ceil(totalCount / limitItems) || 1);
      }
    } catch (error) {
      Toast.error(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    getQueries();
  }, [pageNumber]);

  const getPaginationRange = () => {
    const start = Math.floor((pageNumber - 1) / 3) * 3 + 1;
    const end = Math.min(start + 2, totalPages);
    return { start, end };
  };

  const { start, end } = getPaginationRange();

  return (
    <div className="w-full min-h-screen bg-gray-50/50 p-4 md:p-8">
      <div className="max-w-7xl mx-auto">
        {/* Page Header */}
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
          <div>
            <h2 className="text-3xl font-bold text-gray-900 tracking-tight">Support Queries</h2>
            <p className="text-gray-500 text-sm mt-1">View the status and details of your issues sent to vendors.</p>
          </div>
        </div>

        {/* Queries Grid */}
        {loading ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            {[...Array(6)].map((_, i) => (
              <div key={i} className="bg-white rounded-2xl p-5 border border-gray-100 flex flex-col h-48 animate-pulse">
                <div className="flex justify-between items-start mb-4">
                  <div className="space-y-2 w-1/2">
                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
                    <div className="h-3 bg-gray-200 rounded w-1/2"></div>
                  </div>
                  <div className="h-5 bg-gray-200 rounded-full w-16"></div>
                </div>
                <div className="flex-1 space-y-2 mt-2">
                  <div className="h-3 bg-gray-200 rounded w-full"></div>
                  <div className="h-3 bg-gray-200 rounded w-5/6"></div>
                  <div className="h-3 bg-gray-200 rounded w-4/6"></div>
                </div>
              </div>
            ))}
          </div>
        ) : list?.length > 0 ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8 items-start">
            {list.map((query: any) => (
              <QueryCard key={query._id} query={query} onViewImage={setPreviewImage} />
            ))}
          </div>
        ) : (
          <div className="flex flex-col justify-center items-center text-gray-500 py-20 bg-white rounded-2xl border border-dashed border-gray-200">
            <div className="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mb-4">
              <MessageSquare className="w-8 h-8 text-gray-300" />
            </div>
            <p className="text-lg font-medium text-gray-900">No support queries found</p>
            <p className="text-sm text-gray-400 mt-1">If you have any issues with your orders, you can contact the vendor directly from the shop page.</p>
          </div>
        )}

        {/* Pagination */}
        {!loading && totalPages > 1 && (
          <div className="pagination-container mt-8">
            <Pagination>
              <PaginationPrevious
                onClick={() => setPageNumber((prev) => Math.max(prev - 1, 1))}
                className="pagination-btn cursor-pointer"
              />
              <PaginationContent>
                {[...Array(end - start + 1)].map((_, index) => (
                  <PaginationItem key={index}>
                    <PaginationLink
                      isActive={pageNumber === start + index}
                      onClick={() => setPageNumber(start + index)}
                      className={
                        pageNumber === start + index
                          ? "pagination-link-active cursor-pointer"
                          : "pagination-link cursor-pointer"
                      }
                    >
                      {start + index}
                    </PaginationLink>
                  </PaginationItem>
                ))}
                {end < totalPages && (
                  <PaginationEllipsis>
                    <span>...</span>
                  </PaginationEllipsis>
                )}
              </PaginationContent>
              <PaginationNext
                onClick={() => setPageNumber((prev) => Math.min(prev + 1, totalPages))}
                className="pagination-btn cursor-pointer"
              />
            </Pagination>
          </div>
        )}
      </div>

      {/* Image Lightbox Dialog */}
      <Dialog open={!!previewImage} onOpenChange={() => setPreviewImage(null)}>
        <DialogContent className="max-w-3xl bg-transparent border-none shadow-none flex justify-center items-center p-0">
          <div className="relative max-h-[85vh] max-w-full overflow-hidden rounded-xl bg-black/80 flex items-center justify-center p-4">
            <button
              onClick={() => setPreviewImage(null)}
              className="absolute top-4 right-4 z-50 bg-black/60 hover:bg-black/80 text-white rounded-full p-2 transition-all"
            >
              <X className="w-5 h-5" />
            </button>
            {previewImage && (
              <img
                src={previewImage}
                alt="Query Attachment Preview"
                className="max-h-[80vh] max-w-full object-contain rounded-lg"
              />
            )}
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default function MyQueriesPage() {
  return (
    <DashboardLayout>
      <MyQueriesList />
    </DashboardLayout>
  );
}