import { useMemo, useState } from "react";
import DynamicTable from "../../components/DynamicTable";
import Toolbar from "../../components/Toolbar";
import Button from "../../components/Buttons";
import IconPlus from "../../components/Icon/IconPlus";
import IconPencil from "../../components/Icon/IconPencil";
import IconTrashLines from "../../components/Icon/IconTrashLines";
import AddTagPanel from "../../offcanvas/settings/product_tag/AddTag";
import ConfirmationModal from "../../components/ConfirmationModal";
import clsx from "clsx";
import Switch from "../../components/Switch"; 
import IconPencilPaper from "../../components/Icon/IconPencilPaper";

type Tag = {
  id: string;
  name: string;
  description: string;
  status: boolean;
};
const COLORS = {
  cream: "#FBF6ED",
  card: "#FFFFFF",
  line: "#ECE2D2",
  ink: "#3B2F28",
  sub: "#9C8C7C",
  burgundy: "#7A2E1D",
  gold: "#C9974A",
  goldSoft: "#F6E9D2",
};
const iconBtn: React.CSSProperties = {
  width:32, height:32, borderRadius:8, border:`1px solid ${COLORS.line}`,
  background:"#fff", color:COLORS.ink, display:"flex", alignItems:"center",
  justifyContent:"center", cursor:"pointer",
};
const INITIAL_TAGS: Tag[] = [
  {
    id: "1",
    name: "Necklaces",
    description: "Gold, silver and diamond necklaces",
    status: true,
  },
  {
    id: "2",
    name: "Rings",
    description: "Engagement and fashion rings",
    status: true,
  },
  {
    id: "3",
    name: "Earrings",
    description: "Studs, hoops and drops",
    status: false,
  },
];

const ProductTag = () => {
  const [categories, setCategories] = useState<Tag[]>(INITIAL_TAGS);

  const [openAdd, setOpenAdd] = useState(false);
  const [editData, setEditData] = useState<Tag | null>(null);

  const [deleteItem, setDeleteItem] = useState<Tag | null>(null);

  // Toggle status
  const toggleStatus = (id: string) => {
    setCategories((prev) =>
      prev.map((c) =>
        c.id === id ? { ...c, status: !c.status } : c
      )
    );
  };

  // Delete
  const confirmDelete = () => {
    if (!deleteItem) return;
    setCategories((prev) => prev.filter((c) => c.id !== deleteItem.id));
  };

  const columns = useMemo(
    () => [
      {
        accessor: "name",
        title: "Tag Name",
        sortable:true,
        render: (row: Tag) => (
          <span className="font-medium text-slate-800">{row.name}</span>
        ),
      },
      {
        accessor: "description",
        title: "Description",
      },
      {
        accessor: "status",
        title: "Status",
        render: (row: Tag) => (
          <Switch
            checked={row.status}
            onChange={() => toggleStatus(row.id)}
          />
        ),
      },
      {
        accessor: "actions",
        title: "Actions",
        render: (row: Tag) => (
          <div className="flex gap-2 justify-end">
            <button
              onClick={() => setEditData(row)}
              style={iconBtn}
            >
              <IconPencilPaper />
            </button>

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

  return (
    <div className="space-y-5">

      {/* Toolbar */}
      <Toolbar
        search={{
          value: "",
          onChange: () => {},
          placeholder: "Search Tag...",
        }}
        action={
          <Button
            size="sm"
            type="button"
            variant="primary"
            leftIcon={<IconPlus />}
            onClick={() => setOpenAdd(true)}
          >
            Add Tag
          </Button>
        }
      />

      {/* Table */}
      <DynamicTable data={categories} columns={columns} height={500} />

      {/* Add / Edit Offcanvas */}
      <AddTagPanel
        open={openAdd || !!editData}
        setOpen={(v: boolean) => {
          setOpenAdd(v);
          if (!v) setEditData(null);
        }}
        editData={editData}
      />

      {/* Delete Confirmation Modal */}
      <ConfirmationModal
        isOpen={!!deleteItem}
        onClose={() => setDeleteItem(null)}
        onConfirm={confirmDelete}
        type="danger"
        title="Delete Tag"
        message={
          deleteItem && (
            <div className="flex items-center justify-center gap-2">
              
              <span>
                Are you sure you want to delete this Tag{" "}
                <b>"{deleteItem.name}"</b>?
              </span>
            </div>
          )
        }
        confirmText="Delete"
      />
    </div>
  );
};

export default ProductTag;