import { RadioTower, ExternalLink } from 'lucide-react';

export const metadata = {
  title: 'Gestor StreamingTV | Almeira CMS',
};

export default function StreamingAdminPage() {
  return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h1 className="text-3xl font-black font-outfit uppercase tracking-tighter text-white flex items-center gap-3">
            <div className="p-2 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-xl shadow-lg">
              <RadioTower size={24} className="text-white" />
            </div>
            Gestor StreamingTV
          </h1>
          <p className="text-slate-400 mt-1 max-w-2xl">
            Panel administrativo integrado del servidor Datarhei Restreamer. Desde aquí puedes controlar la captura, el estado y las transmisiones de tu canal de TV.
          </p>
        </div>
        <a 
          href="https://stream.almeira.com.co/ui/" 
          target="_blank" 
          rel="noopener noreferrer"
          className="flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-cyan-400 rounded-lg text-sm font-bold uppercase tracking-wider transition-colors border border-slate-700 hover:border-cyan-500/50"
        >
          <ExternalLink size={16} />
          Abrir en Pestaña Nueva
        </a>
      </div>

      <div className="w-full bg-[#1e2023] rounded-2xl overflow-hidden shadow-[0_0_40px_rgba(0,0,0,0.5)] border border-slate-800 relative z-10" style={{ height: 'calc(100vh - 200px)', minHeight: '600px' }}>
         <div className="absolute inset-x-0 top-0 h-10 bg-gradient-to-b from-black/50 to-transparent pointer-events-none z-20"></div>
         
         <iframe 
             src="https://stream.almeira.com.co/ui/"
             className="w-full h-full border-none"
             title="Datarhei Restreamer Panel"
             allow="camera; microphone; fullscreen; display-capture"
         ></iframe>
      </div>
    </div>
  );
}