Luma

'use client';

import React, { useState, useEffect, useRef } from 'react';
import { cn } from '@kashatech/lr-fe-framework/lib/utils/cn.utils';

interface LumaStreamingTextProps {
  text: string;
  isStreaming?: boolean;
  speed?: number;
  className?: string;
  onComplete?: () => void;
}

export const LumaStreamingText: React.FC<LumaStreamingTextProps> = ({
  text,
  isStreaming = false,
  speed = 20,
  className,
  onComplete,
}) => {
  const [displayedText, setDisplayedText] = useState('');
  const [currentIndex, setCurrentIndex] = useState(0);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    if (!isStreaming) {
      setDisplayedText(text);
      return;
    }

    if (currentIndex < text.length) {
      timeoutRef.current = setTimeout(() => {
        setDisplayedText((prev) => prev + text[currentIndex]);
        setCurrentIndex((prev) => prev + 1);
      }, speed);
    } else if (onComplete) {
      onComplete();
    }

    return () => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
    };
  }, [text, currentIndex, isStreaming, speed, onComplete]);

  return (
    <div className={cn('relative inline-block font-sans text-sm leading-relaxed', className)}>
      {displayedText}
      {isStreaming && (
        <span className="inline-block w-1.5 h-4 ml-1 bg-purple-500 animate-pulse align-middle" />
      )}
    </div>
  );
};

'use client';

import React from 'react';
import { cn } from '@kashatech/lr-fe-framework/lib/utils/cn.utils';
import { LumaStreamingText } from './LumaStreamingText';
import { Sparkles } from 'lucide-react';

interface LumaMessage {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  timestamp: Date;
  isStreaming?: boolean;
}

interface LumaMessageBubbleProps {
  message: LumaMessage;
}

export const LumaMessageBubble: React.FC<LumaMessageBubbleProps> = ({ message }) => {
  const isAssistant = message.role === 'assistant';

  return (
    <div
      className={cn(
        'flex w-full mb-4 animate-in fade-in slide-in-from-bottom-2 duration-300',
        isAssistant ? 'justify-start' : 'justify-end'
      )}
    >
      <div className={cn('flex max-w-[85%] px-1', isAssistant ? 'flex-row' : 'flex-row-reverse')}>
        {isAssistant && (
          <div className="flex-shrink-0 w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center mr-2 mt-1 shadow-sm">
            <Sparkles className="w-4 h-4 text-white" />
          </div>
        )}

        <div
          className={cn(
            'relative px-4 py-2.5 rounded-2xl shadow-sm border',
            isAssistant
              ? 'bg-white text-gray-800 rounded-tl-none border-gray-100'
              : 'bg-purple-600 text-white rounded-tr-none border-purple-500'
          )}
        >
          {isAssistant ? (
            <LumaStreamingText
              text={message.content}
              isStreaming={message.isStreaming}
            />
          ) : (
            <p className="text-sm font-sans leading-relaxed">{message.content}</p>
          )}

          <div
            className={cn(
              'text-[10px] mt-1 opacity-50',
              isAssistant ? 'text-gray-500' : 'text-purple-100 text-right'
            )}
          >
            {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
          </div>
        </div>
      </div>
    </div>
  );
};

'use client';

import React, { useState, useRef, useEffect } from 'react';
import { Send, Sparkles, PlusCircle } from 'lucide-react';
import { Button } from '@kashatech/lr-fe-framework/components/ui/button';
import { cn } from '@kashatech/lr-fe-framework/lib/utils/cn.utils';

interface QuickAction {
  id: string;
  label: string;
  icon?: React.ReactNode;
}

interface LumaComposerProps {
  onSendMessage: (text: string) => void;
  isLoading?: boolean;
  quickActions?: QuickAction[];
}

const DEFAULT_QUICK_ACTIONS: QuickAction[] = [
  { id: 'balance', label: 'Check balance' },
  { id: 'schedule', label: 'Today schedule' },
  { id: 'invoice', label: 'Send invoice' },
];

export const LumaComposer: React.FC<LumaComposerProps> = ({
  onSendMessage,
  isLoading = false,
  quickActions = DEFAULT_QUICK_ACTIONS,
}) => {
  const [input, setInput] = useState('');
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  const adjustHeight = () => {
    const textarea = textareaRef.current;
    if (textarea) {
      textarea.style.height = 'auto';
      textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`;
    }
  };

  useEffect(() => {
    adjustHeight();
  }, [input]);

  const handleSubmit = (e?: React.FormEvent) => {
    e?.preventDefault();
    if (input.trim() && !isLoading) {
      onSendMessage(input.trim());
      setInput('');
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSubmit();
    }
  };

  return (
    <div className="p-3 bg-white border-t border-gray-100">
      {/* Quick Action Chips */}
      <div className="flex gap-2 mb-3 overflow-x-auto no-scrollbar pb-1">
        {quickActions.map((action) => (
          <button
            key={action.id}
            onClick={() => onSendMessage(action.label)}
            className="flex-shrink-0 px-3 py-1.5 text-xs font-medium text-purple-700 bg-purple-50 rounded-full border border-purple-100 hover:bg-purple-100 transition-colors flex items-center gap-1"
          >
            {action.label}
          </button>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="relative flex items-end gap-2 bg-gray-50 rounded-2xl p-2 border border-gray-200 focus-within:border-purple-300 transition-colors">
        <button type="button" className="p-2 text-gray-400 hover:text-purple-500 transition-colors">
          <PlusCircle className="w-5 h-5" />
        </button>

        <textarea
          ref={textareaRef}
          rows={1}
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="Ask Luma anything..."
          className="w-full bg-transparent border-none focus:ring-0 text-sm py-2 resize-none max-h-[120px] text-gray-700 placeholder:text-gray-400"
        />

        <Button
          type="submit"
          disabled={!input.trim() || isLoading}
          size="icon"
          className={cn(
            "rounded-xl w-10 h-10 flex-shrink-0 transition-all duration-200",
            input.trim() ? "bg-purple-600 hover:bg-purple-700 shadow-md" : "bg-gray-200"
          )}
        >
          {isLoading ? (
            <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
          ) : (
            <Send className="w-4 h-4 text-white" />
          )}
        </Button>
      </form>
      <div className="text-[10px] text-center text-gray-400 mt-2 flex items-center justify-center gap-1">
        <Sparkles className="w-2.5 h-2.5" />
        Luma AI can make mistakes. Check important info.
      </div>
    </div>
  );
};

'use client';

import React, { useRef, useEffect } from 'react';
import { X, Minus, Sparkles, Search, MoreHorizontal } from 'lucide-react';
import { LumaMessageBubble } from './LumaMessageBubble';
import { LumaComposer } from './LumaComposer';
import { cn } from '@kashatech/lr-fe-framework/lib/utils/cn.utils';

interface Message {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  timestamp: Date;
  isStreaming?: boolean;
}

interface LumaChatPanelProps {
  isOpen: boolean;
  onClose: () => void;
  onMinimize: () => void;
}

export const LumaChatPanel: React.FC<LumaChatPanelProps> = ({ isOpen, onClose, onMinimize }) => {
  const [messages, setMessages] = React.useState<Message[]>([
    {
      id: '1',
      role: 'assistant',
      content: "Hi Jurgen! I noticed you have 3 overdue invoices. Would you like me to send reminders?",
      timestamp: new Date(),
    }
  ]);
  const [isTyping, setIsTyping] = React.useState(false);
  const scrollRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messages]);

  const handleSendMessage = (text: string) => {
    const userMsg: Message = {
      id: Date.now().toString(),
      role: 'user',
      content: text,
      timestamp: new Date(),
    };
    setMessages((prev) => [...prev, userMsg]);

    setIsTyping(true);
    setTimeout(() => {
      setIsTyping(false);
      const aiMsg: Message = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: `I'm processing your request for "${text}". Just a moment...`,
        timestamp: new Date(),
        isStreaming: true,
      };
      setMessages((prev) => [...prev, aiMsg]);
    }, 1000);
  };

  if (!isOpen) return null;

  return (
    <div className="fixed bottom-24 right-6 w-[400px] h-[600px] bg-white rounded-3xl shadow-2xl flex flex-col overflow-hidden border border-gray-100 z-[9999] animate-in zoom-in-95 fade-in duration-300 origin-bottom-right">
      {/* Header */}
      <div className="bg-gradient-to-r from-purple-600 to-indigo-700 p-4 text-white">
        <div className="flex justify-between items-center mb-3">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center backdrop-blur-md">
              <Sparkles className="w-5 h-5 text-white" />
            </div>
            <div>
              <h3 className="font-semibold text-sm">Luma AI</h3>
              <div className="flex items-center gap-1.5">
                <div className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
                <span className="text-[10px] text-purple-100">Personal Assistant • Kasha</span>
              </div>
            </div>
          </div>
          <div className="flex items-center gap-1">
            <button onClick={onMinimize} className="p-1.5 hover:bg-white/10 rounded-lg transition-colors">
              <Minus className="w-4 h-4" />
            </button>
            <button onClick={onClose} className="p-1.5 hover:bg-white/10 rounded-lg transition-colors">
              <X className="w-4 h-4" />
            </button>
          </div>
        </div>

        {/* Context Bar */}
        <div className="bg-black/10 rounded-xl p-2.5 flex items-center justify-between backdrop-blur-sm border border-white/10">
          <div className="flex items-center gap-2 overflow-hidden">
            <Search className="w-3.5 h-3.5 text-purple-200" />
            <span className="text-xs text-purple-50 truncate">Viewing "Invoicing Dashboard"</span>
          </div>
          <MoreHorizontal className="w-4 h-4 text-purple-200 cursor-pointer" />
        </div>
      </div>

      {/* Message List */}
      <div
        ref={scrollRef}
        className="flex-1 overflow-y-auto p-4 bg-gray-50/50 space-y-2 no-scrollbar"
      >
        <div className="text-center py-4">
          <span className="text-[10px] font-medium text-gray-400 uppercase tracking-wider">Today</span>
        </div>
        {messages.map((msg) => (
          <LumaMessageBubble key={msg.id} message={msg} />
        ))}
        {isTyping && (
          <div className="flex justify-start mb-4">
            <div className="flex items-center gap-2 bg-white px-4 py-3 rounded-2xl rounded-tl-none border border-gray-100 shadow-sm">
              <div className="flex gap-1">
                <div className="w-1.5 h-1.5 bg-purple-400 rounded-full animate-bounce [animation-delay:-0.3s]" />
                <div className="w-1.5 h-1.5 bg-purple-400 rounded-full animate-bounce [animation-delay:-0.15s]" />
                <div className="w-1.5 h-1.5 bg-purple-400 rounded-full animate-bounce" />
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Composer */}
      <LumaComposer onSendMessage={handleSendMessage} isLoading={isTyping} />
    </div>
  );
};

'use client';

import React from 'react';
import { Sparkles } from 'lucide-react';
import { cn } from '@kashatech/lr-fe-framework/lib/utils/cn.utils';

interface LumaMinimizedButtonProps {
  onClick: () => void;
  unreadCount?: number;
  hasSuggestion?: boolean;
}

export const LumaMinimizedButton: React.FC<LumaMinimizedButtonProps> = ({
  onClick,
  unreadCount = 0,
  hasSuggestion = false,
}) => {
  return (
    <div className="fixed bottom-6 right-6 z-[9999]">
      <button
        onClick={onClick}
        className={cn(
          "relative w-14 h-14 rounded-full flex items-center justify-center shadow-xl transition-all duration-300 hover:scale-110 active:scale-95 group overflow-hidden",
          hasSuggestion
            ? "bg-gradient-to-br from-purple-600 via-indigo-600 to-pink-500 animate-gradient-x"
            : "bg-purple-600 hover:bg-purple-700"
        )}
      >
        {hasSuggestion && (
          <span className="absolute inset-0 rounded-full bg-purple-400 animate-ping opacity-25 scale-150" />
        )}

        <Sparkles className="w-7 h-7 text-white group-hover:rotate-12 transition-transform duration-300" />

        {unreadCount > 0 && (
          <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-pink-500 text-[10px] font-bold text-white border-2 border-white shadow-sm animate-in zoom-in">
            {unreadCount > 9 ? '9+' : unreadCount}
          </span>
        )}
      </button>

      {hasSuggestion && (
        <div className="absolute right-16 bottom-2 bg-white px-3 py-2 rounded-xl shadow-lg border border-purple-100 whitespace-nowrap animate-in slide-in-from-right-2 fade-in duration-500">
          <div className="text-xs font-semibold text-purple-900">Luma has a suggestion</div>
          <div className="text-[10px] text-gray-500">About your overdue invoices</div>
          <div className="absolute top-1/2 -right-1.5 -translate-y-1/2 border-y-[6px] border-y-transparent border-l-[6px] border-l-white" />
        </div>
      )}
    </div>
  );
};

'use client';

import React, { useState } from 'react';
import { LumaMinimizedButton } from './LumaMinimizedButton';
import { LumaChatPanel } from './LumaChatPanel';

export const LumaWidget: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [unreadCount, setUnreadCount] = useState(1);
  const [hasSuggestion, setHasSuggestion] = useState(true);

  const handleOpen = () => {
    setIsOpen(true);
    setUnreadCount(0);
    setHasSuggestion(false);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  const handleMinimize = () => {
    setIsOpen(false);
  };

  return (
    <>
      {!isOpen && (
        <LumaMinimizedButton
          onClick={handleOpen}
          unreadCount={unreadCount}
          hasSuggestion={hasSuggestion}
        />
      )}
      <LumaChatPanel
        isOpen={isOpen}
        onClose={handleClose}
        onMinimize={handleMinimize}
      />
    </>
  );
};

'use client';

import React, { useState } from 'react';
import { AlertTriangle, ShieldAlert, CheckCircle2, X } from 'lucide-react';

interface ConfirmationCardProps {
  title: string;
  description: string;
  severity: 'low' | 'medium' | 'high' | 'critical';
  details: Record<string, string>;
  onConfirm: () => void;
  onCancel: () => void;
}

export const ConfirmationCard: React.FC<ConfirmationCardProps> = ({
  title, description, severity, details, onConfirm, onCancel,
}) => {
  const [confirmText, setConfirmText] = useState('');

  const styles = {
    low: { bg: 'bg-slate-50', border: 'border-slate-200', text: 'text-slate-900', icon: <CheckCircle2 className="text-slate-500" />, btn: 'bg-slate-900 hover:bg-slate-800' },
    medium: { bg: 'bg-blue-50', border: 'border-blue-200', text: 'text-blue-900', icon: <CheckCircle2 className="text-blue-500" />, btn: 'bg-blue-600 hover:bg-blue-700' },
    high: { bg: 'bg-amber-50', border: 'border-amber-200', text: 'text-amber-900', icon: <AlertTriangle className="text-amber-500" />, btn: 'bg-amber-600 hover:bg-amber-700' },
    critical: { bg: 'bg-red-50', border: 'border-red-200', text: 'text-red-900', icon: <ShieldAlert className="text-red-500" />, btn: 'bg-red-600 hover:bg-red-700 disabled:bg-red-300' },
  }[severity];

  return (
    <div className={`my-4 p-5 rounded-2xl border ${styles.border} ${styles.bg} animate-in fade-in slide-in-from-bottom-2 duration-500 shadow-sm max-w-md`}>
      <div className="flex items-start gap-3 mb-4">
        {styles.icon}
        <div>
          <h3 className={`font-semibold ${styles.text}`}>{title}</h3>
          <p className="text-sm opacity-80 mt-1">{description}</p>
        </div>
      </div>

      <div className="space-y-2 mb-5">
        {Object.entries(details).map(([key, value]) => (
          <div key={key} className="flex justify-between text-xs py-1.5 border-b border-black/5 last:border-0">
            <span className="font-medium uppercase tracking-wider opacity-60">{key}</span>
            <span className="font-semibold">{value}</span>
          </div>
        ))}
      </div>

      {severity === 'critical' && (
        <div className="mb-4">
          <label className="text-[10px] font-bold uppercase text-red-600 mb-1 block">Type 'CONFIRM' to proceed</label>
          <input
            type="text"
            className="w-full px-3 py-2 rounded-lg border border-red-200 focus:outline-none focus:ring-2 focus:ring-red-500 text-sm"
            placeholder="CONFIRM"
            value={confirmText}
            onChange={(e) => setConfirmText(e.target.value)}
          />
        </div>
      )}

      <div className="flex gap-2">
        <button
          onClick={onCancel}
          className="flex-1 px-4 py-2 rounded-xl text-sm font-medium border border-black/10 hover:bg-black/5 transition-colors"
        >
          Cancel
        </button>
        <button
          onClick={onConfirm}
          disabled={severity === 'critical' && confirmText !== 'CONFIRM'}
          className={`flex-1 px-4 py-2 rounded-xl text-sm font-medium text-white transition-all ${styles.btn}`}
        >
          Confirm
        </button>
      </div>
    </div>
  );
};

'use client';

import React from 'react';
import { ChevronRight, HelpCircle } from 'lucide-react';

interface DisambiguationCardProps {
  question: string;
  options: Array<{ label: string; value: string; description?: string }>;
  onSelect: (value: string) => void;
}

export const DisambiguationCard: React.FC<DisambiguationCardProps> = ({
  question, options, onSelect,
}) => {
  return (
    <div className="my-4 overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm max-w-sm">
      <div className="bg-gray-50 px-4 py-3 border-b border-gray-100 flex items-center gap-2">
        <HelpCircle size={16} className="text-blue-500" />
        <p className="text-sm font-medium text-gray-700">{question}</p>
      </div>
      <div className="divide-y divide-gray-100">
        {options.map((option, index) => (
          <button
            key={option.value}
            onClick={() => onSelect(option.value)}
            className="w-full text-left px-4 py-3 hover:bg-blue-50 transition-colors flex items-center justify-between group"
          >
            <div className="flex gap-3 items-center">
              <span className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 text-[10px] font-bold text-gray-500 group-hover:bg-blue-500 group-hover:text-white transition-colors">
                {index + 1}
              </span>
              <div>
                <div className="text-sm font-bold text-gray-900">{option.label}</div>
                {option.description && (
                  <div className="text-xs text-gray-500 leading-tight mt-0.5">{option.description}</div>
                )}
              </div>
            </div>
            <ChevronRight size={16} className="text-gray-300 group-hover:text-blue-400 transition-colors" />
          </button>
        ))}
      </div>
    </div>
  );
};

'use client';

import React from 'react';
import { Calendar, Clock, MapPin, User, CheckCircle, AlertCircle, XCircle } from 'lucide-react';

interface AppointmentCardProps {
  date: string; time: string; duration: string; clientName: string;
  serviceName: string; locationName: string; staffName?: string;
  status: 'pending' | 'confirmed' | 'cancelled';
  onAction?: (action: 'confirm' | 'reschedule' | 'cancel') => void;
}

export const AppointmentCard: React.FC<AppointmentCardProps> = ({
  date, time, duration, clientName, serviceName, locationName, staffName, status, onAction
}) => {
  const statusConfig = {
    confirmed: { color: 'text-emerald-600', bg: 'bg-emerald-50', border: 'border-emerald-100', icon: <CheckCircle size={14} /> },
    pending: { color: 'text-amber-600', bg: 'bg-amber-50', border: 'border-amber-100', icon: <AlertCircle size={14} /> },
    cancelled: { color: 'text-red-600', bg: 'bg-red-50', border: 'border-red-100', icon: <XCircle size={14} /> },
  }[status];

  return (
    <div className="my-4 rounded-2xl border border-gray-200 bg-white overflow-hidden shadow-sm max-w-sm">
      <div className={`px-4 py-2 border-b flex items-center justify-between ${statusConfig.bg} ${statusConfig.border}`}>
        <span className={`text-[10px] font-bold uppercase tracking-widest flex items-center gap-1.5 ${statusConfig.color}`}>
          {statusConfig.icon} {status}
        </span>
        <span className="text-[10px] font-medium text-gray-400 uppercase tracking-widest">ID: {Math.random().toString(36).substr(2, 6).toUpperCase()}</span>
      </div>

      <div className="p-4 space-y-4">
        <div>
          <h4 className="text-lg font-bold text-gray-900 leading-tight">{serviceName}</h4>
          <p className="text-sm text-gray-500 flex items-center gap-1 mt-1">
            <User size={14} /> {clientName}
          </p>
        </div>

        <div className="grid grid-cols-2 gap-4 py-3 border-y border-gray-50">
          <div className="space-y-1">
            <div className="flex items-center gap-2 text-gray-400 text-[10px] font-bold uppercase tracking-wider">
              <Calendar size={12} /> Date
            </div>
            <div className="text-sm font-semibold">{date}</div>
          </div>
          <div className="space-y-1">
            <div className="flex items-center gap-2 text-gray-400 text-[10px] font-bold uppercase tracking-wider">
              <Clock size={12} /> Time
            </div>
            <div className="text-sm font-semibold">{time} <span className="text-gray-400 font-normal">({duration})</span></div>
          </div>
        </div>

        <div className="space-y-2 text-sm text-gray-600">
          <div className="flex items-start gap-2">
            <MapPin size={16} className="text-gray-400 shrink-0 mt-0.5" />
            <span>{locationName}</span>
          </div>
          {staffName && (
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 rounded-full bg-blue-100 text-[8px] flex items-center justify-center font-bold text-blue-600 uppercase">
                {staffName[0]}
              </div>
              <span>Assigned to <span className="font-medium text-gray-900">{staffName}</span></span>
            </div>
          )}
        </div>

        <div className="flex gap-2 pt-2">
          {status === 'pending' && (
            <button onClick={() => onAction?.('confirm')} className="flex-1 bg-emerald-600 text-white text-xs font-bold py-2.5 rounded-xl hover:bg-emerald-700 transition-colors shadow-sm shadow-emerald-200">
              Confirm
            </button>
          )}
          <button onClick={() => onAction?.('reschedule')} className="flex-1 bg-gray-50 text-gray-700 text-xs font-bold py-2.5 rounded-xl hover:bg-gray-100 transition-colors border border-gray-200">
            Reschedule
          </button>
          <button onClick={() => onAction?.('cancel')} className="flex-none px-3 bg-white text-red-500 text-xs font-bold py-2.5 rounded-xl hover:bg-red-50 transition-colors border border-red-100">
            Cancel
          </button>
        </div>
      </div>
    </div>
  );
};

'use client';

import React from 'react';
import { FileText, Download, Send, Edit3, Trash2 } from 'lucide-react';

interface InvoiceCardProps {
  invoiceNumber: string; clientName: string;
  lineItems: Array<{ description: string; quantity: number; unitPrice: number }>;
  subtotal: number; vatAmount: number; vatRate: number; total: number;
  currency: string; dueDate: string;
  status: 'draft' | 'sent' | 'paid' | 'overdue';
  onAction?: (action: string) => void;
}

export const InvoiceCard: React.FC<InvoiceCardProps> = ({
  invoiceNumber, clientName, lineItems, subtotal, vatAmount, vatRate, total, currency, dueDate, status, onAction
}) => {
  const statusMap = {
    paid: 'bg-green-100 text-green-700',
    sent: 'bg-blue-100 text-blue-700',
    draft: 'bg-gray-100 text-gray-600',
    overdue: 'bg-red-100 text-red-700',
  };

  return (
    <div className="my-4 p-6 rounded-2xl border border-gray-200 bg-white shadow-lg max-w-md">
      <div className="flex justify-between items-start mb-6">
        <div>
          <div className="flex items-center gap-2 mb-1">
            <FileText className="text-blue-600" size={20} />
            <h3 className="text-lg font-bold text-gray-900">Invoice {invoiceNumber}</h3>
          </div>
          <p className="text-sm text-gray-500">Bill to: <span className="font-semibold text-gray-700">{clientName}</span></p>
        </div>
        <span className={`text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded-md ${statusMap[status]}`}>
          {status}
        </span>
      </div>

      <div className="overflow-hidden border-t border-gray-100 mb-4">
        <table className="w-full text-left text-sm">
          <thead>
            <tr className="text-[10px] font-bold text-gray-400 uppercase tracking-widest border-b border-gray-50">
              <th className="py-3 font-medium">Item</th>
              <th className="py-3 text-right font-medium">Qty</th>
              <th className="py-3 text-right font-medium">Price</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-50">
            {lineItems.map((item, i) => (
              <tr key={i}>
                <td className="py-3 text-gray-700">{item.description}</td>
                <td className="py-3 text-right text-gray-500">{item.quantity}</td>
                <td className="py-3 text-right text-gray-700 font-medium">
                  {currency}{item.unitPrice.toLocaleString()}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="bg-gray-50 rounded-xl p-4 space-y-2 mb-6">
        <div className="flex justify-between text-xs text-gray-500">
          <span>Subtotal</span>
          <span>{currency}{subtotal.toLocaleString()}</span>
        </div>
        <div className="flex justify-between text-xs text-gray-500">
          <span>VAT ({vatRate}%)</span>
          <span>{currency}{vatAmount.toLocaleString()}</span>
        </div>
        <div className="flex justify-between text-base font-bold text-gray-900 pt-2 border-t border-gray-200">
          <span>Total</span>
          <span>{currency}{total.toLocaleString()}</span>
        </div>
        <div className="text-[10px] text-gray-400 text-center pt-2 italic">
          Due by {dueDate}
        </div>
      </div>

      <div className="flex gap-2">
        {status === 'draft' && (
          <button onClick={() => onAction?.('send')} className="flex-1 bg-blue-600 text-white text-xs font-bold py-2.5 rounded-xl flex items-center justify-center gap-2 hover:bg-blue-700 transition-colors shadow-sm shadow-blue-200">
            <Send size={14} /> Create & Send
          </button>
        )}
        <button onClick={() => onAction?.('edit')} className="flex-1 bg-white text-gray-700 text-xs font-bold py-2.5 rounded-xl flex items-center justify-center gap-2 border border-gray-200 hover:bg-gray-50 transition-colors">
          <Edit3 size={14} /> Edit
        </button>
        <button onClick={() => onAction?.('cancel')} className="p-2.5 rounded-xl border border-red-100 text-red-500 hover:bg-red-50 transition-colors">
          <Trash2 size={16} />
        </button>
      </div>
    </div>
  );
};

'use client';

import React from 'react';
import { TrendingUp, TrendingDown, ArrowUpRight, Wallet, History } from 'lucide-react';

interface BalanceCardProps {
  balance: number; currency: string; accountName: string;
  recentTransactions: Array<{ amount: number; description: string; date: string; direction: 'in' | 'out' }>;
}

export const BalanceCard: React.FC<BalanceCardProps> = ({
  balance, currency, accountName, recentTransactions
}) => {
  return (
    <div className="my-4 rounded-2xl border border-gray-200 bg-white overflow-hidden shadow-sm max-w-sm">
      <div className="p-6 bg-gradient-to-br from-slate-900 to-slate-800 text-white">
        <div className="flex justify-between items-center mb-4">
          <div className="p-2 bg-white/10 rounded-lg">
            <Wallet size={18} className="text-slate-300" />
          </div>
          <span className="text-[10px] font-bold uppercase tracking-widest text-slate-400">{accountName}</span>
        </div>
        <p className="text-slate-400 text-sm mb-1">Available Balance</p>
        <div className="flex items-baseline gap-2">
          <h2 className="text-3xl font-bold">{currency}{balance.toLocaleString()}</h2>
          <span className={`flex items-center text-xs font-bold ${balance >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
            {balance >= 0 ? <TrendingUp size={12} className="mr-1" /> : <TrendingDown size={12} className="mr-1" />}
            +2.4%
          </span>
        </div>
      </div>

      <div className="p-4">
        <div className="flex justify-between items-center mb-3">
          <h4 className="text-[10px] font-bold uppercase tracking-widest text-gray-400 flex items-center gap-1.5">
            <History size={12} /> Recent Transactions
          </h4>
        </div>
        <div className="space-y-3">
          {recentTransactions.map((tx, i) => (
            <div key={i} className="flex justify-between items-center">
              <div className="flex gap-3 items-center">
                <div className={`p-1.5 rounded-lg ${tx.direction === 'in' ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600'}`}>
                  {tx.direction === 'in' ? <ArrowUpRight size={14} className="rotate-180" /> : <ArrowUpRight size={14} />}
                </div>
                <div>
                  <p className="text-xs font-bold text-gray-900 leading-none mb-1">{tx.description}</p>
                  <p className="text-[10px] text-gray-400">{tx.date}</p>
                </div>
              </div>
              <span className={`text-sm font-bold ${tx.direction === 'in' ? 'text-emerald-600' : 'text-gray-900'}`}>
                {tx.direction === 'in' ? '+' : '-'}{currency}{tx.amount.toLocaleString()}
              </span>
            </div>
          ))}
        </div>
        <button className="w-full mt-5 py-2 text-xs font-bold text-blue-600 bg-blue-50 hover:bg-blue-100 transition-colors rounded-xl">
          View all transactions
        </button>
      </div>
    </div>
  );
};

'use client';

import React from 'react';
import { Check, Loader2, Circle } from 'lucide-react';

interface ProgressCardProps {
  title: string;
  steps: Array<{ label: string; status: 'pending' | 'active' | 'complete' }>;
  currentStep: number;
}

export const ProgressCard: React.FC<ProgressCardProps> = ({ title, steps, currentStep }) => {
  return (
    <div className="my-4 p-5 rounded-2xl border border-gray-200 bg-white shadow-sm max-w-sm">
      <h3 className="text-sm font-bold text-gray-900 mb-6 px-1 flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse" />
        {title}
      </h3>

      <div className="space-y-0">
        {steps.map((step, index) => {
          const isLast = index === steps.length - 1;
          const status = step.status;

          return (
            <div key={index} className="flex gap-4">
              <div className="flex flex-col items-center">
                <div className={`
                  z-10 w-6 h-6 rounded-full flex items-center justify-center transition-all duration-300
                  ${status === 'complete' ? 'bg-emerald-500 text-white' :
                    status === 'active' ? 'bg-blue-100 text-blue-600 border-2 border-blue-500 ring-4 ring-blue-50' :
                    'bg-gray-100 text-gray-400 border border-gray-200'}
                `}>
                  {status === 'complete' ? <Check size={14} strokeWidth={3} /> :
                   status === 'active' ? <Loader2 size={12} className="animate-spin" /> :
                   <Circle size={8} fill="currentColor" />}
                </div>
                {!isLast && (
                  <div className={`w-0.5 h-10 transition-colors duration-500 ${status === 'complete' ? 'bg-emerald-500' : 'bg-gray-100'}`} />
                )}
              </div>
              <div className="pt-0.5 pb-6">
                <p className={`text-sm font-bold transition-colors ${status === 'active' ? 'text-blue-600' : status === 'complete' ? 'text-gray-900' : 'text-gray-400'}`}>
                  {step.label}
                </p>
                {status === 'active' && (
                  <span className="text-[10px] text-blue-500 font-medium animate-pulse">Processing...</span>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

'use client';

import React from 'react';
import { AlertTriangle, RefreshCw, XCircle, ChevronRight } from 'lucide-react';

interface ErrorCardProps {
  title: string;
  message: string;
  recoveryOptions: Array<{ label: string; action: () => void }>;
}

export const ErrorCard: React.FC<ErrorCardProps> = ({ title, message, recoveryOptions }) => {
  return (
    <div className="my-4 overflow-hidden rounded-2xl border border-red-200 bg-white shadow-lg shadow-red-100/50 max-w-sm animate-in zoom-in-95 duration-200">
      <div className="bg-red-50 p-4 flex items-center gap-3">
        <div className="p-2 bg-red-100 rounded-xl text-red-600">
          <AlertTriangle size={20} />
        </div>
        <div>
          <h3 className="text-sm font-bold text-red-900">{title}</h3>
          <p className="text-[11px] text-red-700/80 font-medium">ERROR_CODE: {Math.random().toString(36).substr(7).toUpperCase()}</p>
        </div>
      </div>

      <div className="p-4">
        <p className="text-sm text-gray-600 leading-relaxed mb-5">
          {message}
        </p>

        <div className="space-y-2">
          <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Recommended actions</p>
          {recoveryOptions.map((option, i) => (
            <button
              key={i}
              onClick={option.action}
              className="w-full flex items-center justify-between p-3 rounded-xl bg-gray-50 border border-gray-100 hover:bg-white hover:border-red-200 hover:shadow-sm transition-all group text-left"
            >
              <div className="flex items-center gap-2">
                <RefreshCw size={14} className="text-red-500 group-hover:rotate-180 transition-transform duration-500" />
                <span className="text-sm font-semibold text-gray-700">{option.label}</span>
              </div>
              <ChevronRight size={14} className="text-gray-300 group-hover:text-red-400 transition-transform group-hover:translate-x-0.5" />
            </button>
          ))}
          <button className="w-full p-3 rounded-xl flex items-center justify-center gap-2 text-xs font-bold text-gray-400 hover:text-gray-600 transition-colors">
            <XCircle size={14} /> Dismiss
          </button>
        </div>
      </div>
    </div>
  );
};