han-app/figma/src/app/pages/NotificationDetail.tsx

import { useNavigate, useParams } from 'react-router';
import { ArrowLeft, Calendar, AlertCircle, Bell, CheckCircle, Clock } from 'lucide-react';
import { companyMessages, dismissMessage } from '../data/companyMessages';

function getIcon(type: 'urgent' | 'reminder' | 'info', className = 'w-5 h-5') {
  if (type === 'urgent') return <AlertCircle className={className} />;
  if (type === 'reminder') return <Calendar className={className} />;
  return <Bell className={className} />;
}

function typeStyle(type: 'urgent' | 'reminder' | 'info') {
  if (type === 'urgent') return {
    wrapper: 'bg-destructive/10 text-destructive',
    deadline: 'bg-destructive/6 border-destructive/20',
    deadlineText: 'text-destructive',
    step: 'bg-destructive/10 text-destructive',
  };
  if (type === 'reminder') return {
    wrapper: 'bg-primary/10 text-primary',
    deadline: 'bg-primary/5 border-primary/20',
    deadlineText: 'text-primary',
    step: 'bg-primary/10 text-primary',
  };
  return {
    wrapper: 'bg-muted text-muted-foreground',
    deadline: 'bg-muted border-border',
    deadlineText: 'text-foreground',
    step: 'bg-muted text-muted-foreground',
  };
}

export function NotificationDetail() {
  const navigate = useNavigate();
  const { id } = useParams();
  const notification = id ? companyMessages.find(m => m.id === id) : null;

  if (!notification) {
    return (
      <div className="flex flex-col items-center justify-center h-full p-4">
        <p className="text-muted-foreground">Уведомление не найдено</p>
        <button onClick={() => navigate('/')} className="mt-4 text-primary font-medium">
          Вернуться на главную
        </button>
      </div>
    );
  }

  const style = typeStyle(notification.type);

  const handleComplete = () => {
    dismissMessage(notification.id);
    navigate('/');
  };

  const handleLater = () => navigate('/');

  return (
    <div className="flex flex-col h-full">
      {/* Хедер */}
      <div className="flex items-center gap-3 px-4 py-3 border-b border-border/40">
        <button
          onClick={() => navigate(-1)}
          className="p-1.5 -ml-1.5 hover:bg-muted/50 rounded-lg transition-colors"
        >
          <ArrowLeft className="w-5 h-5" />
        </button>
        <h1 className="font-medium">Уведомление</h1>
      </div>

      {/* Контент */}
      <div className="flex-1 overflow-y-auto">
        <div className="p-4 space-y-4">
          {/* Иконка и заголовок */}
          <div className="flex items-start gap-3">
            <div className={`flex items-center justify-center w-12 h-12 rounded-full flex-shrink-0 ${style.wrapper}`}>
              {getIcon(notification.type, 'w-6 h-6')}
            </div>
            <div className="flex-1 min-w-0 pt-1">
              <h2 className="font-semibold text-base mb-1">{notification.title}</h2>
              <p className="text-sm text-muted-foreground">{notification.description}</p>
            </div>
          </div>

          {/* Дедлайн */}
          {notification.deadline && (
            <div className={`border rounded-lg p-3 ${style.deadline}`}>
              <div className="flex items-center gap-2 text-sm">
                <Calendar className={`w-4 h-4 ${style.deadlineText}`} />
                <span className="font-medium">Срок:</span>
                <span className={`font-semibold ${style.deadlineText}`}>{notification.deadline}</span>
              </div>
            </div>
          )}

          {/* Полное описание */}
          <div className="space-y-2">
            <h3 className="font-medium text-sm">Подробности</h3>
            <p className="text-sm text-foreground/90 leading-relaxed">{notification.fullContent}</p>
          </div>

          {/* Шаги */}
          {notification.steps && notification.steps.length > 0 && (
            <div className="space-y-2">
              <h3 className="font-medium text-sm">Что нужно сделать</h3>
              <div className="space-y-2">
                {notification.steps.map((step, i) => (
                  <div key={i} className="flex gap-2.5">
                    <div className={`flex items-center justify-center w-5 h-5 rounded-full text-xs font-medium flex-shrink-0 mt-0.5 ${style.step}`}>
                      {i + 1}
                    </div>
                    <p className="text-sm text-foreground/90 leading-relaxed flex-1">{step}</p>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Кнопки */}
      <div className="border-t border-border/40 p-4 flex gap-2 bg-background">
        <button
          onClick={handleComplete}
          className="flex-1 bg-primary text-primary-foreground rounded-lg px-4 py-3 font-medium flex items-center justify-center gap-2 hover:bg-primary/90 transition-colors"
        >
          <CheckCircle className="w-4 h-4" />
          Готово
        </button>
        <button
          onClick={handleLater}
          className="flex-1 bg-muted text-foreground rounded-lg px-4 py-3 font-medium flex items-center justify-center gap-2 hover:bg-muted/80 transition-colors"
        >
          <Clock className="w-4 h-4" />
          Сделаю позже
        </button>
      </div>
    </div>
  );
}