AI-VideoAssistant/web/components/UI.tsx

import React from 'react';
import { X } from 'lucide-react';

// Shadcn UI Imports
import { Button as ShadcnButton } from './ui/button';
import { Input as ShadcnInput } from './ui/input';
import { Switch as ShadcnSwitch } from './ui/switch';
import { Card as ShadcnCard } from './ui/card';
import { Badge as ShadcnBadge } from './ui/badge';
import { TableHeader as ShadcnTableHeader, TableRow as ShadcnTableRow, TableHead as ShadcnTableHead, TableCell as ShadcnTableCell } from './ui/table';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from './ui/sheet';
import { Dialog as ShadcnDialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from './ui/dialog';

// Button Wrapper to match old API
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
  size?: 'sm' | 'md' | 'lg' | 'icon';
}
export const Button: React.FC<ButtonProps> = ({ variant = 'primary', size = 'md', className, ...props }) => {
  const vMap: any = { primary: 'default', secondary: 'secondary', outline: 'outline', ghost: 'ghost', destructive: 'destructive' };
  const sMap: any = { sm: 'sm', md: 'default', lg: 'lg', icon: 'icon' };
  return <ShadcnButton variant={vMap[variant] || 'default'} size={sMap[size] || 'default'} className={className} {...props} />;
}

// Input and Switch match seamlessly
export const Input = ShadcnInput;
export const Switch = ShadcnSwitch;

// Native Select Wrapper to avoid breaking consumers expecting <select><option></select>
interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> { }
export const Select: React.FC<SelectProps> = ({ className = '', children, ...props }) => {
  return (
    <select
      className={`flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&>option]:bg-card [&>option]:text-foreground ${className}`}
      {...props}
    >
      {children}
    </select>
  );
};

// Card Wrapper
interface CardProps extends React.HTMLAttributes<HTMLDivElement> { children: React.ReactNode; }
export const Card: React.FC<CardProps> = ({ children, className = '', ...props }) => (
  <ShadcnCard className={`bg-card/40 backdrop-blur-md ${className}`} {...props}>
    {children}
  </ShadcnCard>
);

// Badge Wrapper for old variants
interface BadgeProps {
  children: React.ReactNode;
  variant?: 'default' | 'success' | 'warning' | 'outline';
  className?: string;
}
export const Badge: React.FC<BadgeProps> = ({ children, variant = 'default', className = '' }) => {
  let cName = className;
  let shadcnVariant: any = variant === 'outline' ? 'outline' : 'default';

  if (variant === 'success') {
    cName += ' border-transparent bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30';
  } else if (variant === 'warning') {
    cName += ' border-transparent bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30';
  }

  return <ShadcnBadge variant={shadcnVariant} className={cName}>{children}</ShadcnBadge>;
};

// Table Exports 
export const TableHeader = ShadcnTableHeader;
export const TableRow = ShadcnTableRow;
export const TableHead = ShadcnTableHead;
export const TableCell = ShadcnTableCell;

// Drawer (Side Sheet Wrapper)
interface DrawerProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  className?: string;
  children: React.ReactNode;
}
export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, title, className, children }) => {
  // Pass `!w-[85vw]` logic directly down from the parent to naturally override Shadcn specificities safely.
  const containerClasses = className || 'w-full max-w-md sm:max-w-lg';

  return (
    <Sheet open={isOpen} onOpenChange={(open) => { if (!open) onClose(); }}>
      <SheetContent className={`flex flex-col p-6 bg-background/95 backdrop-blur-md border-l border-white/10 shadow-2xl [&>button]:top-5 [&>button]:right-5 ${containerClasses}`}>
        <SheetHeader className="mb-2 shrink-0 p-0 text-left">
          <SheetTitle className="text-lg font-semibold">{title}</SheetTitle>
        </SheetHeader>
        <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar flex flex-col">
          {children}
        </div>
      </SheetContent>
    </Sheet>
  );
};

// Dialog (Modal Wrapper)
interface DialogProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
  footer?: React.ReactNode;
  contentClassName?: string;
}
export const Dialog: React.FC<DialogProps> = ({ isOpen, onClose, title, children, footer, contentClassName }) => {
  return (
    <ShadcnDialog open={isOpen} onOpenChange={(open) => { if (!open) onClose(); }}>
      <DialogContent className={`max-h-[95vh] flex flex-col ${contentClassName || ''}`}>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
        </DialogHeader>
        <div className="py-2 flex-1 min-h-0 overflow-y-auto pr-2 custom-scrollbar">
          {children}
        </div>
        {footer && <DialogFooter>{footer}</DialogFooter>}
      </DialogContent>
    </ShadcnDialog>
  );
};


// ---------------------------------------------
// Custom Application Layout Components
// ---------------------------------------------
interface LibraryPageShellProps {
  title: string;
  primaryAction: React.ReactNode;
  filterBar: React.ReactNode;
  children: React.ReactNode;
}
export const LibraryPageShell: React.FC<LibraryPageShellProps> = ({ title, primaryAction, filterBar, children }) => (
  <div className="space-y-6 animate-in fade-in py-4 pb-10">
    <div className="flex items-center justify-between">
      <h1 className="text-2xl font-bold tracking-tight text-foreground">{title}</h1>
      {primaryAction}
    </div>
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 bg-card/50 p-4 rounded-lg border border-border shadow-sm">
      {filterBar}
    </div>
    {children}
  </div>
);

interface TableStatusRowProps {
  colSpan: number;
  text: string;
}
export const TableStatusRow: React.FC<TableStatusRowProps> = ({ colSpan, text }) => (
  <TableRow>
    <TableCell colSpan={colSpan} className="text-center py-8 text-muted-foreground">
      {text}
    </TableCell>
  </TableRow>
);

interface LibraryActionCellProps {
  previewAction?: React.ReactNode;
  editAction: React.ReactNode;
  deleteAction: React.ReactNode;
}
export const LibraryActionCell: React.FC<LibraryActionCellProps> = ({ previewAction, editAction, deleteAction }) => (
  <TableCell className="text-right whitespace-nowrap">
    {previewAction}
    {editAction}
    {deleteAction}
  </TableCell>
);