"use client";
import React from "react";

import CouponSkeleton from "./CouponSkeleton";

export default function MerchantSkeleton() {
  return (
    <div className="row justify-content-center">
      <div className="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-center">

        {/* Top Brand Header Card */}
        <div className="bg-white shadow-sm rounded-3 position-relative mb-3">
          <div className="row align-items-center p-3 position-relative">
            <div className="col-12">
              <div className="rounded mb-3 mx-auto"
                style={shimmer(40, "50%")}
              />
              <div className="rounded mx-auto"
                style={shimmer(16, "60%")}
              />
            </div>
          </div>
        </div>

        {/* Brand Logo + Merchant Details Card */}
        <div className="bg-white shadow-sm rounded-3 pb-3 position-relative">
          <div className="row align-items-center p-3 position-relative">
            <div className="col-xxl-2 col-xl-2 col-lg-2 col-md-3 mb-3 d-flex justify-content-center align-items-center">
              <div className="brandLogo">
                <div className="rounded" style={shimmer(100, "100px")} />
              </div>
            </div>

            <div className="col-xxl-10 col-xl-10 col-lg-10 col-md-9">
              <div className="rounded mb-3"
                style={shimmer(28, "70%")}
              />
              <div className="rounded mb-3"
                style={shimmer(16, "90%")}
              />
              <div className="rounded"
                style={shimmer(14, "50%")}
              />
            </div>
          </div>
        </div>

        {/* Activate Cashback Button Skeleton */}
        <div className="activate-button mb-4">
          <div className="rounded mx-auto"
            style={shimmer(45, "100%")}
          />
        </div>

        {/* Cashback Small Card Skeleton */}
        <div className="card cashback-terms-card shadow mb-3 d-block d-md-none">
          <div className="card-header bg-second p-3">
            <div className="row align-items-center">
              <div className="col-2 pe-0">
                <div className="rounded" style={shimmer(50, "50px")} />
              </div>
              <div className="col-9">
                <div className="rounded" style={shimmer(22, "70%")} />
              </div>
              <div className="col-1 ps-0">
                <div className="rounded" style={shimmer(20, "20px")} />
              </div>
            </div>
          </div>

          <div className="card-body bg-white">
            <ul className="ps-0 mb-0">
              <li>
                <div className="rounded mb-2" style={shimmer(14, "80%")} />
              </li>
              <li>
                <div className="rounded" style={shimmer(14, "60%")} />
              </li>
            </ul>
          </div>
        </div>

      </div>

      {/* Tips, Tricks & Hacks Heading Skeleton */}
      <div className="row align-items-center mb-3 text-md-start text-center">
        <div className="col-2 d-flex justify-content-center">
          <div className="rounded" style={shimmer(120, "120px")} />
        </div>

        <div className="col-9">
          <div className="rounded mb-2" style={shimmer(24, "60%")} />
          <div className="rounded" style={shimmer(16, "40%")} />
        </div>
      </div>

      {/* Offer Count + Tabs Skeleton */}
      <div className="row align-items-center">
        {/* Offer count */}
        <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-12 col-12 mb-3">
          <div className="rounded mb-2" style={shimmer(26, "50%")} />
          <div className="rounded" style={shimmer(16, "30%")} />
        </div>

        {/* Tabs */}
        <div className="col-xxl-9 col-xl-9 col-lg-9 col-md-12 col-12">
          <div className="d-flex justify-content-end gap-3 flex-wrap">
            <div className="rounded" style={shimmer(35, "150px")} />
            <div className="rounded" style={shimmer(35, "120px")} />
            <div className="rounded" style={shimmer(35, "150px")} />
          </div>
        </div>
      </div>

      <div className="mt-4 w-100">
        <CouponSkeleton count={3} />
      </div>

      {/* Shimmer Keyframe */}
      <style jsx>{`
        @keyframes shimmer {
          0% { background-position: -200% 0; }
          100% { background-position: 200% 0; }
        }
      `}</style>
    </div>
  );
}

// Helper shimmer function
function shimmer(height: number, width: string | number) {
  return {
    height: `${height}px`,
    width: typeof width === "number" ? `${width}px` : width,
    background: "linear-gradient(90deg, #eee, #f7f7f7, #eee)",
    backgroundSize: "200% 100%",
    animation: "shimmer 1.5s infinite",
  } as React.CSSProperties;
}