// @File: src/components/ui/Skeleton.tsx
// @Desc: Lightweight shimmer skeleton primitives used as loading placeholders
//        across the client portal. Uses Tailwind's animate-pulse with a subtle
//        gradient to feel a touch more modern than a flat grey block.
import React from "react";

type SkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
  /** Tailwind width classes, e.g. "w-24" or "w-full". */
  widthClass?: string;
  /** Tailwind height classes, e.g. "h-4". */
  heightClass?: string;
  /** Tailwind rounding classes, e.g. "rounded" / "rounded-full". */
  roundedClass?: string;
};

/** Base shimmer block. Compose these to build any loading layout. */
export function Skeleton({
  widthClass = "w-full",
  heightClass = "h-4",
  roundedClass = "rounded-md",
  className = "",
  ...rest
}: SkeletonProps) {
  return (
    <div
      {...rest}
      className={[
        widthClass,
        heightClass,
        roundedClass,
        "animate-pulse bg-gradient-to-r from-slate-200 via-slate-100 to-slate-200",
        "bg-[length:200%_100%]",
        className,
      ].join(" ")}
    />
  );
}

/** A row of skeleton text lines with decreasing widths. */
export function SkeletonTextLines({
  lines = 3,
  className = "",
}: {
  lines?: number;
  className?: string;
}) {
  const widths = ["w-full", "w-11/12", "w-10/12", "w-9/12", "w-8/12"];
  return (
    <div className={`space-y-2 ${className}`}>
      {Array.from({ length: lines }).map((_, i) => (
        <Skeleton
          key={i}
          heightClass="h-3"
          widthClass={widths[i % widths.length]}
        />
      ))}
    </div>
  );
}

/** Full-page skeleton for the client dashboard. */
export function DashboardSkeleton() {
  return (
    <div className="min-h-screen bg-slate-50 p-6">
      <div className="max-w-7xl mx-auto space-y-6">
        {/* header bar */}
        <div className="flex items-center justify-between bg-white rounded-2xl border border-slate-200 p-4">
          <div className="flex items-center gap-3">
            <Skeleton widthClass="w-10" heightClass="h-10" roundedClass="rounded-full" />
            <div className="space-y-2">
              <Skeleton widthClass="w-40" heightClass="h-3" />
              <Skeleton widthClass="w-24" heightClass="h-3" />
            </div>
          </div>
          <Skeleton widthClass="w-32" heightClass="h-9" roundedClass="rounded-lg" />
        </div>

        {/* stat cards */}
        <div className="grid md:grid-cols-4 gap-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <div
              key={i}
              className="bg-white rounded-2xl border border-slate-200 p-5 space-y-3"
            >
              <Skeleton widthClass="w-20" heightClass="h-3" />
              <Skeleton widthClass="w-28" heightClass="h-7" />
              <Skeleton widthClass="w-16" heightClass="h-3" />
            </div>
          ))}
        </div>

        {/* content panels */}
        <div className="grid lg:grid-cols-[2fr_1fr] gap-6">
          <div className="bg-white rounded-2xl border border-slate-200 p-5 space-y-4">
            <Skeleton widthClass="w-40" heightClass="h-4" />
            <div className="space-y-3">
              {Array.from({ length: 4 }).map((_, i) => (
                <div
                  key={i}
                  className="flex items-center justify-between border-b border-slate-100 pb-3"
                >
                  <div className="space-y-2">
                    <Skeleton widthClass="w-60" heightClass="h-3" />
                    <Skeleton widthClass="w-32" heightClass="h-3" />
                  </div>
                  <Skeleton widthClass="w-16" heightClass="h-6" roundedClass="rounded-full" />
                </div>
              ))}
            </div>
          </div>
          <div className="bg-white rounded-2xl border border-slate-200 p-5 space-y-4">
            <Skeleton widthClass="w-32" heightClass="h-4" />
            <SkeletonTextLines lines={5} />
          </div>
        </div>
      </div>
    </div>
  );
}

/** Ticket list column skeleton — one card per row. */
export function TicketsListSkeleton({ rows = 6 }: { rows?: number }) {
  return (
    <div className="divide-y divide-slate-100">
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="p-4 space-y-2">
          <div className="flex items-center justify-between">
            <Skeleton widthClass="w-16" heightClass="h-3" />
            <Skeleton
              widthClass="w-12"
              heightClass="h-4"
              roundedClass="rounded-full"
            />
          </div>
          <Skeleton widthClass="w-10/12" heightClass="h-4" />
          <div className="flex items-center justify-between">
            <Skeleton widthClass="w-24" heightClass="h-3" />
            <Skeleton widthClass="w-20" heightClass="h-3" />
          </div>
        </div>
      ))}
    </div>
  );
}

/** Ticket detail pane skeleton — header + conversation bubbles. */
export function TicketDetailSkeleton() {
  return (
    <div className="p-5 space-y-5">
      <div className="space-y-2">
        <Skeleton widthClass="w-24" heightClass="h-3" />
        <Skeleton widthClass="w-3/4" heightClass="h-6" />
        <div className="flex gap-2 pt-1">
          <Skeleton widthClass="w-20" heightClass="h-3" />
          <Skeleton widthClass="w-28" heightClass="h-3" />
          <Skeleton widthClass="w-24" heightClass="h-3" />
        </div>
      </div>
      {Array.from({ length: 3 }).map((_, i) => (
        <div
          key={i}
          className={`flex gap-3 ${i % 2 === 1 ? "flex-row-reverse" : ""}`}
        >
          <Skeleton
            widthClass="w-9"
            heightClass="h-9"
            roundedClass="rounded-full"
          />
          <div className="max-w-[70%] w-full space-y-2">
            <Skeleton widthClass="w-24" heightClass="h-3" />
            <Skeleton widthClass="w-full" heightClass="h-16" roundedClass="rounded-2xl" />
          </div>
        </div>
      ))}
    </div>
  );
}

export default Skeleton;