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 AddBrandPanel from "../../offcanvas/settings/product_brand/AddBrand";
import ConfirmationModal from "../../components/ConfirmationModal";
import clsx from "clsx";
import Switch from "../../components/Switch"; 
import necklace from "../../assets/images/product/necklace.png";
import rings from "../../assets/images/product/ring.png";
import earnings from "../../assets/images/product/earnings.png";
import IconPencilPaper from "../../components/Icon/IconPencilPaper";

type Brand = {
  id: string;
  name: string;
  description: string;
  status: boolean;
  thumbnail?: string | null;
};

const INITIAL_BRANDS: Brand[] = [
  {
    id: "1",
    name: "Necklaces",
    description: "Gold, silver and diamond necklaces",
    status: true,
    thumbnail:necklace,
  },
  {
    id: "2",
    name: "Rings",
    description: "Engagement and fashion rings",
    status: true,
    thumbnail: rings,
  },
  {
    id: "3",
    name: "Earrings",
    description: "Studs, hoops and drops",
    status: false,
    thumbnail: earnings,
  },
];

const ProductBrand = () => {
  const [categories, setCategories] = useState<Brand[]>(INITIAL_BRANDS);

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

  const [deleteItem, setDeleteItem] = useState<Brand | 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 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 columns = useMemo(
    () => [
      {
        accessor: "thumbnail",
        title: "Brand",
        render: (row: Brand) => (
          <div className="flex items-center gap-3">
            <img
              src={row.thumbnail || "https://placehold.co/40x40"}
              alt={row.name}
              className="w-10 h-10 rounded-md object-cover border"
            />

            <span className="font-medium text-slate-800">
              {row.name}
            </span>
          </div>
        ),
      },
      {
        accessor: "description",
        title: "Description",
      },
      {
        accessor: "status",
        title: "Status",
        render: (row: Brand) => (
          <Switch
            checked={row.status}
            onChange={() => toggleStatus(row.id)}
          />
        ),
      },
      {
        accessor: "actions",
        title: "Actions",
        render: (row: Brand) => (
          <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 Brand...",
        }}
        action={
          <Button
            size="sm"
            type="button"
            variant="primary"
            leftIcon={<IconPlus />}
            onClick={() => setOpenAdd(true)}
          >
            Add Brand
          </Button>
        }
      />

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

      {/* Add / Edit Offcanvas */}
      <AddBrandPanel
        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 Brand"
        message={
          deleteItem && (
            <div className="flex items-center justify-center gap-2">
              
              <span>
                Are you sure you want to delete this Brand{" "}
                <b>"{deleteItem.name}"</b>?
              </span>
            </div>
          )
        }
        confirmText="Delete"
      />
    </div>
  );
};

export default ProductBrand;