"use client";

import { Card, CardContent } from "@/components/ui/card";

function SkeletonPulse({ className }: { className?: string }) {
  return (
    <div className={`animate-pulse bg-slate-800 rounded ${className}`} />
  );
}

export function KanbanColumnSkeleton() {
  return (
    <div className="flex flex-col">
      <div className="flex items-center justify-between mb-3">
        <SkeletonPulse className="h-5 w-24" />
        <SkeletonPulse className="h-5 w-10" />
      </div>
      <div className="flex flex-wrap gap-2 mb-2">
        <SkeletonPulse className="h-6 w-20" />
        <SkeletonPulse className="h-6 w-24" />
        <SkeletonPulse className="h-6 w-16" />
      </div>
      <div className="space-y-3 min-h-32 rounded-lg p-2">
        {[1, 2, 3].map((i) => (
          <TaskCardSkeleton key={i} />
        ))}
      </div>
    </div>
  );
}

export function TaskCardSkeleton() {
  return (
    <Card className="bg-slate-900 border-slate-800">
      <CardContent className="p-4">
        <div className="flex items-start justify-between mb-2">
          <div className="flex items-center gap-2">
            <SkeletonPulse className="h-7 w-6 rounded" />
            <SkeletonPulse className="h-5 w-16" />
          </div>
          <SkeletonPulse className="h-6 w-6" />
        </div>
        <SkeletonPulse className="h-5 w-3/4 mb-1" />
        <SkeletonPulse className="h-4 w-full mb-2" />
        <SkeletonPulse className="h-4 w-2/3 mb-3" />
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <SkeletonPulse className="h-5 w-14" />
            <SkeletonPulse className="h-4 w-12" />
          </div>
          <div className="flex items-center gap-2">
            <SkeletonPulse className="h-6 w-6 rounded-full" />
            <SkeletonPulse className="h-4 w-20" />
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

export function HeaderSkeleton() {
  return (
    <header className="border-b border-slate-800 bg-slate-900/50 backdrop-blur">
      <div className="max-w-[1800px] mx-auto px-4 py-4">
        <div className="flex items-center justify-between">
          <div>
            <SkeletonPulse className="h-8 w-48 mb-1" />
            <SkeletonPulse className="h-4 w-64" />
          </div>
          <div className="flex items-center gap-3">
            <SkeletonPulse className="h-8 w-32 hidden sm:block" />
            <SkeletonPulse className="h-8 w-20" />
            <SkeletonPulse className="h-8 w-24" />
          </div>
        </div>
      </div>
    </header>
  );
}

export function SprintHeaderSkeleton() {
  return (
    <div className="mb-4 p-3 bg-slate-800/50 border border-slate-700 rounded-lg">
      <div className="flex items-center justify-between">
        <div className="w-full">
          <SkeletonPulse className="h-5 w-48 mb-2" />
          <SkeletonPulse className="h-4 w-64" />
        </div>
        <SkeletonPulse className="h-6 w-16" />
      </div>
    </div>
  );
}

export function BoardSkeleton() {
  return (
    <div className="min-h-screen bg-slate-950 text-slate-100">
      <HeaderSkeleton />
      <div className="max-w-[1800px] mx-auto px-4 py-4 md:py-6">
        <main className="min-w-0">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 md:mb-6">
            <div>
              <SkeletonPulse className="h-7 w-32 mb-1" />
              <SkeletonPulse className="h-4 w-40" />
            </div>
            <div className="flex items-center gap-2">
              <SkeletonPulse className="h-10 w-48" />
              <SkeletonPulse className="h-10 w-28" />
            </div>
          </div>
          <SprintHeaderSkeleton />
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <KanbanColumnSkeleton />
            <KanbanColumnSkeleton />
            <KanbanColumnSkeleton />
          </div>
        </main>
      </div>
    </div>
  );
}

export function TableRowSkeleton() {
  return (
    <div className="flex items-center gap-4 p-3 border-b border-slate-800">
      <SkeletonPulse className="h-4 w-4" />
      <SkeletonPulse className="h-5 w-8" />
      <SkeletonPulse className="h-5 w-20" />
      <SkeletonPulse className="h-5 w-48 flex-1" />
      <SkeletonPulse className="h-5 w-16" />
      <SkeletonPulse className="h-5 w-20" />
      <SkeletonPulse className="h-6 w-6 rounded-full" />
    </div>
  );
}

export function BacklogSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between mb-4">
        <SkeletonPulse className="h-6 w-32" />
        <SkeletonPulse className="h-10 w-28" />
      </div>
      <div className="bg-slate-900 border border-slate-800 rounded-lg overflow-hidden">
        <div className="flex items-center gap-4 p-3 border-b border-slate-800 bg-slate-800/50">
          <SkeletonPulse className="h-4 w-4" />
          <SkeletonPulse className="h-4 w-8" />
          <SkeletonPulse className="h-4 w-20" />
          <SkeletonPulse className="h-4 w-32 flex-1" />
          <SkeletonPulse className="h-4 w-16" />
          <SkeletonPulse className="h-4 w-20" />
          <SkeletonPulse className="h-4 w-8" />
        </div>
        {[1, 2, 3, 4, 5].map((i) => (
          <TableRowSkeleton key={i} />
        ))}
      </div>
    </div>
  );
}

export function SearchSkeleton() {
  return (
    <div className="space-y-4">
      <SkeletonPulse className="h-10 w-full max-w-md mb-4" />
      <div className="grid grid-cols-1 gap-3">
        {[1, 2, 3, 4].map((i) => (
          <TaskCardSkeleton key={i} />
        ))}
      </div>
    </div>
  );
}
