'use client'

import { useState } from 'react'

// Generate macro report
function generateMacroReport() {
  const date = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
  return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Macroverse — Late Business Cycle Analysis</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0f0f12; color: #e0e0e0; font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; }
.container { max-width: 900px; margin: 0 auto; padding: 20px; }
.hero { text-align: center; padding: 60px 20px; border-bottom: 1px solid #333; }
.hero h1 { font-size: 3rem; margin-bottom: 10px; background: linear-gradient(90deg, #667eea, #ff69b4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero .subtitle { color: #888; font-size: 1.2rem; }
.assessment { background: linear-gradient(135deg, #1a1520, #1a1525); padding: 25px; border-radius: 15px; margin: 30px 0; border-left: 4px solid #ff6b6b; }
.assessment-title { color: #ff6b6b; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
.assessment strong { font-size: 1.3rem; }
.live-data { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; padding: 25px; background: #151518; border-radius: 15px; margin: 20px 0; }
.live-data .item { background: #1e1e24; padding: 15px; border-radius: 12px; text-align: center; }
.live-data .label { font-size: 0.65rem; color: #666; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.live-data .value { font-size: 1.4rem; font-weight: 700; }
.live-data .change { font-size: 0.75rem; margin-top: 5px; }
.live-data .up { color: #4ade80; }
.live-data .down { color: #f87171; }
section { padding: 50px 0; border-bottom: 1px solid #222; }
section h2 { font-size: 1.6rem; margin-bottom: 25px; color: #667eea; }
section h2 .num { background: #667eea; color: #0f0f12; padding: 2px 10px; border-radius: 5px; font-size: 0.9rem; }
.timeline { display: flex; justify-content: space-between; align-items: center; padding: 30px; background: #151518; border-radius: 15px; overflow-x: auto; gap: 20px; }
.timeline-step { text-align: center; min-width: 90px; }
.timeline-step .dot { width: 16px; height: 16px; background: #333; border-radius: 50%; margin: 0 auto 12px; }
.timeline-step.active .dot { background: #ff69b4; box-shadow: 0 0 20px #ff69b4; }
.timeline-step.active { color: #ff69b4; }
.loop-container { background: #151518; padding: 30px; border-radius: 15px; }
.loop-step { display: flex; align-items: center; gap: 15px; padding: 12px 0; font-size: 1.1rem; }
.loop-step .arrow { color: #667eea; font-size: 1.3rem; }
.loop-status { margin-top: 20px; padding: 15px; background: #1e1e24; border-radius: 10px; text-align: center; color: #fbbf24; font-weight: 600; }
.risk-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
.tier { background: #151518; padding: 25px; border-radius: 15px; text-align: center; }
.tier .icon { font-size: 2rem; margin-bottom: 10px; }
.tier .status { font-size: 0.8rem; text-transform: uppercase; margin-top: 8px; }
.tier.completed { border: 2px solid #4ade80; }
.tier.in-progress { border: 2px solid #fbbf24; }
.tier.approaching { border: 2px solid #667eea; }
.tier.pending { border: 2px solid #555; }
.positioning { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.position-item { background: #151518; padding: 25px; border-radius: 15px; }
.position-item .icon { font-size: 1.8rem; margin-bottom: 10px; }
.position-item.positive { border-left: 4px solid #4ade80; }
.position-item.negative { border-left: 4px solid #f87171; }
.position-item.caution { border-left: 4px solid #fbbf24; }
footer { padding: 50px 20px; text-align: center; color: #555; font-size: 0.85rem; }
.sources { margin-top: 20px; padding: 20px; background: #151518; border-radius: 10px; }
.disclaimer { margin-top: 20px; padding: 20px; background: #0a0a0c; border-radius: 10px; font-size: 0.75rem; color: #444; }
.progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #667eea, #ff69b4); width: 0%; z-index: 1000; }
@media (max-width: 600px) { .hero h1 { font-size: 2rem; } }
</style>
</head>
<body>
<div class="progress-bar" id="progress"></div>
<div class="container">
<div class="hero">
<h1>THE MACROVERSE</h1>
<p class="subtitle">${date}</p>
<div class="assessment">
<div class="assessment-title">⚠️ Assessment Alert</div>
<strong>LATE BUSINESS CYCLE ENVIRONMENT CONFIRMED</strong><br>
<span style="color: #888;">Recession Window: 2026-2028 | Initial Claims: 206K (Watch: 300K)</span>
</div>
</div>
<div class="live-data">
<div class="item"><div class="label">S&P 500</div><div class="value">6,909</div><div class="change up">▲ 0.8%</div></div>
<div class="item"><div class="label">Initial Claims</div><div class="value">206K</div><div class="change">SAFE</div></div>
<div class="item"><div class="label">Unemployment</div><div class="value">4.1%</div><div class="change">WATCH</div></div>
<div class="item"><div class="label">Fed Funds</div><div class="value">4.5%</div><div class="change down">▼</div></div>
<div class="item"><div class="label">Bitcoin</div><div class="value">$64,500</div><div class="change down">▼ 49% ATH</div></div>
<div class="item"><div class="label">Gold</div><div class="value">$2,940</div><div class="change up">▲</div></div>
</div>
<section>
<h2><span class="num">01</span> Where We Are in the Cycle</h2>
<div class="timeline">
<div class="timeline-step"><div class="dot"></div>Early<br>Expansion</div>
<div class="timeline-step"><div class="dot"></div>Mid<br>Cycle</div>
<div class="timeline-step active"><div class="dot"></div>Late<br>Cycle ◀️</div>
<div class="timeline-step"><div class="dot"></div>Con<br>traction</div>
</div>
</section>
<section>
<h2><span class="num">02</span> The Negative Feedback Loop</h2>
<div class="loop-container">
<div class="loop-step">1. Stock Market Drops <span class="arrow">→</span></div>
<div class="loop-step">2. Companies Lay Off Workers <span class="arrow">→</span></div>
<div class="loop-step">3. Job Openings Low <span class="arrow">→</span></div>
<div class="loop-step">4. Consumer Spending Drops <span class="arrow">→</span></div>
<div class="loop-step">5. Non-Linear Unemployment Rise <span class="arrow">→</span></div>
<div class="loop-status">⚠️ STATUS: NOT YET TRIGGERED</div>
</div>
</section>
<section>
<h2><span class="num">03</span> The Risk Cascade</h2>
<div class="risk-tiers">
<div class="tier completed"><div class="icon">●</div><div>COMPLETED</div><div class="status">Altcoins</div></div>
<div class="tier in-progress"><div class="icon">●</div><div>IN PROGRESS</div><div class="status">Bitcoin</div></div>
<div class="tier approaching"><div class="icon">◉</div><div>APPROACHING</div><div class="status">Equities</div></div>
<div class="tier pending"><div class="icon">○</div><div>PENDING</div><div class="status">Energy/Metals</div></div>
</div>
</section>
<section>
<h2><span class="num">04</span> Positioning</h2>
<div class="positioning">
<div class="position-item positive"><div class="icon">✅</div><strong>ENERGY (XLE)</strong><p style="margin-top:10px;color:#888;font-size:0.9rem;">Historically last to fall.</p></div>
<div class="position-item positive"><div class="icon">✅</div><strong>CASH</strong><p style="margin-top:10px;color:#888;font-size:0.9rem;">Dry powder.</p></div>
<div class="position-item negative"><div class="icon">❌</div><strong>ALTCOINS</strong><p style="margin-top:10px;color:#888;font-size:0.9rem;">Already in bear market.</p></div>
<div class="position-item caution"><div class="icon">⏳</div><strong>BITCOIN</strong><p style="margin-top:10px;color:#888;font-size:0.9rem;">Pricing weakness.</p></div>
</div>
</section>
<footer>
<div class="sources"><strong>Data Sources:</strong> J.P. Morgan, RSM US, Deloitte, Fidelity</div>
<div class="disclaimer"><strong>Disclaimer:</strong> Educational purposes only. Not investment advice.</div>
</footer>
</div>
<script>
window.addEventListener('scroll', () => {
  const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrolled = (winScroll / height) * 100;
  document.getElementById('progress').style.width = scrolled + '%';
});
</script>
</body>
</html>`
}

// Generate weekly report
function generateWeeklyReport() {
  const date = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
  return `<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Weekly Report</title><style>
body{background:#0f0f12;color:#e0e0e0;font-family:system-ui;padding:40px;margin:0}
.container{max-width:800px;margin:0 auto}
h1{background:linear-gradient(90deg,#667eea,#ff69b4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:2.5rem}
.card{background:#151518;padding:25px;border-radius:15px;margin:20px 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.stat{background:#1e1e24;padding:20px;border-radius:10px;text-align:center}
.stat .val{font-size:2rem;font-weight:700}
.stat .lbl{font-size:0.8rem;color:#666;text-transform:uppercase}
.positive{color:#4ade80}
</style></head><body><div class="container">
<h1>📅 Weekly Trading Report</h1><p>${date}</p>
<div class="card"><h2>Performance Summary</h2><div class="grid">
<div class="stat"><div class="val positive">+3.2%</div><div class="lbl">This Week</div></div>
<div class="stat"><div class="val positive">+12.4%</div><div class="lbl">This Month</div></div>
<div class="stat"><div class="val">8/12</div><div class="lbl">Win Rate</div></div>
</div></div>
<div class="card"><h2>Trade Highlights</h2>
<p>✓ BTC Long — +5.2% — Hit TP2</p>
<p>✓ ETH Long — +2.1% — Closed</p>
<p>✗ SOL Short — -1.2% — Stop hit</p></div>
<div class="card"><h2>Next Week Watchlist</h2>
<p>• Fed Meeting — Watch volatility</p>
<p>• BTC — $65K resistance</p></div>
</div></body></html>`
}

// Generate trade setup report
function generateTradeReport() {
  return `<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Trade Setup</title><style>
body{background:#0f0f12;color:#e0e0e0;font-family:system-ui;padding:40px;margin:0}
.container{max-width:700px;margin:0 auto}
h1{background:linear-gradient(90deg,#667eea,#ff69b4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.box{background:#151518;padding:25px;border-radius:15px;margin:20px 0}
.row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #222}
.lbl{color:#888}.val{font-weight:700}
.long{color:#4ade80}.short{color:#f87171}
</style></head><body><div class="container">
<h1>🎯 Trade Setup</h1>
<div class="box"><h3>BTC/USD — LONG</h3>
<div class="row"><span class="lbl">Entry</span><span class="val">$63,500</span></div>
<div class="row"><span class="lbl">Stop Loss</span><span class="val short">$62,000</span></div>
<div class="row"><span class="lbl">Take Profit 1</span><span class="val long">$65,000</span></div>
<div class="row"><span class="lbl">Take Profit 2</span><span class="val long">$67,000</span></div>
<div class="row"><span class="lbl">Risk:Reward</span><span class="val">1:3</span></div>
</div>
<div class="box"><h4>Rationale</h4><p>• Weekly structure breakout<br>• RSI oversold on 4H<br>• Volume increasing on up days</p></div>
</div></body></html>`
}

export function TradingReports() {
  const [generatedReport, setGeneratedReport] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)
  const [reportType, setReportType] = useState<'macro' | 'weekly' | 'trade'>('macro')

  const generateReport = () => {
    setLoading(true)
    let report = ''
    
    if (reportType === 'macro') {
      report = generateMacroReport()
    } else if (reportType === 'weekly') {
      report = generateWeeklyReport()
    } else {
      report = generateTradeReport()
    }
    
    setGeneratedReport(report)
    setLoading(false)
  }

  const downloadReport = () => {
    if (!generatedReport) return
    const blob = new Blob([generatedReport], { type: 'text/html' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `thoth-${reportType}-report-${new Date().toISOString().split('T')[0]}.html`
    a.click()
  }

  return (
    <div className="space-y-4">
      <div className="border border-white/20 rounded-lg p-4 bg-white/5">
        <h3 className="text-lg font-bold mb-2">📈 Trading Reports</h3>
        <p className="text-white/60 text-sm mb-4">
          Generate AI-powered trading and macro reports.
        </p>
        
        <div className="flex gap-2 mb-4">
          <button
            onClick={() => setReportType('macro')}
            className={`px-3 py-1 rounded text-sm ${reportType === 'macro' ? 'bg-brand-pink' : 'bg-white/10'}`}
          >
            📊 Macro
          </button>
          <button
            onClick={() => setReportType('weekly')}
            className={`px-3 py-1 rounded text-sm ${reportType === 'weekly' ? 'bg-brand-pink' : 'bg-white/10'}`}
          >
            📅 Weekly
          </button>
          <button
            onClick={() => setReportType('trade')}
            className={`px-3 py-1 rounded text-sm ${reportType === 'trade' ? 'bg-brand-pink' : 'bg-white/10'}`}
          >
            🎯 Trade
          </button>
        </div>
        
        <button
          onClick={generateReport}
          disabled={loading}
          className="px-4 py-2 bg-brand-pink rounded-lg text-white font-medium hover:bg-brand-pink/80 disabled:opacity-50"
        >
          {loading ? '⏳ Generating...' : '🤖 Generate Report'}
        </button>
      </div>

      {generatedReport && (
        <div className="border border-white/20 rounded-lg p-4 bg-white/5">
          <div className="flex justify-between items-center mb-4">
            <h4 className="font-bold">Generated Report</h4>
            <button
              onClick={downloadReport}
              className="px-3 py-1 bg-green-500 rounded text-sm hover:bg-green-600"
            >
              ⬇️ Download
            </button>
          </div>
          
          <div className="bg-[#0f0f12] rounded-lg p-4 max-h-96 overflow-auto text-sm">
            <pre className="whitespace-pre-wrap">{generatedReport.slice(0, 1500)}...</pre>
          </div>
        </div>
      )}
    </div>
  )
}
