import { Clock, ArrowLeft, Bell, AlertCircle, Calendar, MessageCircle, Tag, Smartphone, Paperclip, CheckCircle2, RefreshCw, CreditCard } from 'lucide-react';
import { useNavigate } from 'react-router';
import { getActiveMessages, CompanyMessage } from '../data/companyMessages';

function getIcon(type: CompanyMessage['type']) {
  if (type === 'urgent') return <AlertCircle className="w-4 h-4" />;
  if (type === 'reminder') return <Calendar className="w-4 h-4" />;
  if (type === 'message') return <MessageCircle className="w-4 h-4" />;
  if (type === 'promo') return <Tag className="w-4 h-4" />;
  if (type === 'install') return <Smartphone className="w-4 h-4" />;
  if (type === 'docs_required') return <Paperclip className="w-4 h-4" />;
  if (type === 'docs_ready') return <CheckCircle2 className="w-4 h-4" />;
  if (type === 'status_changed') return <RefreshCw className="w-4 h-4" />;
  if (type === 'payment_pending') return <CreditCard className="w-4 h-4" />;
  return <Bell className="w-4 h-4" />;
}

function typeColors(type: CompanyMessage['type']) {
  if (type === 'urgent') return { icon: 'bg-destructive/12 text-destructive', dot: 'bg-destructive' };
  if (type === 'reminder') return { icon: 'bg-primary/10 text-primary', dot: 'bg-primary' };
  if (type === 'message') return { icon: 'bg-[#c8e6c9] text-[#2e7d32]', dot: 'bg-[#43a047]' };
  if (type === 'promo') return { icon: 'bg-[#fff3cd] text-[#e65100]', dot: 'bg-[#fb8c00]' };
  if (type === 'install') return { icon: 'bg-[#d1c4e9] text-[#4527a0]', dot: 'bg-[#7c4dff]' };
  if (type === 'docs_required') return { icon: 'bg-[#ffe0b2] text-[#e65100]', dot: 'bg-[#fb8c00]' };
  if (type === 'docs_ready') return { icon: 'bg-[#c8e6c9] text-[#2e7d32]', dot: 'bg-[#43a047]' };
  if (type === 'status_changed') return { icon: 'bg-primary/10 text-primary', dot: 'bg-primary' };
  if (type === 'payment_pending') return { icon: 'bg-[#f8bbd0] text-[#880e4f]', dot: 'bg-[#e91e63]' };
  return { icon: 'bg-muted text-muted-foreground', dot: 'bg-muted-foreground' };
}

export function History() {
  const navigate = useNavigate();
  const messages = getActiveMessages();

  return (
    <div className="flex-1 overflow-y-auto">
      <div className="px-4 py-4 space-y-4">

        {/* Заголовок страницы */}
        <div className="flex items-center gap-3">
          <button
            onClick={() => navigate('/')}
            className="flex items-center justify-center w-9 h-9 rounded-full hover:bg-muted transition-colors"
            aria-label="Назад"
          >
            <ArrowLeft className="w-5 h-5" />
          </button>
          <h1 className="flex-1 text-xl font-medium">Центр уведомлений</h1>
          {messages.length > 0 && (
            <span className="text-xs font-medium text-primary bg-primary/10 rounded-full px-2.5 py-1">
              {messages.length}
            </span>
          )}
        </div>

        {/* Список уведомлений */}
        {messages.length > 0 ? (
          <div className="space-y-2">
            {messages.map(msg => {
              const colors = typeColors(msg.type);
              return (
                <button
                  key={msg.id}
                  onClick={() => msg.type === 'message' && msg.chatId
                    ? navigate(`/chat/${msg.chatId}`)
                    : navigate(`/notification/${msg.id}`)
                  }
                  className="w-full bg-card border border-border rounded-xl p-3.5 flex items-start gap-3 hover:bg-accent/50 transition-colors text-left"
                >
                  <div className={`relative flex items-center justify-center w-9 h-9 rounded-full flex-shrink-0 ${colors.icon}`}>
                    {getIcon(msg.type)}
                    <span className={`absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-background ${colors.dot}`} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-foreground leading-snug line-clamp-1 mb-0.5">
                      {msg.title}
                    </p>
                    <p className="text-xs text-muted-foreground line-clamp-1 mb-1.5">
                      {msg.description}
                    </p>
                    <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
                      <Clock className="w-3 h-3" />
                      <span>{msg.date}</span>
                    </div>
                  </div>
                </button>
              );
            })}
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center py-12 text-center">
            <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-3">
              <Bell className="w-5 h-5 text-muted-foreground" />
            </div>
            <p className="text-sm font-medium text-foreground mb-1">Всё актуально</p>
            <p className="text-xs text-muted-foreground">Новых уведомлений нет</p>
          </div>
        )}

      </div>
    </div>
  );
}