import React, { useEffect, useState, useCallback } from "react";
import {
  Table,
  Button,
  Input,
  Select,
  Popconfirm,
  Card,
  Pagination,
  Tag,
  Form,
} from "antd";
import { Plus, Search, Send, XCircle, Eye } from "lucide-react";
import type { ColumnsType } from "antd/es/table";
import { API_Instance } from "../../api/axios.instance";
import API_Constants from "../../constants/api.constants";
import toast from "react-hot-toast";
import { getAxiosErrorMessage } from "@/utils/index.utils";
import Modal from "@/components/shared/Modal";
import { useDebounce } from "@/hooks/useDebounce";

interface IRequestData {
  id: string;
  status: "PENDING" | "VIEWED" | "PROCESSING" | "PAID" | "CANCELLED" | "EXPIRED";
  amount: number;
  duration: number;
  expiryDate: string | null;
  paidAt: string | null;
  createdAt: string;
  student: {
    id: string;
    user: { id: string; firstName: string; lastName: string; email: string; phone: string };
  };
  subscriptionPlan: { id: string; planName: string; planType: string; duration: number };
  createdBy: { id: string; firstName: string; lastName: string };
  subscription: { id: string; startDate: string; endDate: string } | null;
}

interface IStudent {
  id: string;
  user: { id: string; firstName: string; lastName: string; email: string };
}

interface IPlan {
  id: string;
  planName: string;
  planType: string;
  priceAfterDiscount: number;
  gstPercentage: number;
  duration: number;
}

const STATUS_MAP: Record<string, { label: string; color: string }> = {
  PENDING: { label: "Pending", color: "orange" },
  VIEWED: { label: "Viewed", color: "blue" },
  PROCESSING: { label: "Processing", color: "purple" },
  PAID: { label: "Paid", color: "green" },
  CANCELLED: { label: "Cancelled", color: "red" },
  EXPIRED: { label: "Expired", color: "default" },
};

const SubscriptionRequestsPage: React.FC = () => {
  const [requests, setRequests] = useState<IRequestData[]>([]);
  const [loading, setLoading] = useState(false);
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState("");
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);
  const [total, setTotal] = useState(0);
  const debouncedSearch = useDebounce(search, 600);

  const [isModalOpen, setIsModalOpen] = useState(false);
  const [createLoading, setCreateLoading] = useState(false);

  const [plans, setPlans] = useState<IPlan[]>([]);
  const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);

  const [studentSearch, setStudentSearch] = useState("");
  const [students, setStudents] = useState<IStudent[]>([]);
  const [selectedStudentId, setSelectedStudentId] = useState<string | null>(null);
  const [studentLoading, setStudentLoading] = useState(false);

  const buildQuery = useCallback(() => {
    const params = new URLSearchParams();
    params.append("page", page.toString());
    params.append("limit", limit.toString());
    if (debouncedSearch) params.append("search", debouncedSearch);
    if (statusFilter) params.append("status", statusFilter);
    return params.toString();
  }, [page, limit, debouncedSearch, statusFilter]);

  const fetchRequests = useCallback(async () => {
    setLoading(true);
    try {
      const res = await API_Instance.get(`${API_Constants.subscriptionRequests}?${buildQuery()}`);
      setRequests(res.data.data);
      setTotal(res.data.meta.total);
      setPage(res.data.meta.page);
      setLimit(res.data.meta.limit);
    } catch (error) {
      toast.error(getAxiosErrorMessage(error));
    } finally {
      setLoading(false);
    }
  }, [buildQuery]);

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

  // Load accounts for the create modal
  // useEffect(() => {
  //   API_Instance.get(API_Constants.subscriptionAccounts, { params: { limit: 1000 } })
  //     .then((res) => setSubscriptionAccounts(res.data.data))
  //     .catch(() => {});
  // }, []);

  const getSelectedStudentInstitutionId = () => {
    const selectedStudent = students.find((s) => s.id === selectedStudentId);
    return (selectedStudent as any)?.institutionId;
  };

  const fetchPlans = async () => {
    try {
      const params: any = { limit: 100 };
      const institutionId = getSelectedStudentInstitutionId();
      if (institutionId) {
        params.institutionId = institutionId;
      }

      const res = await API_Instance.get(API_Constants.subscriptionPlans, {
        params,
      });
      setPlans(res.data.data || []);
    } catch {
      setPlans([]);
    }
  };

  useEffect(() => {
    if (isModalOpen) fetchPlans();
  }, [isModalOpen, selectedStudentId]);

  const fetchStudents = async (q: string) => {
    if (!q || q.length < 2) { setStudents([]); return; }
    setStudentLoading(true);
    try {
      const res = await API_Instance.get(`${API_Constants.students}?search=${q}&limit=10`);
      setStudents(res.data.data || []);
    } catch {
      setStudents([]);
    } finally {
      setStudentLoading(false);
    }
  };

  const handleCancel = async (id: string) => {
    try {
      await API_Instance.delete(`${API_Constants.subscriptionRequests}/${id}`);
      toast.success("Request cancelled");
      fetchRequests();
    } catch (error) {
      toast.error(getAxiosErrorMessage(error));
    }
  };

  const handleCreate = async () => {
    if (!selectedPlanId || !selectedStudentId) {
      toast.error("Select a student and a plan");
      return;
    }
    setCreateLoading(true);
    try {
      await API_Instance.post(API_Constants.subscriptionRequests, {
        planId: selectedPlanId,
        studentId: selectedStudentId,
      });
      toast.success("Subscription request sent to student");
      setIsModalOpen(false);
      resetModal();
      fetchRequests();
    } catch (error) {
      toast.error(getAxiosErrorMessage(error));
    } finally {
      setCreateLoading(false);
    }
  };

  const resetModal = () => {
    setSelectedPlanId(null);
    setPlans([]);
    setStudentSearch("");
    setStudents([]);
    setSelectedStudentId(null);
  };

  const openModal = () => {
    resetModal();
    setIsModalOpen(true);
  };

  const columns: ColumnsType<IRequestData> = [
    {
      title: "Student",
      key: "student",
      width: 200,
      render: (_, r) => (
        <div>
          <span className="font-medium text-slate-700">
            {r.student?.user?.firstName} {r.student?.user?.lastName}
          </span>
          <div className="text-xs text-slate-400">{r.student?.user?.email}</div>
        </div>
      ),
    },
    {
      title: "Plan",
      key: "plan",
      width: 150,
      render: (_, r) => (
        <div>
          <span className="text-slate-700">{r.subscriptionPlan?.planName}</span>
          <div className="text-xs text-slate-400">{r.subscriptionPlan?.planType}</div>
        </div>
      ),
    },
    {
      title: "Amount",
      dataIndex: "amount",
      key: "amount",
      width: 100,
      render: (amt) => <span className="font-semibold text-slate-700">Rs.{Number(amt).toLocaleString()}</span>,
    },
    {
      title: "Status",
      dataIndex: "status",
      key: "status",
      width: 110,
      render: (status: string) => {
        const s = STATUS_MAP[status] || { label: status, color: "default" };
        return <Tag color={s.color}>{s.label}</Tag>;
      },
    },
    {
      title: "Created",
      dataIndex: "createdAt",
      key: "createdAt",
      width: 140,
      render: (d) => <span className="text-slate-500 text-sm">{d ? new Date(d).toLocaleDateString() : "-"}</span>,
    },
    {
      title: "Actions",
      key: "actions",
      width: 100,
      render: (_, r) => (
        <div className="flex space-x-2">
          {r.status === "PENDING" && (
            <Popconfirm title="Cancel this request?" onConfirm={() => handleCancel(r.id)} okText="Yes" cancelText="No">
              <button className="text-red-500 hover:text-red-700">
                <XCircle size={16} />
              </button>
            </Popconfirm>
          )}
          {r.status === "PAID" && r.subscription && (
            <button
              className="text-blue-500 hover:text-blue-700"
              onClick={() => toast("Subscription active")}
            >
              <Eye size={16} />
            </button>
          )}
        </div>
      ),
    },
  ];

  return (
    <div className="flex flex-col gap-4 px-4 py-6">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h2 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
            <Send className="text-blue-600" /> Subscription Requests
          </h2>
          <p className="text-slate-500 text-sm mt-1">
            Send subscription payment requests to students.
          </p>
        </div>
        {/* <Button type="primary" icon={<Plus size={16} />} onClick={openModal}>
          New Request
        </Button> */}
      </div>

      <Card className="shadow-sm border border-slate-200 rounded-xl">
        <div className="flex flex-col md:flex-row justify-between items-center gap-4 mb-4">
          <div className="flex gap-3 w-full">
            <Input
              placeholder="Search by student name or email..."
              prefix={<Search size={16} className="text-slate-400" />}
              className="w-full md:w-72"
              allowClear
              autoComplete="off"
              onChange={(e) => setSearch(e.target.value)}
            />
            <Select
              value={statusFilter}
              className="w-full md:w-40"
              onChange={(v) => { setStatusFilter(v); setPage(1); }}
              options={[
                { label: "All Status", value: "" },
                { label: "Pending", value: "PENDING" },
                { label: "Paid", value: "PAID" },
                { label: "Cancelled", value: "CANCELLED" },
              ]}
            />
          </div>
          <div className="text-slate-500 text-sm whitespace-nowrap">
            Total: <span className="font-semibold text-slate-800">{total}</span>
          </div>
        </div>

        <Table
          columns={columns}
          dataSource={requests}
          loading={loading}
          pagination={false}
          rowKey="id"
          scroll={{ x: 800 }}
          className="border border-slate-100 rounded-lg overflow-hidden"
        />

        <div className="flex justify-end mt-4">
          <Pagination
            current={page}
            total={total}
            pageSize={limit}
            onChange={(p, ps) => { setPage(p); setLimit(ps); }}
            showSizeChanger
            showTotal={(t) => `Total ${t} items`}
          />
        </div>
      </Card>

      {/* <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title="New Subscription Request">
        <Form layout="vertical">
          <Form.Item label="Subscription Account" required>
            <Select
              placeholder="Select account..."
              value={selectedAccountId}
              onChange={(v) => {
                setSelectedAccountId(v);
                setSelectedPlanId(null);
                fetchPlans(v);
              }}
              options={subscriptionAccounts.map((a) => ({ label: a.name, value: a.id }))}
            />
          </Form.Item>

          <Form.Item label="Plan" required>
            <Select
              placeholder="Select plan..."
              value={selectedPlanId}
              onChange={setSelectedPlanId}
              options={plans.map((p) => ({
                label: `${p.planName} (Rs.${Number(p.priceAfterDiscount).toLocaleString()})`,
                value: p.id,
              }))}
              disabled={!selectedAccountId}
            />
          </Form.Item>

          {selectedPlanId && (() => {
            const plan = plans.find((p) => p.id === selectedPlanId);
            if (!plan) return null;
            const total = Number(plan.priceAfterDiscount) + (Number(plan.priceAfterDiscount) * Number(plan.gstPercentage) / 100);
            return (
              <div className="mb-4 p-3 bg-blue-50 rounded-lg border border-blue-100">
                <div className="text-sm font-semibold text-blue-800">Price Summary</div>
                <div className="text-xs text-blue-600 mt-1">
                  Plan: Rs.{Number(plan.priceAfterDiscount).toLocaleString()} + GST {plan.gstPercentage}%
                </div>
                <div className="text-sm font-bold text-blue-900 mt-1">
                  Total: Rs.{total.toLocaleString()}
                </div>
                <div className="text-xs text-blue-500">Duration: {plan.duration} days</div>
              </div>
            );
          })()}

          <Form.Item label="Student" required>
            <Select
              showSearch
              placeholder="Search student by name..."
              value={selectedStudentId}
              filterOption={false}
              onSearch={fetchStudents}
              notFoundContent={studentLoading ? "Searching..." : null}
              onChange={setSelectedStudentId}
              options={students.map((s) => ({
                label: `${s.user?.firstName} ${s.user?.lastName} (${s.user?.email})`,
                value: s.id,
              }))}
            />
          </Form.Item>

          <div className="flex justify-end gap-3 mt-4">
            <Button onClick={() => setIsModalOpen(false)}>Cancel</Button>
            <Button type="primary" loading={createLoading} onClick={handleCreate}>
              Send Request
            </Button>
          </div>
        </Form>
      </Modal> */}
    </div>
  );
};

export default SubscriptionRequestsPage;