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

import { useNavigate, useParams } from 'react-router';
import { ArrowLeft, Calendar, FileText, CheckCircle, EyeOff, Clock } from 'lucide-react';

interface NotificationData {
  id: string;
  type: 'urgent' | 'reminder';
  icon: React.ReactNode;
  title: string;
  description: string;
  fullContent: string;
  deadline?: string;
  steps?: string[];
}

const notificationDetails: Record<string, NotificationData> = {
  '1': {
    id: '1',
    type: 'urgent',
    icon: <Calendar className="w-6 h-6" />,
    title: 'Продление патента через 14 дней',
    description: 'Не забудьте подать документы заранее',
    fullContent: 'Ваш патент на работу истекает 19 июня 2026 года. Рекомендуем начать процесс продления заранее, чтобы избежать перерыва в легальном статусе.',
    deadline: '19 июня 2026',
    steps: [
      'Подготовьте пакет документов (паспорт, миграционная карта, текущий патент)',
      'Оплатите госпошлину и НДФЛ',
      'Подайте документы в МФЦ или МВД',
      'Получите новый патент в течение 10 рабочих дней'
    ]
  },
  '2': {
    id: '2',
    type: 'reminder',
    icon: <FileText className="w-6 h-6" />,
    title: 'Проверьте статус РВП',
    description: 'Возможно, уже готово к получению',
    fullContent: 'Прошло более 6 месяцев с момента подачи документов на РВП. Рекомендуем проверить готовность документа на сайте МВД или обратиться в отделение лично.',
    steps: [
      'Зайдите на сайт гувм.мвд.рф',
      'Проверьте статус по номеру заявления',
      'При готовности запишитесь на получение',
      'Подготовьте документы для получения РВП'
    ]
  }
};

export function NotificationDetail() {
  const navigate = useNavigate();
  const { id } = useParams();
  const notification = id ? notificationDetails[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 handleComplete = () => {
    // В реальном приложении здесь будет логика отметки уведомления как выполненного
    navigate('/');
  };

  const handleHide = () => {
    // В реальном приложении здесь будет логика скрытия уведомления
    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('/')}
          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 ${
              notification.type === 'urgent'
                ? 'bg-primary/10 text-primary'
                : 'bg-muted text-muted-foreground'
            }`}>
              {notification.icon}
            </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="bg-primary/5 border border-primary/20 rounded-lg p-3">
              <div className="flex items-center gap-2 text-sm">
                <Calendar className="w-4 h-4 text-primary" />
                <span className="font-medium">Срок:</span>
                <span className="text-primary font-semibold">{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, index) => (
                  <div key={index} className="flex gap-2.5">
                    <div className="flex items-center justify-center w-5 h-5 rounded-full bg-primary/10 text-primary text-xs font-medium flex-shrink-0 mt-0.5">
                      {index + 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 space-y-2 bg-background">
        <button
          onClick={handleComplete}
          className="w-full 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>

        <div className="flex gap-2">
          <button
            onClick={handleLater}
            className="flex-1 bg-muted text-foreground rounded-lg px-4 py-2.5 text-sm font-medium flex items-center justify-center gap-2 hover:bg-muted/80 transition-colors"
          >
            <Clock className="w-4 h-4" />
            Сделаю позже
          </button>

          <button
            onClick={handleHide}
            className="flex-1 bg-muted text-muted-foreground rounded-lg px-4 py-2.5 text-sm font-medium flex items-center justify-center gap-2 hover:bg-muted/80 transition-colors"
          >
            <EyeOff className="w-4 h-4" />
            Скрыть уведомление
          </button>
        </div>
      </div>
    </div>
  );
}