import { useEffect, useState } from "react";
import { Pagination, Spin, Input, Button, Modal, Form, Rate, Dropdown, Tabs } from "antd";
import { Search, Clock, ChevronDown, CheckCircle2, AlertCircle, HelpCircle, Star, User, Plus, MessageSquare, Building2 } from "lucide-react";
import { API_Instance } from "../../api/axios.instance";
import API_Constants from "../../constants/api.constants";
import toast from "react-hot-toast";
import { IFeedback, FeedbackStatus } from "@/types";
import dayjs from "dayjs";
import { useDebounce } from "@/hooks/useDebounce";
import { useAuth } from "@/hooks/useAuth";

const initialPagination = {
  page: 1,
  limit: 10,
  total: 0,
  totalPages: 0,
};

export default function FeedbackTab() {
  const [form] = Form.useForm();
  const [data, setData] = useState<IFeedback[]>([]);
  const [loading, setLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [pagination, setPagination] = useState(initialPagination);
  const [searchText, setSearchText] = useState("");
  const debouncedSearch = useDebounce(searchText, 600);
  const { user } = useAuth();

  const [activeTab, setActiveTab] = useState<string>("MY_FEEDBACK");

  const [replyForm] = Form.useForm();
  const [isReplyModalOpen, setIsReplyModalOpen] = useState(false);
  const [selectedFeedbackId, setSelectedFeedbackId] = useState<string | null>(null);
  const [replying, setReplying] = useState(false);

  const isAdmin = user?.role === 'ADMIN';
  const isInstitutionOrStaff = user?.role === 'INSTITUTION' || user?.role === 'STAFF';

  const canReplyAndChangeStatus = (feedback: IFeedback) => {
    if (activeTab === "STUDENT_FEEDBACK") return false;
    if (isAdmin && feedback.target === 'PLATFORM') return true;
    if (isInstitutionOrStaff && feedback.target === 'INSTITUTION') return true;
    return false;
  };

  const fetchData = async (
    page: number = initialPagination.page,
    limit: number = initialPagination.limit,
    search: string = "",
    tab: string = activeTab
  ) => {
    setLoading(true);
    try {
      const target = tab === "MY_FEEDBACK" ? "PLATFORM" : "INSTITUTION";
      const res = await API_Instance.get(API_Constants.feedback, {
        params: {
          page,
          limit,
          search,
          target
        },
      });
      setData(res.data.data);
      setPagination(res.data.meta);
    } catch (err: any) {
      toast.error(err?.response?.data?.message || "Failed to fetch feedback");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData(1, pagination.limit, debouncedSearch, activeTab);
  }, [debouncedSearch, activeTab]);

  const handleSubmit = async (values: any) => {
    setSubmitting(true);
    try {
      await API_Instance.post(API_Constants.feedback, {
        feedbackMessage: values.feedbackMessage,
        rating: values.rating || 0,
        target: "PLATFORM"
      });

      toast.success("Feedback submitted to Admin successfully!");
      setIsModalOpen(false);
      form.resetFields();
      fetchData(1, pagination.limit, "", activeTab);
    } catch (err: any) {
      toast.error(err?.response?.data?.message || "Failed to submit feedback");
    } finally {
      setSubmitting(false);
    }
  };

  const handleStatusChange = async (feedbackId: string, newStatus: string) => {
    try {
      await API_Instance.patch(`${API_Constants.feedback}/${feedbackId}/reply`, {
        status: newStatus
      });
      toast.success("Status updated successfully!");
      fetchData(pagination.page, pagination.limit, debouncedSearch, activeTab);
    } catch (err: any) {
      toast.error(err?.response?.data?.message || "Failed to change status");
    }
  };

  const handleReplySubmit = async (values: any) => {
    if (!selectedFeedbackId) return;
    setReplying(true);
    try {
      await API_Instance.patch(`${API_Constants.feedback}/${selectedFeedbackId}/reply`, {
        replyMessage: values.replyMessage || ""
      });

      toast.success("Reply updated successfully!");
      setIsReplyModalOpen(false);
      replyForm.resetFields();
      fetchData(pagination.page, pagination.limit, debouncedSearch, activeTab);
    } catch (err: any) {
      toast.error(err?.response?.data?.message || "Failed to save reply");
    } finally {
      setReplying(false);
    }
  };

  const statusOptions = [
    { key: FeedbackStatus.PENDING, label: "Pending", icon: <HelpCircle size={14} className="text-blue-500" /> },
    { key: FeedbackStatus.REVIEWED, label: "Reviewed", icon: <AlertCircle size={14} className="text-amber-500" /> },
    { key: FeedbackStatus.RESOLVED, label: "Resolved", icon: <CheckCircle2 size={14} className="text-emerald-500" /> },
    { key: FeedbackStatus.CLOSED, label: "Closed", icon: <HelpCircle size={14} className="text-slate-400" /> },
  ];

  const getStatusColor = (status: string) => {
    switch (status) {
      case FeedbackStatus.RESOLVED: return "text-emerald-600 bg-emerald-50 border-emerald-100";
      case FeedbackStatus.REVIEWED: return "text-amber-600 bg-amber-50 border-amber-100";
      case FeedbackStatus.CLOSED: return "text-slate-500 bg-slate-50 border-slate-100";
      case FeedbackStatus.PENDING:
      default: return "text-blue-600 bg-blue-50 border-blue-100";
    }
  };

  const renderFeedbackList = () => {
    if (loading) {
      return (
        <div className="h-64 flex items-center justify-center">
          <Spin size="default" />
        </div>
      );
    }

    if (data.length === 0) {
      return (
        <div className="py-20 flex flex-col items-center justify-center bg-slate-50/50 rounded-2xl border-2 border-dashed border-slate-100">
          <HelpCircle size={48} className="text-slate-200 mb-2" />
          <p className="text-slate-400 font-medium">No feedback records found</p>
        </div>
      );
    }

    return (
      <div className="grid grid-cols-1 gap-4">
        {data.map((feedback) => (
          <div
            key={feedback.id}
            className="group bg-white p-6 rounded-2xl border border-slate-200 hover:border-blue-200 hover:shadow-sm transition-all"
          >
            <div className="flex justify-between items-start gap-4">
              <div className="flex flex-1 gap-4">
                <div className="bg-slate-50 p-3 rounded-xl group-hover:bg-blue-50 transition-colors flex items-center justify-center h-12 w-12 shrink-0">
                  <Star className="h-6 w-6 text-slate-400 group-hover:text-blue-500" />
                </div>
                <div className="flex flex-col gap-1 flex-1">
                  <div className="flex items-center gap-3">
                    <h3 className="font-bold text-slate-800 text-lg m-0">Feedback</h3>

                    {activeTab !== "STUDENT_FEEDBACK" && feedback.target !== "INSTITUTION" && (
                      <span className={`px-3 py-1 rounded-full text-[10px] font-bold border uppercase tracking-wider ${getStatusColor(feedback.status)}`}>
                        {feedback.status}
                      </span>
                    )}

                    <div className="ml-2">
                      <Rate disabled defaultValue={feedback.rating} className="text-xs text-amber-500" />
                    </div>
                  </div>

                  <p className="text-slate-600 font-medium leading-relaxed mt-2 text-base">
                    {feedback.feedbackMessage}
                  </p>

                  {feedback.replyMessage && (
                    <div className="mt-3 p-4 bg-slate-50 rounded-xl border border-slate-100 flex items-start gap-3">
                      <CheckCircle2 size={16} className="text-emerald-500 shrink-0 mt-0.5" />
                      <div className="flex-1">
                        <p className="text-[10px] uppercase tracking-wider text-slate-400 font-bold m-0 mb-1">
                          {feedback.target === 'PLATFORM' ? 'Admin Reply' : 'Institution Response'}
                        </p>
                        <p className="text-sm text-slate-700 font-semibold m-0">
                          {feedback.replyMessage}
                        </p>
                        {feedback.repliedAt && (
                          <p className="text-[10px] font-mono text-slate-400 m-0 mt-2">
                            Replied at: {dayjs(feedback.repliedAt).format("DD MMM YYYY, hh:mm A")}
                          </p>
                        )}
                      </div>
                    </div>
                  )}

                  <div className="flex flex-wrap items-center gap-6 mt-4 pt-4 border-t border-slate-50">
                    {feedback.user?.institutionName && (
                      <div className="flex items-center gap-2 text-slate-500 text-sm">
                        <Building2 size={14} className="text-indigo-500" />
                        <span className="font-bold text-indigo-700">
                          {feedback.user.institutionName}
                        </span>
                        <span className="text-[10px] text-slate-300">|</span>
                      </div>
                    )}

                    <div className="flex items-center gap-2 text-slate-500 text-sm">
                      <User size={14} className="text-slate-400" />
                      <span className="font-semibold text-slate-700 capitalize">
                        {feedback.user?.contactPerson || feedback.user?.name || "Anonymous User"}
                      </span>
                      {feedback.user?.email && (
                        <>
                          <span className="text-[10px] text-slate-300">|</span>
                          <span className="text-xs text-slate-400">{feedback.user.email}</span>
                        </>
                      )}
                    </div>
                    <div className="flex items-center gap-2 text-slate-500 text-sm font-medium">
                      <Clock size={14} className="text-slate-400" />
                      <span>{dayjs(feedback.submittedAt).format("DD MMM YYYY, hh:mm A")}</span>
                    </div>
                  </div>
                </div>
              </div>

              <div className="flex flex-col items-end gap-3 shrink-0">
                {canReplyAndChangeStatus(feedback) && (
                  <>
                    <Dropdown
                      menu={{
                        items: statusOptions.map((opt) => ({
                          key: opt.key,
                          label: opt.label,
                          icon: opt.icon,
                          onClick: () => handleStatusChange(feedback.id, opt.key),
                        })),
                      }}
                      trigger={["click"]}
                    >
                      <Button className="rounded-xl flex items-center gap-2 font-semibold">
                        Update Status <ChevronDown size={14} />
                      </Button>
                    </Dropdown>

                    <Button
                      type="primary"
                      className="!bg-brand-green hover:!bg-brand-green/80 flex items-center gap-2"
                      onClick={() => {
                        setSelectedFeedbackId(feedback.id);
                        setIsReplyModalOpen(true);
                        replyForm.setFieldsValue({
                          replyMessage: feedback.replyMessage || ""
                        });
                      }}
                    >
                      Reply
                    </Button>
                  </>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  };

  const getTabItems = () => {
    if (isInstitutionOrStaff) {
      return [
        {
          key: "STUDENT_FEEDBACK",
          label: (
            <span className="flex items-center gap-2 font-semibold px-1">
              <MessageSquare size={16} /> Student Feedbacks
            </span>
          )
        },
        {
          key: "MY_FEEDBACK",
          label: (
            <span className="flex items-center gap-2 font-semibold px-1">
              <Star size={16} /> Platform Feedback
            </span>
          )
        },
      ];
    }

    return [
      {
        key: "ALL_FEEDBACK",
        label: <span className="font-semibold px-1">All Feedbacks</span>
      }
    ];
  };

  return (
    <div className="flex flex-col gap-5 p-2">

      {isInstitutionOrStaff && (
        <Tabs
          activeKey={activeTab}
          onChange={(key) => {
            setActiveTab(key);
            setSearchText("");
          }}
          className="feedback-tabs border-b border-slate-100"
          items={getTabItems()}
        />
      )}

      <div className="flex flex-col md:flex-row justify-between items-center gap-4 mt-2">
        <div className="w-full md:w-72">
          <Input
            placeholder="Search status..."
            prefix={<Search size={16} className="text-slate-400" />}
            allowClear
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
            className="rounded-lg h-9"
          />
        </div>
        <div className="text-slate-500 text-sm font-medium">
          Total Feedbacks: <span className="font-bold text-slate-800">{pagination.total}</span>
        </div>
      </div>

      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-slate-50 p-4 rounded-xl border border-slate-100">
        <div>
          <div>
            <h3 className="text-lg font-bold text-slate-800 m-0">
              {isAdmin
                ? "Feedback from Institutions"
                : activeTab === "MY_FEEDBACK"
                ? "Feedback to Platform"
                : "Feedback from Students"}
            </h3>
            <p className="text-slate-500 text-sm m-0 mt-0.5">
              {isAdmin
                ? "Review and manage feedback, feature requests, or suggestions submitted by institutions and staff to improve the platform."
                : activeTab === "MY_FEEDBACK"
                ? "Submit your feedback, feature requests, or suggestions to help us improve the platform. Your entries are directly reviewed by the administration team."
                : "Review and analyze the feedback and suggestions submitted by your students."}
            </p>
          </div>
        </div>
        {!isAdmin && activeTab === "MY_FEEDBACK" && (
          <Button
            type="primary"
            icon={<Plus className="h-4 w-4" />}
            className="!bg-brand-green hover:!bg-brand-green/80 flex items-center gap-2"
            onClick={() => setIsModalOpen(true)}
          >
            Send Feedback to Platform
          </Button>
        )}
      </div>

      {renderFeedbackList()}

      {!loading && data.length > 0 && (
        <div className="flex justify-end mt-4">
          <Pagination
            current={pagination.page}
            total={pagination.total}
            pageSize={pagination.limit}
            onChange={(p, pageSize) => {
              setPagination((prev) => ({ ...prev, page: p, limit: pageSize }));
              fetchData(p, pageSize, searchText, activeTab);
            }}
            showSizeChanger
            showTotal={(total) => `Total ${total} feedbacks`}
          />
        </div>
      )}

      <Modal
        title={
          <div className="border-b border-slate-100 pb-3 text-slate-800 font-bold text-base">
            Send Feedback to Administration
          </div>
        }
        open={isModalOpen}
        onCancel={() => !submitting && setIsModalOpen(false)}
        footer={null}
        destroyOnClose
        centered
        width={500}
      >
        <Form form={form} layout="vertical" onFinish={handleSubmit} className="mt-4" requiredMark={false}>
          <Form.Item name="rating" label="Rate your experience" initialValue={5}>
            <Rate className="text-amber-500 text-xl" />
          </Form.Item>

          <Form.Item
            name="feedbackMessage"
            label="Your Message"
            rules={[
              { required: true, message: "Please type your message before submitting" },
              { min: 3, message: "Feedback must contain at least 3 characters" }
            ]}
          >
            <Input.TextArea
              rows={4}
              placeholder="Describe your issue, suggestion, or overall experience clearly..."
              className="rounded-lg resize-none"
            />
          </Form.Item>

          <div className="flex justify-end gap-2 pt-3 border-t border-slate-100 mt-6">
            <Button disabled={submitting} onClick={() => setIsModalOpen(false)}>Cancel</Button>
            <Button type="primary" htmlType="submit" loading={submitting} className="bg-indigo-600 hover:bg-indigo-700 px-5">
              Submit Feedback
            </Button>
          </div>
        </Form>
      </Modal>

      <Modal
        title={
          <div className="border-b border-slate-100 pb-3 text-slate-800 font-bold text-base">
            {activeTab === 'MY_FEEDBACK' ? 'View/Edit Admin Reply' : 'Add Institution Reply'}
          </div>
        }
        open={isReplyModalOpen}
        onCancel={() => !replying && setIsReplyModalOpen(false)}
        footer={null}
        destroyOnClose
        centered
        width={500}
      >
        <Form form={replyForm} layout="vertical" onFinish={handleReplySubmit} className="mt-4" requiredMark={false}>
          <Form.Item name="replyMessage" label="Your Reply Message">
            <Input.TextArea
              rows={4}
              placeholder="Type your response to the user here (if any)..."
              className="rounded-lg resize-none"
            />
          </Form.Item>

          <div className="flex justify-end gap-2 pt-3 border-t border-slate-100 mt-6">
            <Button disabled={replying} onClick={() => setIsReplyModalOpen(false)}>Cancel</Button>
            <Button type="primary" htmlType="submit" loading={replying} className="bg-indigo-600 hover:bg-indigo-700 px-5">
              Submit Reply
            </Button>
          </div>
        </Form>
      </Modal>
    </div>
  );
}