// Dashboard Page Component - Sharp Square Cyber Theme
window.DashboardPage = function DashboardPage({ user, stats, apps, onNavigate }) {
  const isOwner = user?.role === 'owner';

  const statCards = [
    {
      title: 'TOTAL LICENSES (คีย์ทั้งหมด)',
      value: stats?.total || 0,
      icon: 'fa-key',
      color: 'text-[#1D63FF]',
      bg: 'bg-blue-500/10',
      border: 'border-blue-500/30'
    },
    {
      title: 'ONLINE NOW (ออนไลน์ตอนนี้)',
      value: stats?.online || 0,
      icon: 'fa-bolt',
      color: 'text-[#00FF9D]',
      bg: 'bg-emerald-500/10',
      border: 'border-emerald-500/30',
      pulse: true
    },
    {
      title: 'ACTIVE (กำลังใช้งาน)',
      value: stats?.active || 0,
      icon: 'fa-circle-check',
      color: 'text-cyan-400',
      bg: 'bg-cyan-500/10',
      border: 'border-cyan-500/30'
    },
    {
      title: 'READY (ยังไม่เปิดใช้)',
      value: stats?.unused || 0,
      icon: 'fa-ticket',
      color: 'text-indigo-400',
      bg: 'bg-indigo-500/10',
      border: 'border-indigo-500/30'
    },
    {
      title: 'EXPIRED (หมดอายุ)',
      value: stats?.expired || 0,
      icon: 'fa-hourglass-end',
      color: 'text-slate-400',
      bg: 'bg-slate-500/10',
      border: 'border-slate-500/30'
    },
    {
      title: 'BANNED / FROZEN (แบน & แช่)',
      value: (stats?.banned || 0) + (stats?.frozen || 0),
      icon: 'fa-ban',
      color: 'text-rose-400',
      bg: 'bg-rose-500/10',
      border: 'border-rose-500/30'
    }
  ];

  return (
    <div className="space-y-5 animate-fade-in w-full">
      {/* Welcome Banner Card with Wolf Logo Watermark - Sharp Square */}
      <div className="p-5 sm:p-7 rounded-none bg-[#0E1626] border border-[#1E2D4A] relative overflow-hidden flex flex-col md:flex-row items-start md:items-center justify-between gap-5 shadow-2xl">
        {/* Wolf Logo Watermark in Background */}
        <img
          src="logo.png"
          alt=""
          className="absolute -right-6 -bottom-8 w-40 h-40 sm:w-44 sm:h-44 object-contain opacity-10 pointer-events-none"
        />

        <div className="space-y-1.5 relative z-10 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="text-[10px] sm:text-xs font-mono font-semibold px-2.5 py-0.5 rounded-none bg-blue-500/15 text-cyan-400 border border-blue-500/30">
              {isOwner ? 'MASTER CONTROL PANEL' : 'RESELLER TEAM PORTAL'}
            </span>
            <span className="text-xs text-slate-400 font-mono">Owner ID: {user?.owner_id || 'OWNER-001'}</span>
          </div>
          <h2 className="text-xl sm:text-2xl font-bold text-white font-brand flex items-center gap-2 truncate">
            <span>ยินดีต้อนรับ,</span>
            <span className="text-cyan-400 truncate">{user?.username}</span>
          </h2>
          <p className="text-xs text-slate-400">
            ระบบตรวจสอบสิทธิ์คีย์ พร้อมระบบป้องกันดักฟัง HMAC-SHA256 และระบบจัดการสิทธิ์หลายแอป
          </p>
        </div>

        {/* Quick Action Shortcuts */}
        <div className="flex items-center gap-2.5 shrink-0 relative z-10 w-full sm:w-auto">
          <button
            onClick={() => onNavigate('licenses')}
            className="flex-1 sm:flex-none px-4 py-2.5 rounded-none bg-[#1D63FF] hover:bg-[#3878FF] text-white font-semibold text-xs transition flex items-center justify-center gap-2 border border-[#1D63FF]"
          >
            <i className="fa-solid fa-plus text-xs"></i>
            <span>สร้างคีย์</span>
          </button>
          <button
            onClick={() => onNavigate('apps')}
            className="flex-1 sm:flex-none px-4 py-2.5 rounded-none bg-[#080C14] hover:bg-[#131D31] text-slate-200 border border-[#1E2D4A] text-xs font-medium transition flex items-center justify-center gap-2"
          >
            <i className="fa-solid fa-cube text-xs text-cyan-400"></i>
            <span>จัดการแอป</span>
          </button>
        </div>
      </div>

      {/* Metrics Grid - Responsive for all screens & mobile */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2.5 sm:gap-3.5">
        {statCards.map((card, idx) => (
          <div
            key={idx}
            className={`p-3.5 sm:p-4 rounded-none bg-[#0E1626] border ${card.border} flex flex-col justify-between transition hover:-translate-y-0.5 shadow-lg min-w-0`}
          >
            <div className="flex items-center justify-between mb-2 gap-1.5 min-w-0">
              <span className="text-[10px] font-semibold text-slate-400 font-mono truncate" title={card.title}>
                {card.title}
              </span>
              <div className={`w-6 h-6 sm:w-7 sm:h-7 rounded-none ${card.bg} border border-[#1E2D4A] flex items-center justify-center ${card.color} shrink-0`}>
                <i className={`fa-solid ${card.icon} text-[11px]`}></i>
              </div>
            </div>
            <div className="flex items-baseline gap-2 mt-1 min-w-0">
              <span className="text-xl sm:text-2xl font-bold text-white font-brand truncate">
                {card.value}
              </span>
              {card.pulse && (
                <span className="inline-block w-2 h-2 rounded-full bg-[#00FF9D] badge-pulse shrink-0"></span>
              )}
            </div>
          </div>
        ))}
      </div>

      {/* Main Content Row */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
        {/* Apps Card */}
        <div className="lg:col-span-2 p-4 sm:p-6 rounded-none bg-[#0E1626] border border-[#1E2D4A] space-y-4 shadow-xl min-w-0">
          <div className="flex items-center justify-between pb-3 border-b border-[#1E2D4A]">
            <div className="flex items-center gap-2.5 min-w-0">
              <div className="w-8 h-8 rounded-none bg-cyan-500/10 flex items-center justify-center text-cyan-400 border border-cyan-500/20 shrink-0">
                <i className="fa-solid fa-layer-group text-xs"></i>
              </div>
              <h3 className="text-sm font-semibold text-white font-brand tracking-wide truncate">
                แอปพลิเคชันที่ใช้งาน ({apps?.length || 0})
              </h3>
            </div>
            <button
              onClick={() => onNavigate('apps')}
              className="text-xs text-cyan-400 hover:text-cyan-300 transition flex items-center gap-1 font-mono shrink-0"
            >
              <span>ดูทั้งหมด</span>
              <i className="fa-solid fa-arrow-right text-[10px]"></i>
            </button>
          </div>

          <div className="space-y-2.5">
            {apps && apps.length > 0 ? (
              apps.map((app) => (
                <div
                  key={app.id}
                  className="p-3 sm:p-3.5 rounded-none bg-[#080C14] border border-[#1E2D4A] flex items-center justify-between hover:border-cyan-500/40 transition gap-2.5 min-w-0"
                >
                  <div className="space-y-1 min-w-0 flex-1">
                    <div className="flex items-center gap-2 flex-wrap">
                      <span className="font-semibold text-white text-xs truncate max-w-[150px] sm:max-w-xs">{app.name}</span>
                      <span className="text-[9px] sm:text-[10px] font-mono px-1.5 py-0.5 rounded-none bg-blue-500/10 text-cyan-400 border border-blue-500/20 shrink-0">
                        v{app.version}
                      </span>
                      {app.freeze_all && (
                        <span className="text-[9px] sm:text-[10px] font-mono px-1.5 py-0.5 rounded-none bg-amber-500/10 text-amber-400 border border-amber-500/20 shrink-0">
                          FROZEN
                        </span>
                      )}
                    </div>
                    <div className="text-[11px] text-slate-500 font-mono truncate">
                      ID: {app.id} &bull; Users: {app.total_users || 0} (Online: {app.online_users || 0})
                    </div>
                  </div>

                  <div className="flex items-center gap-2 shrink-0">
                    <span className={`text-[10px] font-mono px-2 py-0.5 rounded-none ${
                      app.status === 'active'
                        ? 'bg-emerald-500/10 text-[#00FF9D] border border-emerald-500/20'
                        : 'bg-rose-500/10 text-rose-400 border border-rose-500/20'
                    }`}>
                      {app.status ? app.status.toUpperCase() : 'ACTIVE'}
                    </span>
                    <button
                      onClick={() => onNavigate('apps')}
                      className="p-1.5 rounded-none text-slate-400 hover:text-white hover:bg-slate-800 transition"
                    >
                      <i className="fa-solid fa-chevron-right text-xs"></i>
                    </button>
                  </div>
                </div>
              ))
            ) : (
              <div className="text-center py-6 text-slate-500 text-xs font-mono">
                ยังไม่มีแอปพลิเคชัน
              </div>
            )}
          </div>
        </div>

        {/* Defense Center Card */}
        <div className="p-4 sm:p-6 rounded-none bg-[#0E1626] border border-[#1E2D4A] space-y-4 shadow-xl flex flex-col justify-between min-w-0">
          <div>
            <div className="flex items-center gap-2.5 pb-3 border-b border-[#1E2D4A]">
              <div className="w-8 h-8 rounded-none bg-emerald-500/10 flex items-center justify-center text-[#00FF9D] border border-emerald-500/20 shrink-0">
                <i className="fa-solid fa-shield-halved text-xs"></i>
              </div>
              <h3 className="text-sm font-semibold text-white font-brand tracking-wide truncate">
                ระบบป้องกันความปลอดภัย
              </h3>
            </div>

            <div className="mt-4 space-y-2.5">
              <div className="p-3 rounded-none bg-[#080C14] border border-[#1E2D4A] flex items-center justify-between gap-2">
                <div className="flex items-center gap-2.5 min-w-0">
                  <i className="fa-solid fa-lock text-[#00FF9D] text-xs shrink-0"></i>
                  <div className="min-w-0">
                    <div className="text-xs font-medium text-white truncate">Anti-Brute Force</div>
                    <div className="text-[10px] text-slate-500 truncate">จำกัด 10 ครั้ง / ล็อก 15 นาที</div>
                  </div>
                </div>
                <span className="text-[10px] font-mono font-semibold text-[#00FF9D] bg-emerald-500/10 px-2 py-0.5 rounded-none border border-emerald-500/20 shrink-0">
                  ON
                </span>
              </div>

              <div className="p-3 rounded-none bg-[#080C14] border border-[#1E2D4A] flex items-center justify-between gap-2">
                <div className="flex items-center gap-2.5 min-w-0">
                  <i className="fa-solid fa-signature text-cyan-400 text-xs shrink-0"></i>
                  <div className="min-w-0">
                    <div className="text-xs font-medium text-white truncate">Anti-Sniffing (HMAC)</div>
                    <div className="text-[10px] text-slate-500 truncate">ป้องกัน Fiddler ดักแก้แพ็กเก็ต</div>
                  </div>
                </div>
                <span className="text-[10px] font-mono font-semibold text-cyan-400 bg-cyan-500/10 px-2 py-0.5 rounded-none border border-cyan-500/20 shrink-0">
                  ON
                </span>
              </div>

              <div className="p-3 rounded-none bg-[#080C14] border border-[#1E2D4A] flex items-center justify-between gap-2">
                <div className="flex items-center gap-2.5 min-w-0">
                  <i className="fa-solid fa-desktop text-purple-400 text-xs shrink-0"></i>
                  <div className="min-w-0">
                    <div className="text-xs font-medium text-white truncate">Machine & IP Blacklist</div>
                    <div className="text-[10px] text-slate-500 truncate">บล็อกทันทีตั้งแต่หน้าประตู</div>
                  </div>
                </div>
                <span className="text-[10px] font-mono font-semibold text-purple-400 bg-purple-500/10 px-2 py-0.5 rounded-none border border-purple-500/20 shrink-0">
                  ON
                </span>
              </div>
            </div>
          </div>

          {isOwner && (
            <button
              onClick={() => onNavigate('security')}
              className="w-full mt-4 py-2.5 px-4 rounded-none bg-purple-600/15 hover:bg-purple-600/25 border border-purple-500/30 text-purple-300 text-xs font-semibold transition flex items-center justify-center gap-2"
            >
              <i className="fa-solid fa-shield text-xs"></i>
              <span>เปิดศูนย์ความปลอดภัย</span>
            </button>
          )}
        </div>
      </div>
    </div>
  );
};