import { useMemo, useState, useEffect } from "react";
import DynamicTable from "../../components/DynamicTable";
import Toolbar from "../../components/Toolbar";
import Button from "../../components/Buttons";
import IconPlus from "../../components/Icon/IconPlus";
import IconTrashLines from "../../components/Icon/IconTrashLines";
import IconPencilPaper from "../../components/Icon/IconPencilPaper";
import Switch from "../../components/Switch";
import ConfirmationModal from "../../components/ConfirmationModal";
import PaymentStatusOffcanvas from "../../offcanvas/settings/payment/PaymentStatus";
import { paymentStatusApi } from "../../api/paymentStatusApi";
import Swal from "sweetalert2";

type PaymentStatus = {
  id: string;
  name: string;
  description: string;
  textColor: string;
  bgColor: string;
  status: boolean;
};

const PaymentStatusPage = () => {
  const [data, setData] = useState<PaymentStatus[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");

  const [open, setOpen] = useState(false);
  const [editData, setEditData] = useState<PaymentStatus | null>(null);
  const [deleteItem, setDeleteItem] = useState<PaymentStatus | null>(null);

  // Fetch status list on mount
  const fetchStatuses = async () => {
    try {
      const res = await paymentStatusApi.getAll();
      if (res.success && Array.isArray(res.data)) {
        setData(res.data);
      }
    } catch (err) {
      console.error("Failed to fetch payment statuses:", err);
    } finally {
      setLoading(false);
    }
  };

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

  // toggle status
  const toggleStatus = async (id: string, currentStatus: boolean) => {
    try {
      const res = await paymentStatusApi.update(id, { status: !currentStatus });
      if (res.success) {
        setData((prev) =>
          prev.map((item) =>
            item.id === id ? { ...item, status: !currentStatus } : item
          )
        );
        Swal.fire({
          icon: 'success',
          title: 'Status updated successfully',
          toast: true,
          position: 'top-end',
          showConfirmButton: false,
          timer: 3000
        });
      }
    } catch (err) {
      console.error("Failed to toggle status:", err);
    }
  };

  // create / edit save handler
  const handleSave = async (formData: any) => {
    try {
      if (editData) {
        const res = await paymentStatusApi.update(editData.id, formData);
        if (res.success) {
          setData((prev) =>
            prev.map((item) => (item.id === editData.id ? res.data : item))
          );
          setOpen(false);
          Swal.fire({
            icon: 'success',
            title: 'Payment Status updated successfully',
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000
          });
        }
      } else {
        const res = await paymentStatusApi.create(formData);
        if (res.success) {
          setData((prev) => [...prev, res.data]);
          setOpen(false);
          Swal.fire({
            icon: 'success',
            title: 'Payment Status created successfully',
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000
          });
        }
      }
    } catch (err) {
      console.error("Failed to save payment status:", err);
      Swal.fire({
        icon: 'error',
        title: 'Failed to save',
        text: 'Please try again.',
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000
      });
    }
  };

  // delete
  const confirmDelete = async () => {
    if (!deleteItem) return;
    try {
      const res = await paymentStatusApi.delete(deleteItem.id);
      if (res.success) {
        setData((prev) => prev.filter((x) => x.id !== deleteItem.id));
        setDeleteItem(null);
        Swal.fire({
          icon: 'success',
          title: 'Payment Status deleted successfully',
          toast: true,
          position: 'top-end',
          showConfirmButton: false,
          timer: 3000
        });
      }
    } catch (err) {
      console.error("Failed to delete payment status:", err);
      Swal.fire({
        icon: 'error',
        title: 'Delete Failed',
        text: 'Please try again.',
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000
      });
    }
  };

  // Filter local data based on search input
  const filteredData = useMemo(() => {
    if (!searchQuery) return data;
    return data.filter(
      (item) =>
        item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        (item.description &&
          item.description.toLowerCase().includes(searchQuery.toLowerCase()))
    );
  }, [data, searchQuery]);

  const columns = useMemo(
    () => [
      {
        accessor: "name",
        title: "Payment Status",
        render: (row: PaymentStatus) => (
          <span className="px-3 py-1 rounded-full text-sm font-semibold inline-block">
            {row.name}
          </span>
        ),
      },
      {
        accessor: "description",
        title: "Description",
      },
      {
        accessor: "preview",
        title: "Preview",
        render: (row: PaymentStatus) => (
          <span
            className="px-3 py-1 rounded-full text-xs font-semibold"
            style={{
              backgroundColor: row.bgColor,
              color: row.textColor,
            }}
          >
            {row.name}
          </span>
        ),
      },
      {
        accessor: "status",
        title: "Status",
        render: (row: PaymentStatus) => (
          <Switch
            checked={row.status}
            onChange={() => toggleStatus(row.id, row.status)}
          />
        ),
      },
      {
        accessor: "actions",
        title: "Actions",
        render: (row: PaymentStatus) => (
          <div className="flex gap-2 justify-end">
            <button
              onClick={() => {
                setEditData(row);
                setOpen(true);
              }}
            >
              <IconPencilPaper />
            </button>

            <button onClick={() => setDeleteItem(row)}>
              <IconTrashLines className="text-red-600" />
            </button>
          </div>
        ),
      },
    ],
    [toggleStatus]
  );

  if (loading) {
    return (
      <div className="flex h-40 items-center justify-center">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-amber-500 border-t-transparent"></div>
      </div>
    );
  }

  return (
    <div className="space-y-5">
      {/* TOOLBAR */}
      <Toolbar
        search={{
          value: searchQuery,
          onChange: (e: any) => setSearchQuery(e.target.value),
          placeholder: "Search payment status...",
        }}
        action={
          <Button
            size="sm"
            type="button"
            variant="primary"
            leftIcon={<IconPlus />}
            onClick={() => {
              setEditData(null);
              setOpen(true);
            }}
            children="Add Payment Status"
          />
        }
      />

      {/* TABLE */}
      <DynamicTable data={filteredData} columns={columns} height={500} />

      {/* OFFCANVAS */}
      <PaymentStatusOffcanvas
        open={open}
        setOpen={setOpen}
        editData={editData}
        onSave={handleSave}
      />

      {/* DELETE MODAL */}
      <ConfirmationModal
        isOpen={!!deleteItem}
        onClose={() => setDeleteItem(null)}
        onConfirm={confirmDelete}
        type="danger"
        title="Delete Payment Status"
        message={
          deleteItem && (
            <span>
              Delete <b>{deleteItem.name}</b> ?
            </span>
          )
        }
        confirmText="Delete"
      />
    </div>
  );
};

export default PaymentStatusPage;