'use client';

import * as React from 'react';
import { ChevronDown, Copy, Download, FileDown, FileSpreadsheet, Printer } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useToast } from '@/components/school/toast-context';

const toolbarSecondary =
  'inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm font-medium text-zinc-800 shadow-[0_1px_2px_0_rgba(16,24,40,0.05)] transition hover:bg-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/20 disabled:pointer-events-none disabled:opacity-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800/80';

export function TableToolbarSecondaryButton({
  className,
  children,
  ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button type="button" className={cn(toolbarSecondary, className)} {...props}>
      {children}
    </button>
  );
}

export function TableToolbarPrimaryButton({
  className,
  children,
  ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button
      type="button"
      className={cn(
        'inline-flex items-center gap-2 rounded-lg border border-brand-600 bg-brand-600 px-3 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-brand-700 active:bg-brand-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/35 disabled:pointer-events-none disabled:opacity-50',
        className,
      )}
      {...props}
    >
      {children}
    </button>
  );
}

export function TableToolbarDropdown({
  label,
  icon,
  badge,
  children,
  align = 'end',
  triggerClassName,
}: {
  label: string;
  icon?: React.ReactNode;
  badge?: React.ReactNode;
  children: React.ReactNode;
  align?: 'start' | 'end';
  triggerClassName?: string;
}) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    const onPointer = (e: PointerEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener('pointerdown', onPointer);
    return () => document.removeEventListener('pointerdown', onPointer);
  }, []);

  return (
    <div className="relative inline-block" ref={ref}>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className={cn(toolbarSecondary, triggerClassName)}
        aria-expanded={open}
        aria-haspopup="menu"
      >
        {icon}
        {label}
        {badge != null && badge !== false ? (
          <span className="inline-flex items-center rounded-full border border-zinc-200 px-1.5 py-0.5 text-xs font-medium text-zinc-700 dark:border-zinc-600 dark:text-zinc-300">
            {badge}
          </span>
        ) : null}
        <ChevronDown className="size-3.5 opacity-60" strokeWidth={2} />
      </button>
      {open ? (
        <div
          role="menu"
          className={cn(
            'absolute z-[100] mt-1.5 min-w-44 rounded-lg border border-zinc-200 bg-white py-1 shadow-xl dark:border-zinc-700 dark:bg-zinc-900',
            align === 'end' ? 'end-0' : 'start-0',
          )}
        >
          {children}
        </div>
      ) : null}
    </div>
  );
}

export function TableToolbarMenuLabel({ children }: { children: React.ReactNode }) {
  return <div className="px-3 py-2 text-xs font-medium tracking-wide text-zinc-500 uppercase dark:text-zinc-400">{children}</div>;
}

export function TableToolbarMenuDivider() {
  return <div className="my-1 border-t border-zinc-100 dark:border-zinc-800" />;
}

export function TableToolbarMenuButton({
  children,
  onClick,
  destructive,
}: {
  children: React.ReactNode;
  onClick?: () => void;
  destructive?: boolean;
}) {
  return (
    <button
      type="button"
      role="menuitem"
      className={cn(
        'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition',
        destructive
          ? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40'
          : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-800/80',
      )}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

export function TableDownloadAllButton({ label = 'Tümünü indir' }: { label?: string }) {
  const { toast } = useToast();
  return (
    <TableToolbarPrimaryButton
      type="button"
      onClick={() => toast({ title: 'Yakında', description: 'Toplu indirme yakında eklenecek.' })}
    >
      {label}
    </TableToolbarPrimaryButton>
  );
}

export function TableExportMenu({ triggerClassName }: { triggerClassName?: string }) {
  const { toast } = useToast();
  const soon = () => toast({ title: 'Yakında', description: 'Dışa aktarma seçenekleri üzerinde çalışıyoruz.' });

  return (
    <TableToolbarDropdown
      label="Dışa aktar"
      icon={<Download className="size-3.5 shrink-0" strokeWidth={2} />}
      triggerClassName={triggerClassName}
    >
      <TableToolbarMenuLabel>Seçenekler</TableToolbarMenuLabel>
      <TableToolbarMenuButton onClick={soon}>
        <Copy className="size-4 shrink-0 opacity-70" strokeWidth={2} />
        Panoya kopyala
      </TableToolbarMenuButton>
      <TableToolbarMenuButton onClick={soon}>
        <Printer className="size-4 shrink-0 opacity-70" strokeWidth={2} />
        Yazdır
      </TableToolbarMenuButton>
      <TableToolbarMenuDivider />
      <TableToolbarMenuLabel>İndir</TableToolbarMenuLabel>
      <TableToolbarMenuButton onClick={soon}>
        <FileSpreadsheet className="size-4 shrink-0 opacity-70" strokeWidth={2} />
        Excel
      </TableToolbarMenuButton>
      <TableToolbarMenuButton onClick={soon}>
        <FileDown className="size-4 shrink-0 opacity-70" strokeWidth={2} />
        CSV
      </TableToolbarMenuButton>
    </TableToolbarDropdown>
  );
}