"use client";

import { Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";

interface SkeletonProps {
  className?: string;
}

export function Skeleton({ className }: SkeletonProps) {
  return (
    <div
      className={cn(
        "animate-pulse rounded bg-muted",
        className
      )}
    />
  );
}

export function ConversationListSkeleton() {
  return (
    <div className="flex flex-col space-y-0.5">
      {[...Array(8)].map((_, i) => (
        <div key={i} className="flex items-start gap-3 border-b border-zinc-50 px-4 py-3">
          <Skeleton className="mt-0.5 h-8 w-8 shrink-0 rounded-full" />
          <div className="min-w-0 flex-1 space-y-1.5">
            <Skeleton className="h-4 w-3/4" />
            <Skeleton className="h-3 w-1/2" />
          </div>
        </div>
      ))}
    </div>
  );
}

export function MessageListSkeleton() {
  return (
    <div className="flex-1 space-y-3 overflow-y-auto px-5 py-4">
      {[...Array(6)].map((_, i) => (
        <div key={i} className="flex justify-start">
          <Skeleton className="max-w-[70%] rounded-2xl px-4 py-2" />
        </div>
      ))}
    </div>
  );
}

export function DashboardStatsSkeleton() {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {[...Array(4)].map((_, i) => (
        <div key={i} className="rounded-xl bg-card p-5 border border-border animate-pulse">
          <Skeleton className="h-4 w-1/4 mb-2" />
          <Skeleton className="h-8 w-1/3" />
        </div>
      ))}
    </div>
  );
}

export function ContactTableSkeleton() {
  return (
    <div className="space-y-3">
      <div className="border-b border-border text-left text-xs uppercase tracking-wide text-muted-foreground">
        <div className="grid grid-cols-[1fr_auto_auto_auto_auto] gap-4 px-5 py-3">
          <Skeleton className="h-3 w-1/3" />
          <Skeleton className="h-3 w-20" />
          <Skeleton className="h-3 w-24" />
          <Skeleton className="h-3 w-24" />
          <Skeleton className="h-3 w-20" />
        </div>
      </div>
      <div className="divide-y divide-border">
        {[...Array(8)].map((_, i) => (
          <div key={i} className="grid grid-cols-[1fr_auto_auto_auto_auto] gap-4 px-5 py-3">
            <div className="flex items-center gap-2">
              <Skeleton className="h-7 w-7 rounded-full" />
              <div className="space-y-1">
                <Skeleton className="h-4 w-32" />
                <Skeleton className="h-3 w-20" />
              </div>
            </div>
            <Skeleton className="h-4 w-24" />
            <Skeleton className="h-4 w-24" />
            <Skeleton className="h-4 w-20" />
            <Skeleton className="h-4 w-16" />
          </div>
        ))}
      </div>
    </div>
  );
}

export function PipelineBoardSkeleton() {
  return (
    <div className="flex gap-4 overflow-x-auto pb-4">
      {[...Array(4)].map((_, i) => (
        <div key={i} className="flex w-72 shrink-0 flex-col rounded-xl bg-muted/80 animate-pulse">
          <div className="flex items-center gap-2 px-4 py-3">
            <Skeleton className="h-2.5 w-2.5 rounded-full" />
            <Skeleton className="h-4 w-24" />
            <Skeleton className="ml-auto h-5 w-10 rounded-full" />
          </div>
          <div className="flex-1 space-y-2 px-3 pb-3">
            {[...Array(3)].map((_, j) => (
              <Skeleton key={j} className="h-24 w-full rounded-lg" />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

export function PageSkeleton({ variant = "default" }: { variant?: "default" | "dashboard" | "inbox" | "contacts" | "pipelines" }) {
  switch (variant) {
    case "dashboard":
      return (
        <div className="space-y-6 animate-pulse">
          <div className="h-8 w-48 rounded" />
          <DashboardStatsSkeleton />
          <div className="rounded-xl bg-card p-5 border border-border">
            <Skeleton className="h-5 w-32 mb-4" />
            <div className="space-y-3">
              {[...Array(5)].map((_, i) => (
                <Skeleton key={i} className="h-10 w-full" />
              ))}
            </div>
          </div>
        </div>
      );
    case "inbox":
      return (
        <div className="flex h-[calc(100vh-3rem)] gap-4">
          <div className="flex w-72 shrink-0 flex-col rounded-xl border border-border bg-card">
            <div className="border-b border-border px-4 py-3">
              <Skeleton className="h-8 w-48" />
            </div>
            <ConversationListSkeleton />
          </div>
          <div className="flex min-w-0 flex-1 flex-col rounded-xl border border-border bg-card">
            <div className="border-b border-border px-4 py-3">
              <Skeleton className="h-5 w-64" />
            </div>
            <MessageListSkeleton />
            <div className="border-t border-border p-3">
              <Skeleton className="h-10 w-full" />
            </div>
          </div>
        </div>
      );
    case "contacts":
      return (
        <div className="space-y-4 animate-pulse">
          <div className="flex flex-wrap items-center gap-2">
            <Skeleton className="h-10 w-64" />
            <Skeleton className="h-10 w-44" />
            <Skeleton className="h-10 w-32" />
            <Skeleton className="h-10 w-28" />
          </div>
          <ContactTableSkeleton />
        </div>
      );
    case "pipelines":
      return (
        <div className="space-y-5 animate-pulse">
          <div className="flex flex-wrap items-center gap-2">
            <Skeleton className="h-8 w-48" />
            <Skeleton className="h-8 w-24" />
            <Skeleton className="h-8 w-24" />
            <Skeleton className="h-8 w-24" />
            <div className="ml-auto" />
            <Skeleton className="h-10 w-32" />
          </div>
          <PipelineBoardSkeleton />
        </div>
      );
    default:
      return (
        <div className="space-y-6 animate-pulse">
          <div className="h-8 w-64 rounded" />
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {[...Array(3)].map((_, i) => (
              <div key={i} className="rounded-xl bg-card p-6 border border-border">
                <Skeleton className="h-5 w-32 mb-3" />
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-3/4 mt-2" />
              </div>
            ))}
          </div>
        </div>
      );
  }
}

export function LoadingOverlay({ message = "Loading..." }: { message?: string }) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
      <div className="flex flex-col items-center gap-3 rounded-xl bg-card p-6 shadow-xl border border-border">
        <Loader2 className="h-8 w-8 text-indigo-600 animate-spin" />
        <p className="text-sm text-muted-foreground">{message}</p>
      </div>
    </div>
  );
}

export function EmptyState({
  icon: Icon,
  title,
  description,
  action,
}: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  description: string;
  action?: React.ReactNode;
}) {
  return (
    <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
      <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
        <Icon className="h-8 w-8 text-muted-foreground" />
      </div>
      <h3 className="text-lg font-semibold text-foreground">{title}</h3>
      <p className="mt-1 text-sm text-muted-foreground max-w-sm">{description}</p>
      {action && <div className="mt-4">{action}</div>}
    </div>
  );
}