'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

export interface PaginationMeta {
  page: number;
  limit: number;
  total: number;
  totalPages: number;
}

export function formatDate(value: string | Date | null | undefined) {
  if (!value) return '—';
  return new Date(value).toLocaleDateString('en-PH', {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
  });
}

export function AdminLoading() {
  return (
    <Card>
      <CardContent className="p-8 text-center text-muted">Loading…</CardContent>
    </Card>
  );
}

export function AdminError({ message }: { message: string }) {
  return (
    <Card>
      <CardContent className="p-8 text-center text-red-600">{message}</CardContent>
    </Card>
  );
}

export function AdminEmpty({ message }: { message: string }) {
  return (
    <Card>
      <CardContent className="p-8 text-center text-muted">{message}</CardContent>
    </Card>
  );
}

export function PaginationBar({
  meta,
  onPageChange,
}: {
  meta: PaginationMeta;
  onPageChange: (page: number) => void;
}) {
  if (meta.totalPages <= 1) return null;

  return (
    <div className="flex items-center justify-between pt-4">
      <p className="text-sm text-muted">
        Page {meta.page} of {meta.totalPages} ({meta.total} total)
      </p>
      <div className="flex gap-2">
        <Button
          size="sm"
          variant="outline"
          disabled={meta.page <= 1}
          onClick={() => onPageChange(meta.page - 1)}
        >
          Previous
        </Button>
        <Button
          size="sm"
          variant="outline"
          disabled={meta.page >= meta.totalPages}
          onClick={() => onPageChange(meta.page + 1)}
        >
          Next
        </Button>
      </div>
    </div>
  );
}

const statusVariant: Record<string, 'default' | 'success' | 'warning' | 'destructive' | 'secondary'> = {
  ACTIVE: 'success',
  SUSPENDED: 'destructive',
  OPEN: 'default',
  QUOTED: 'secondary',
  ACCEPTED: 'default',
  IN_PROGRESS: 'warning',
  COMPLETED: 'success',
  CANCELLED: 'destructive',
  PENDING: 'warning',
  APPROVED: 'success',
  REJECTED: 'destructive',
  ADDITIONAL_DOCS_REQUIRED: 'warning',
};

export function StatusBadge({ status }: { status: string }) {
  return (
    <Badge variant={statusVariant[status] || 'secondary'} className="normal-case">
      {status.replace(/_/g, ' ')}
    </Badge>
  );
}

export function AdminTable({ children }: { children: React.ReactNode }) {
  return (
    <Card>
      <CardContent className="p-0 overflow-x-auto">
        <table className="w-full text-sm">{children}</table>
      </CardContent>
    </Card>
  );
}

export function AdminTh({ children, className }: { children: React.ReactNode; className?: string }) {
  return (
    <th className={cn('text-left font-semibold text-slate-600 px-4 py-3 border-b bg-slate-50', className)}>
      {children}
    </th>
  );
}

export function AdminTd({ children, className }: { children: React.ReactNode; className?: string }) {
  return <td className={cn('px-4 py-3 border-b border-slate-100 align-middle', className)}>{children}</td>;
}