import React from 'react';
import { ShieldCheck, Download, ExternalLink, Sparkles, Eye } from 'lucide-react';
import type { DashboardData } from '../../types';

interface SecurityNoticeBannerProps {
  data: DashboardData;
}

export const SecurityNoticeBanner: React.FC<SecurityNoticeBannerProps> = ({ data }) => {
  const isRtl = !!(data?.rtl || data?.global?.isRtl);

  return (
    <div className="w-full max-w-6xl mx-auto px-3 sm:px-4 pt-2 pb-0">
      <div className="relative overflow-hidden rounded-md border border-emerald-500/30 bg-[#032e29] !text-white px-3 py-2 sm:px-3.5 sm:py-2 shadow-none">
        <div className="relative z-10 flex flex-col md:flex-row items-start md:items-center justify-between gap-2.5">
          {/* Content side */}
          <div className="flex items-center gap-2.5 flex-1 min-w-0">
            <div className="w-7 h-7 rounded bg-emerald-500/20 border border-emerald-400/30 flex items-center justify-center shrink-0 text-emerald-300">
              <ShieldCheck className="w-4 h-4 !text-emerald-300" />
            </div>

            <div className="space-y-0.5 flex-1 min-w-0">
              <div className="flex items-center gap-2 flex-wrap">
                <h4 className="text-xs sm:text-[13px] font-bold !text-white tracking-tight flex items-center gap-1.5 !m-0 !p-0 !border-none !bg-transparent">
                  {isRtl
                    ? 'تحديث أمني وتطوير شامل: استمتع بكافة المزايا المتقدمة مجاناً!'
                    : 'Security & Performance Upgrade: Enjoy All Advanced Features for Free!'}
                </h4>
                <span className="inline-flex items-center gap-1 px-1.5 py-0.2 rounded bg-emerald-400/20 !text-emerald-200 text-[9px] font-bold border border-emerald-400/25 uppercase tracking-wider">
                  <Sparkles className="w-2.5 h-2.5 !text-emerald-300" />
                  {isRtl ? 'نسخة مؤمنة' : 'Secured'}
                </span>
              </div>

              <p className="text-[11px] !text-slate-200 font-normal leading-tight !m-0 !p-0">
                {isRtl ? (
                  <>
                    نظراً لتطور معايير الأمان، تم ترقية كافة الميزات السابقة (<strong className="!text-white font-bold">تسجيل الدخول والتسجيل بـ OTP</strong>، <strong className="!text-white font-bold">إشعارات الطلبات الفورية عبر واتساب</strong>، والتحقق) إلى <strong className="!text-emerald-200 font-bold">نسخة Wawp المتطورة</strong>. يمكنك متابعة استخدامها مجاناً بتحميل النسخة مباشرة.
                  </>
                ) : (
                  <>
                    To maintain modern security, all full-suite features (<strong className="!text-white font-bold">WhatsApp OTP Login</strong>, <strong className="!text-white font-bold">Instant Order Notifications</strong>, etc.) are available in the <strong className="!text-emerald-200 font-bold">Secured Wawp Edition</strong> for free.
                  </>
                )}
              </p>
            </div>
          </div>

          {/* Action buttons */}
          <div className="shrink-0 flex items-center gap-1.5 w-full sm:w-auto self-end md:self-center">
            <a
              href="https://live.wawp.net/"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center justify-center gap-1 px-2.5 py-1 rounded bg-white/10 hover:bg-white/20 active:bg-white/25 !text-white font-bold text-[11px] border border-white/20 transition-all cursor-pointer shadow-none"
              title={isRtl ? 'معاينة كافة المزايا على الموقع التجريبي الحي' : 'Preview all features on live demo'}
            >
              <Eye className="w-3 h-3 !text-white" />
              <span className="!text-white">{isRtl ? 'معاينة حية (Live Demo)' : 'Live Demo'}</span>
              <ExternalLink className="w-2.5 h-2.5 opacity-70 !text-white" />
            </a>

            <a
              href="https://wawp.net/en/download"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center justify-center gap-1 px-3 py-1 rounded !bg-emerald-600 hover:!bg-emerald-500 active:!bg-emerald-700 !text-white font-bold text-[11px] transition-all cursor-pointer border border-emerald-400/30 shadow-none whitespace-nowrap"
            >
              <Download className="w-3 h-3 !text-white" />
              <span className="!text-white">{isRtl ? 'تحميل النسخة المؤمنة مجاناً' : 'Download Free Edition'}</span>
              <ExternalLink className="w-2.5 h-2.5 opacity-80 !text-white" />
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};