import React from "react";

const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
  <div
    className={`skeleton mb-2 ${className}`}
    style={{
      height,
      width,
    }}
  ></div>
);

export const PaymentHistorySkeleton = ({ count = 2 }) => {
  return (
    <div className="row text-start">
      {[...Array(count)].map((_, idx) => (
        <div className="col-12 mb-2" key={idx}>
          <div className="p-2 border-start border-warning">
            {/* Top Row: Date + Amount */}
            <div className="d-flex justify-content-between align-items-center">
              <SkeletonLine width="150px" height={18} /> {/* Date */}
              <SkeletonLine width="100px" height={18} /> {/* Amount */}
            </div>

            <div className="row mt-1">
              {/* Transaction ID */}
              <div className="col-12 col-md-6">
                <SkeletonLine width="80%" height={16} />
              </div>

              {/* Received By (Avatar + Name) */}
              <div className="col-12 col-md-6 d-flex align-items-center gap-2">
                <SkeletonLine
                  width="30px"
                  height={30}
                  className="rounded-circle"
                />{" "}
                {/* Avatar */}
                <SkeletonLine width="120px" height={16} /> {/* Name */}
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export const CollectionDetailsSkeleton = () => {
  return (
    <div className="container p-3">
      {/* Title */}
      <SkeletonLine height={24} width="200px" className="mx-auto" />

      {/* Header Row */}
      <div className="row mb-3 px-1">
        <div className="col-10">
          <SkeletonLine height={20} />
        </div>
        <div className="col-2 d-flex justify-content-end">
          <SkeletonLine height={20} width="60px" />
        </div>
      </div>

      {/* Project */}
      <div className="row mb-3">
        <div className="col-md-6">
          <SkeletonLine width="60%" />
        </div>
      </div>

      {/* Invoice & E-Invoice */}
      <div className="row mb-3">
        <div className="col-md-6">
          <SkeletonLine />
        </div>
        <div className="col-md-6">
          <SkeletonLine />
        </div>
      </div>

      {/* Invoice Date & Client Submitted */}
      <div className="row mb-3">
        <div className="col-md-6">
          <SkeletonLine />
        </div>
        <div className="col-md-6">
          <SkeletonLine />
        </div>
      </div>

      {/* Expected Payment & Mark as Completed */}
      <div className="row mb-3">
        <div className="col-md-6">
          <SkeletonLine />
        </div>
        <div className="col-md-6">
          <SkeletonLine width="40%" />
        </div>
      </div>

      {/* Basic & Tax Amount */}
      <div className="row mb-3">
        <div className="col-md-6">
          <SkeletonLine />
        </div>
        <div className="col-md-6">
          <SkeletonLine />
        </div>
      </div>

      {/* Balance & Created At */}
      <div className="row mb-3">
        <div className="col-md-6">
          <SkeletonLine />
        </div>
        <div className="col-md-6">
          <SkeletonLine />
        </div>
      </div>

      {/* Created By */}
      <div className="row mb-3">
        <div className="col-md-6 d-flex align-items-center">
          <SkeletonLine
            width="40px"
            height={40}
            className="me-2 rounded-circle"
          />
          <SkeletonLine width="100px" />
        </div>
      </div>

      {/* Description */}
      <div className="row mb-3">
        <div className="col-12">
          <SkeletonLine height={50} />
        </div>
      </div>

      {/* Attachments */}
      <div className="row mb-3">
        <div className="col-12 d-flex gap-2 flex-wrap">
          {[...Array(3)].map((_, idx) => (
            <SkeletonLine key={idx} height={60} width="80px" />
          ))}
        </div>
      </div>

      {/* Tabs */}
      <div className="row mb-2">
        <div className="col-12 d-flex gap-2">
          <SkeletonLine height={35} width="120px" />
          <SkeletonLine height={35} width="150px" />
        </div>
      </div>

      {/* Tab Content (Comments / Payments) */}
      <SkeletonLine height={200} />
    </div>
  );
};

export const CollectionTableSkeleton = () => {
  const columnCount = 8;

  return (
    <div className="card ">
      <div
        className="card-datatable table-responsive page-min-h"
        id="horizontal-example"
      >
        <div className="dataTables_wrapper no-footer mx-5 pb-2">
          <table className="table dataTable text-nowrap">
            <thead>
              <tr >
                {[...Array(columnCount - 1)].map((_, i) => (
                  <th key={i}>
                    <SkeletonLine height={15} width="80px" />
                  </th>
                ))}
                <th className="d-flex justify-content-center">
                  <SkeletonLine height={16} width="40px" />
                </th>
              </tr>
            </thead>
            <tbody>
              {[...Array(8)].map((_, rowIdx) => (
                <tr key={rowIdx}>
                  {[...Array(columnCount - 1)].map((_, colIdx) => (
                    <td key={colIdx}>
                      <SkeletonLine height={33} />
                    </td>
                  ))}
                  <td className="d-flex justify-content-center">
                    <SkeletonLine height={16} width="20px" />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>

          {/* Pagination Skeleton */}
          <div className="d-flex justify-content-end mt-2">
            <SkeletonLine height={30} width="200px" />
          </div>
        </div>
      </div>
    </div>
  );
};