import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { 
  FileText, Code, Globe, ChevronLeft, 
  ExternalLink, Download, Shield, Zap 
} from 'lucide-react';

export const ReportSamples: React.FC = () => {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState<'html' | 'md' | 'fleet'>('html');

  return (
    <div className="report-samples-view">
      {/* Background Decor */}
      <div className="samples-glow"></div>
      
      <header className="samples-header">
        <button className="back-btn" onClick={() => navigate('/')}>
          <ChevronLeft size={18} />
          Back to Home
        </button>
        <div className="samples-title-group">
          <h1>AgentOps <span className="gradient-text">Audit Reports</span></h1>
          <p>Explore production-grade evidence packets generated by the Cockpit Orchestrator.</p>
        </div>
      </header>

      <main className="samples-container">
        <div className="samples-card">
          <div className="samples-sidebar">
            <div className="sidebar-header">
              <h3>Report Formats</h3>
              <p>Select a format to preview</p>
            </div>
            
            <nav className="samples-nav">
              <button 
                className={`nav-item ${activeTab === 'html' ? 'active' : ''}`}
                onClick={() => setActiveTab('html')}
              >
                <div className="nav-icon html-bg"><Globe size={20} /></div>
                <div className="nav-text">
                  <span>Interactive HTML</span>
                  <small>Premium, Printable, Branded</small>
                </div>
              </button>

              <button 
                className={`nav-item ${activeTab === 'md' ? 'active' : ''}`}
                onClick={() => setActiveTab('md')}
              >
                <div className="nav-icon md-bg"><FileText size={20} /></div>
                <div className="nav-text">
                  <span>Standard Markdown</span>
                  <small>Terminal-friendly, CI/CD</small>
                </div>
              </button>

              <button
                className={`nav-item ${activeTab === 'fleet' ? 'active' : ''}`}
                onClick={() => setActiveTab('fleet')}
              >
                <div className="nav-icon fleet-bg"><Zap size={20} /></div>
                <div className="nav-text">
                  <span>Fleet Dashboard</span>
                  <small>Multi-Agent Multi-Cloud View</small>
                </div>
              </button>
            </nav>

            <div className="sidebar-footer">
              <div className="kokpi-mini-card">
                <img src="/kokpi_branded.jpg" alt="Kokpi" className="mini-mascot" />
                <div>
                  <p className="kokpi-tip">"These reports represent the <strong>Safe-Build</strong> standard for enterprise agents."</p>
                  <span className="kokpi-label">KOKPI APPROVAL</span>
                </div>
              </div>
            </div>
          </div>

          <div className="samples-preview">
            <div className="preview-toolbar">
              <div className="preview-info">
                {activeTab === 'html' ? (
                  <>
                    <Globe size={18} className="text-blue-500" />
                    <span>sample-report.html</span>
                  </>
                ) : activeTab === 'md' ? (
                  <>
                    <Code size={18} className="text-orange-500" />
                    <span>sample-report.md</span>
                  </>
                  ) : (
                    <>
                      <Zap size={18} className="text-yellow-500" />
                      <span>fleet-dashboard-sample.html</span>
                    </>
                )}
              </div>
              <div className="preview-actions">
                <a 
                  href={
                    activeTab === 'html' ? '/sample-report.html' :
                      activeTab === 'md' ? '/sample-report.md' :
                        '/fleet-dashboard-sample.html'
                  } 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="toolbar-btn"
                >
                  <ExternalLink size={16} />
                  Open Full File
                </a>
              </div>
            </div>

            <div className="preview-window">
              <iframe 
                src={
                  activeTab === 'html' ? '/sample-report.html' :
                    activeTab === 'md' ? '/sample-report.md' :
                      '/fleet-dashboard-sample.html'
                } 
                className="samples-iframe"
                title="Report Preview"
              />
            </div>
          </div>
        </div>
      </main>

      <style>{`
        .report-samples-view {
          min-height: 100vh;
          background: #0f172a;
          color: white;
          padding: 2rem;
          position: relative;
          overflow-x: hidden;
        }

        .samples-glow {
          position: absolute;
          top: 0;
          right: 0;
          width: 50vw;
          height: 50vh;
          background: radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent 70%);
          pointer-events: none;
        }

        .samples-header {
          max-width: 1200px;
          margin: 0 auto 3rem;
        }

        .back-btn {
          background: transparent;
          border: 1px solid rgba(255,255,255,0.1);
          color: rgba(255,255,255,0.7);
          padding: 0.5rem 1rem;
          border-radius: 8px;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.85rem;
          cursor: pointer;
          margin-bottom: 2rem;
          transition: all 0.2s;
        }
        .back-btn:hover {
          background: rgba(255,255,255,0.05);
          color: white;
        }

        .samples-title-group h1 {
          font-size: 2.5rem;
          font-weight: 800;
          margin-bottom: 0.5rem;
          letter-spacing: -0.02em;
        }

        .samples-title-group p {
          color: #94a3b8;
          font-size: 1.1rem;
        }

        .samples-container {
          max-width: 1200px;
          margin: 0 auto;
        }

        .samples-card {
          background: #1e293b;
          border-radius: 24px;
          display: grid;
          grid-template-columns: 320px 1fr;
          height: 80vh;
          border: 1px solid rgba(255,255,255,0.05);
          overflow: hidden;
          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        .samples-sidebar {
          border-right: 1px solid rgba(255,255,255,0.05);
          padding: 2rem;
          display: flex;
          flex-direction: column;
          background: rgba(15, 23, 42, 0.3);
        }

        .sidebar-header {
          margin-bottom: 2rem;
        }
        .sidebar-header h3 {
          font-size: 1.1rem;
          font-weight: 700;
          margin-bottom: 0.25rem;
        }
        .sidebar-header p {
          font-size: 0.8rem;
          color: #64748b;
        }

        .samples-nav {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
          flex: 1;
        }

        .nav-item {
          background: transparent;
          border: 1px solid transparent;
          padding: 1rem;
          border-radius: 12px;
          display: flex;
          align-items: center;
          gap: 1rem;
          text-align: left;
          cursor: pointer;
          transition: all 0.2s;
          color: white;
        }

        .nav-item:hover {
          background: rgba(255,255,255,0.03);
        }

        .nav-item.active {
          background: rgba(59, 130, 246, 0.1);
          border-color: rgba(59, 130, 246, 0.2);
        }

        .nav-icon {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .html-bg { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
        .md-bg { background: rgba(249, 115, 22, 0.1); color: #f97316; }
        .fleet-bg { background: rgba(234, 179, 8, 0.1); color: #eab308; }

        .nav-text span {
          display: block;
          font-weight: 600;
          font-size: 0.9rem;
        }
        .nav-text small {
          font-size: 0.7rem;
          color: #64748b;
        }

        .sidebar-footer {
          padding-top: 2rem;
          border-top: 1px solid rgba(255,255,255,0.05);
        }

        .kokpi-mini-card {
          display: flex;
          gap: 1rem;
          align-items: center;
          background: rgba(0,0,0,0.2);
          padding: 1rem;
          border-radius: 12px;
        }

        .mini-mascot {
          width: 44px;
          height: 44px;
          border-radius: 8px;
        }

        .kokpi-tip {
          font-size: 0.7rem;
          color: #94a3b8;
          line-height: 1.4;
          margin-bottom: 0.25rem;
        }

        .kokpi-label {
          font-size: 0.6rem;
          font-weight: 800;
          color: #3b82f6;
          text-transform: uppercase;
        }

        .samples-preview {
          display: flex;
          flex-direction: column;
        }

        .preview-toolbar {
          padding: 1rem 2rem;
          background: rgba(15, 23, 42, 0.5);
          border-bottom: 1px solid rgba(255,255,255,0.05);
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .preview-info {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          font-family: 'JetBrains Mono', monospace;
          font-size: 0.85rem;
          color: #94a3b8;
        }

        .toolbar-btn {
          background: #3b82f6;
          color: white;
          padding: 0.5rem 1rem;
          border-radius: 6px;
          font-size: 0.8rem;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          text-decoration: none;
          transition: background 0.2s;
        }
        .toolbar-btn:hover { background: #2563eb; }

        .preview-window {
          flex: 1;
          background: #0f172a;
        }

        .samples-iframe {
          width: 100%;
          height: 100%;
          border: none;
          color-scheme: dark;
        }

        @media (max-width: 1024px) {
          .samples-card {
            grid-template-columns: 1fr;
            height: auto;
          }
          .samples-sidebar {
            border-right: none;
            border-bottom: 1px solid rgba(255,255,255,0.05);
          }
          .preview-window {
            height: 500px;
          }
        }

        @media (max-width: 768px) {
          .report-samples-view { padding: 1rem; }
          .samples-title-group h1 { font-size: 1.75rem; }
          .samples-title-group p { font-size: 0.9rem; }
          .samples-sidebar { padding: 1.25rem; }
          .kokpi-mini-card { display: none; }
          .preview-toolbar { padding: 1rem; flex-direction: column; gap: 1rem; align-items: flex-start; }
          .preview-window { height: 400px; }
        }
      `}</style>
    </div>
  );
};
