"use client";

import { Skeleton as AntSkeleton, Table } from "antd";
import CustomerDetailsSkeleton from "./SkeltorLoaders/CustomerDetailsSkeleton";

export default function SkeletonLoader({
  type = "table", // table | card | text | list | viewlist
  rows = 5,
  columns = 2,

}) {
  /* =======================
     TABLE
  ======================= */
  if (type === "table") {
    return (
      <div className="bg-white dark:bg-black border border-gray-200 rounded-md p-4 space-y-4">
        {Array.from({ length: rows }).map((_, rowIndex) => (
          <div
            key={rowIndex}
            className="bg-white dark:bg-black border border-gray-200 dark:border-[#1E293B] rounded-xl px-4 py-4 grid grid-cols-[40px_200px_140px_220px_180px_160px_120px] gap-4 items-center"
          >
            <AntSkeleton active title={{ width: 24, height: 24 }} paragraph={false} />

            <div className="space-y-1">
              <AntSkeleton active title={{ width: 120 }} paragraph={false} />
              <AntSkeleton active title={{ width: 80 }} paragraph={false} />
            </div>

            <AntSkeleton active title={{ width: 100 }} paragraph={false} />
            <AntSkeleton active title={{ width: 160 }} paragraph={false} />
            <AntSkeleton active title={{ width: 120 }} paragraph={false} />

            <div className="space-y-1">
              <div className="flex items-center gap-2">
                <AntSkeleton.Avatar active size={24} shape="circle" />
                <AntSkeleton active title={{ width: 80 }} paragraph={false} />
              </div>
            </div>

            <div className="flex items-center gap-3">
              <AntSkeleton.Button active shape="circle" size="small" />
              <AntSkeleton.Button active shape="circle" size="small" />
              <AntSkeleton.Button active shape="circle" size="small" />
            </div>
          </div>
        ))}
      </div>
    );
  }


  /* =======================
   SETTINGS
======================= */
  if (type === "settings") {
    const tabs = [
      "Brand Settings",
      "Quote Settings",
      "Delivery Note Settings",
      "Proforma Settings",
      "Invoice Settings",
      "Payment Settings",
      "Sales Return Settings",
      "Purchase Return Settings",
      "Sales Order Settings",
      "Expense Settings",
    ];

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

        <div className="grid gap-6 pt-5">
          {Array.from({ length: 8 }).map((_, index) => (
            <div
              key={index}
              className="rounded-xl border border-gray-200 dark:border-gray-800 px-4 py-4 space-y-4"
            >
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                
                <AntSkeleton active title={{ width: 140 }} paragraph={false} />
              </div>
              <AntSkeleton.Input block active size="large" />
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <AntSkeleton.Input block active />
                <AntSkeleton.Input block active />
                <AntSkeleton.Input block active />
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }



  if (type === "lead" ||  type === "customer" || type === "supplier" || type === "user") {
    return <CustomerDetailsSkeleton />
  }


  /* =======================
     VIEW LIST (DETAIL / ATTACHMENT)
  ======================= */
  if (type === "viewlist") {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {Array.from({ length: rows }).map((_, i) => (
          <div
            key={i}
            className="bg-white dark:bg-black border border-gray-200 rounded-md p-4 space-y-2"
          >
            {/* Label */}
            <AntSkeleton
              active
              title={{ width: "40%" }}
              paragraph={false}
            />

            {/* Value */}
            <AntSkeleton
              active
              title={false}
              paragraph={{ rows: 1, width: "70%" }}
            />
          </div>
        ))}
      </div>
    );
  }


  



  /* =======================
     LIST
  ======================= */
  if (type === "list") {
    return (
      <div className="space-y-3">
        {Array.from({ length: rows }).map((_, i) => (
          <div
            key={i}
            className="bg-white dark:bg-black flex items-center gap-3 p-3 border rounded-md"
          >
            <AntSkeleton.Avatar active />
            <AntSkeleton
              active
              title={{ width: "40%" }}
              paragraph={{ rows: 1, width: "80%" }}
            />
          </div>
        ))}
      </div>
    );
  }

  /* =======================
     CARD
  ======================= */
  if (type === "card") {
    return (
      <AntSkeleton
        active
        title={{ width: "60%" }}
        paragraph={{ rows }}
      />
    );
  }

  /* =======================
   DASHBOARD
======================= */
  if (type === "dashboard") {
    return (
      <div className="space-y-6">
        {/* Alert banner */}
        <div className="bg-white dark:bg-black p-4 rounded-md border border-gray-200">
          <AntSkeleton
            active
            title={{ width: "70%" }}
            paragraph={false}
          />
        </div>

        {/* Greeting */}
        <div className="space-y-2">
          <AntSkeleton
            active
            title={{ width: "30%" }}
            paragraph={false}
          />
          <AntSkeleton
            active
            title={false}
            paragraph={{ rows: 1, width: "50%" }}
          />
        </div>

        {/* Top cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {Array.from({ length: 2 }).map((_, i) => (
            <div
              key={i}
              className="bg-white dark:bg-black p-5 rounded-md border border-gray-200 space-y-4"
            >
              {/* Card title */}
              <AntSkeleton
                active
                title={{ width: "40%" }}
                paragraph={false}
              />

              {/* Donut placeholder */}
              <div className="flex justify-center">
                <AntSkeleton.Avatar
                  active
                  shape="circle"
                  size={160}
                />
              </div>

              {/* Stats */}
              <AntSkeleton
                active
                title={false}
                paragraph={{ rows: 1, width: "60%" }}
              />
            </div>
          ))}
        </div>

        {/* Sales overview */}
        <div className="bg-white dark:bg-black p-5 rounded-md border border-gray-200 space-y-4">
          <AntSkeleton
            active
            title={{ width: "25%" }}
            paragraph={false}
          />

          {/* Chart placeholder */}
          <AntSkeleton.Input
            active
            block
            style={{ height: 260 }}
          />
        </div>
      </div>
    );
  }


  /* =======================
   REPORT / SUMMARY
======================= */
  if (type === "report") {
    const tableColumns = Array.from({ length: columns }).map((_, i) => ({
      title: <AntSkeleton active title={{ width: 80 }} paragraph={false} />,
      dataIndex: `col${i}`,
      key: `col${i}`,
    }));

    const dataSource = Array.from({ length: rows }).map((_, r) => ({
      key: r,
      ...Object.fromEntries(
        tableColumns.map((_, c) => [
          `col${c}`,
          (
            <AntSkeleton
              key={c}
              active
              title={false}
              paragraph={{ rows: 1, width: "100%" }}
            />
          ),
        ])
      ),
    }));

    return (
      <div className=" grid gap-[20px]">
        <div className="bg-white dark:bg-black border border-gray-200 rounded-xl p-4  rounded-md overflow-hidden">
          <Table
            columns={tableColumns}
            dataSource={dataSource}
            pagination={false}
          />
        </div>


        <div className="bg-white dark:bg-black border border-gray-200 rounded-xl p-4  grid grid-cols-1 md:grid-cols-2 gap-4 bg-white dark:bg-black p-5 rounded-md">
          {Array.from({ length: rows }).map((_, i) => (
            <div
              key={i}
              className=" bg-white dark:bg-black border border-gray-200 rounded-md p-4 space-y-2"
            >
              {/* Label */}
              <AntSkeleton
                active
                title={{ width: "40%" }}
                paragraph={false}
              />

              {/* Value */}
              <AntSkeleton
                active
                title={false}
                paragraph={{ rows: 1, width: "70%" }}
              />
            </div>
          ))}
        </div>
      </div>
    );
  }


  if (type === "form") {
    return (
      <div className={`grid gap-4 grid-cols-1 bg-white dark:bg-black p-7 rounded-md md:grid-cols-${columns}`}>
        {Array.from({ length: rows }).map((_, i) => (
          <div key={i} className="space-y-2">
            <AntSkeleton
              active
              title={{ width: "30%" }}
              paragraph={false}
            />

            {i % 3 === 2 ? (
              <AntSkeleton.Input
                active
                block
                style={{ height: 80 }} // textarea
              />
            ) : (
              <AntSkeleton.Input
                active
                block
                size="large"
              />
            )}
          </div>
        ))}
      </div>
    );
  }





  /* =======================
     RECURRING INVOICE
  ======================= */
  if (type === "recurringinvoice") {
    return (
      <div className="border border-gray-200 dark:border-gray-900 rounded-xl p-6 sm:p-10 space-y-8">

        {/* Additional Info Section */}
        <div>
          <AntSkeleton active title={{ width: 180 }} paragraph={false} className="mb-6" />
          <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="p-5 border rounded-xl border-gray-200 dark:border-gray-800 flex items-center gap-4">
                <AntSkeleton.Avatar active shape="square" size={48} />
                <div className="space-y-2 flex-1">
                  <AntSkeleton active title={{ width: "30%" }} paragraph={{ rows: 1, width: "50%" }} />
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Change Status Section */}
        <div>
          <AntSkeleton active title={{ width: 140 }} paragraph={false} className="mb-4" />
          <div className="flex items-center justify-between gap-4">
            <div className="flex items-center gap-3">
              <AntSkeleton.Button active shape="round" style={{ width: 120 }} />
            </div>
            <AntSkeleton.Button active shape="circle" size="default" />
          </div>
        </div>

      </div>
    );
  }



  if (
    [
      "generaldetails",
      "purchaseorder",
      "invoice",
      "proforma",
      "quote",
      "purchase",
      "deliverynote",
      "purchasereturn",
      "unit",
      "inventory",
      "customerpayment",
      "supplierpayment",
      "salesreturn",
      "salesorder",
      "role",
    ].includes(type)
  ) {
    const tabs = ["Basic Details", "Contact Details", "Details"];
    return (
      <div className="rounded-xl border border-gray-200 dark:border-gray-800 p-5 space-y-6">
        <div className="flex items-center gap-4 border-b border-gray-200 dark:border-gray-800 pb-2">
          {tabs.map((label, index) => (
            <AntSkeleton.Input
              key={label}
              active
              size="small"
              style={{ width: 130, height: 32 }}
              className={index === 0 ? "text-primary" : "text-gray-400"}
            />
          ))}
        </div>

        <div className="space-y-4">
          {[...Array(6)].map((_, idx) => (
            <div
              key={idx}
              className="border border-gray-200 dark:border-gray-800 rounded-xl p-4 flex items-center gap-3"
            >
              <AntSkeleton.Avatar active size={40} shape="square" />
              <div className="flex-1 flex justify-between items-center gap-6">
                <AntSkeleton.Input active size="small" style={{ width: 140 }} />
                <AntSkeleton.Input active size="small" style={{ width: 100 }} />
              </div>
            </div>
          ))}
        </div>

       
      </div>
    );
  }







  /* =======================
     TEXT
  ======================= */

  return <AntSkeleton active paragraph={{ rows }} />;
}