// ===== Compounding Magic - Daily Profit Projection & Analysis =====

// Timezone-safe date formatting (avoids UTC shift from toISOString)
function localDateStr(date) {
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, '0');
  const d = String(date.getDate()).padStart(2, '0');
  return y + '-' + m + '-' + d;
}

// Trading charges calculator for NIFTY options (per trade = buy + sell)
// qty: total quantity, buyPrice: entry premium, sellPrice: exit premium
// SEBI freeze qty limit = 1800; orders above this are sliced, each slice incurs separate brokerage
const FREEZE_QTY = 1800;

function calcCharges(qty, buyPrice, sellPrice) {
  const buyTurnover = qty * buyPrice;
  const sellTurnover = qty * sellPrice;
  const totalTurnover = buyTurnover + sellTurnover;

  // Number of order slices (each slice ≤ FREEZE_QTY)
  const slices = Math.ceil(qty / FREEZE_QTY);

  // Brokerage: ₹20 per order per slice (buy + sell)
  const brokerage = slices * (20 + 20);

  // STT: 0.05% on sell-side premium (options, on sell)
  const stt = sellTurnover * 0.0005;

  // Exchange transaction charges: NSE options ~0.0495% on premium turnover
  const exchangeTxn = totalTurnover * 0.000495;

  // SEBI charges: ₹10 per crore of turnover
  const sebi = totalTurnover * 0.000001;

  // GST: 18% on (brokerage + exchange txn + SEBI)
  const gst = (brokerage + exchangeTxn + sebi) * 0.18;

  // Stamp duty: 0.003% on buy side
  const stamp = buyTurnover * 0.00003;

  const total = brokerage + stt + exchangeTxn + sebi + gst + stamp;
  return { brokerage, stt, exchangeTxn, sebi, gst, stamp, total, slices };
}

function CompoundingMagicPage() {
  const [capital, setCapital] = React.useState(200000);
  const [targetPct, setTargetPct] = React.useState(7);
  const [startDate, setStartDate] = React.useState(localDateStr(new Date()));
  const [resetMode, setResetMode] = React.useState('monthly'); // 'weekly' | 'monthly' | 'none'
  const [excludedDays, setExcludedDays] = React.useState([]); // 0=Sun..6=Sat
  const [lotSize, setLotSize] = React.useState(65);
  // Day-of-week based ATM premium assumptions (NIFTY weekly options)
  const [premiums, setPremiums] = React.useState({ 3: 218, 4: 199, 5: 178, 1: 89, 2: 45 }); // Wed=3,Thu=4,Fri=5,Mon=1,Tue=2
  const [holidays, setHolidays] = React.useState([]);
  const [results, setResults] = React.useState(null);
  const chartRef = React.useRef(null);
  const chartInstance = React.useRef(null);

  // Fetch holidays
  React.useEffect(() => {
    API.get('/api/holidays').then(data => {
      if (data && data.holidays) {
        setHolidays(data.holidays.map(h => h.date));
      }
    }).catch(() => {});
  }, []);

  const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

  function toggleDay(dayIdx) {
    setExcludedDays(prev =>
      prev.includes(dayIdx) ? prev.filter(d => d !== dayIdx) : [...prev, dayIdx]
    );
  }

  function isHoliday(dateStr) {
    return holidays.includes(dateStr);
  }

  function isTradingDay(date) {
    const dow = date.getDay();
    if (dow === 0 || dow === 6) return false;
    if (excludedDays.includes(dow)) return false;
    if (isHoliday(localDateStr(date))) return false;
    return true;
  }

  // Market open day (ignores user-excluded days) — used for expiry calculation
  function isMarketOpen(date) {
    const dow = date.getDay();
    if (dow === 0 || dow === 6) return false;
    if (isHoliday(localDateStr(date))) return false;
    return true;
  }

  // NIFTY expiry: Tuesday. If Tuesday is a market holiday, shift to previous market day.
  // User-excluded days do NOT affect expiry — expiry is exchange-determined.
  function getNiftyExpiryForWeek(weekStart) {
    const tuesday = new Date(weekStart);
    tuesday.setDate(tuesday.getDate() + 6); // Wed + 6 = Tue
    if (isMarketOpen(tuesday)) return tuesday;
    // Shift to previous market day within the week
    let d = new Date(tuesday);
    d.setDate(d.getDate() - 1);
    while (d >= weekStart) {
      if (isMarketOpen(d)) return d;
      d.setDate(d.getDate() - 1);
    }
    return null;
  }

  function compute() {
    const start = new Date(startDate + 'T00:00:00');
    const endOfYear = new Date('2026-12-31T00:00:00');
    const dailyTarget = targetPct / 100;

    let currentCapital = capital;
    let dayData = [];
    let d = new Date(start);

    while (d <= endOfYear) {
      if (isTradingDay(d)) {
        const targetProfit = currentCapital * dailyTarget;
        const dow = d.getDay();
        const dayPremium = premiums[dow] || 100;

        // Strategy: use maximum lots affordable with current capital
        // Max lots = floor(capital / (premium * lotSize)) — margin required to buy options
        const maxLots = Math.floor(currentCapital / (dayPremium * lotSize));
        const lotsNeeded = Math.max(maxLots, 1); // at least 1 lot
        const totalQty = lotsNeeded * lotSize;

        // Points needed to achieve target profit with these lots
        const pointsNeeded = targetProfit / totalQty;

        // Actual profit = lots * lotSize * pointsNeeded (= targetProfit)
        const dateStr = localDateStr(d);
        const month = d.getMonth();

        // Charges: buy at dayPremium, sell at dayPremium + pointsNeeded
        const sellPrice = dayPremium + pointsNeeded;
        const charges = calcCharges(totalQty, dayPremium, sellPrice);
        const netProfit = targetProfit - charges.total;

        // Determine current NIFTY week (Wed-Tue)
        let thisWeekStart = new Date(d);
        while (thisWeekStart.getDay() !== 3) thisWeekStart.setDate(thisWeekStart.getDate() - 1);
        const expiry = getNiftyExpiryForWeek(thisWeekStart);
        const isExpiry = expiry ? (dateStr === localDateStr(expiry)) : false;

        dayData.push({
          date: dateStr,
          dayName: dayNames[dow],
          capital: currentCapital,
          targetProfit,
          lotsNeeded,
          totalQty,
          pointsNeeded: Math.round(pointsNeeded * 100) / 100,
          premium: dayPremium,
          charges: charges.total,
          chargesDetail: charges,
          slices: charges.slices,
          netProfit,
          month,
          weekStart: localDateStr(thisWeekStart),
          isExpiry
        });

        // Compound with target profit (not gross) — capital grows by target %
        currentCapital += targetProfit;

        // Reset logic — weekly: reset after last trading day in NIFTY week
        if (resetMode === 'weekly') {
          // Check if there's any remaining trading day in this NIFTY week after today
          let hasMoreTradingInWeek = false;
          const weekEndTue = new Date(thisWeekStart);
          weekEndTue.setDate(weekEndTue.getDate() + 6); // Tuesday
          let check = new Date(d);
          check.setDate(check.getDate() + 1);
          while (check <= weekEndTue) {
            if (isTradingDay(check)) { hasMoreTradingInWeek = true; break; }
            check.setDate(check.getDate() + 1);
          }
          if (!hasMoreTradingInWeek) {
            currentCapital = capital;
          }
        } else if (resetMode === 'monthly') {
          // Find next trading day and check if it's in a different month
          let nextTrade = new Date(d);
          nextTrade.setDate(nextTrade.getDate() + 1);
          while (nextTrade <= endOfYear && !isTradingDay(nextTrade)) {
            nextTrade.setDate(nextTrade.getDate() + 1);
          }
          if (nextTrade > endOfYear || nextTrade.getMonth() !== d.getMonth()) {
            currentCapital = capital;
          }
        }
      }
      d.setDate(d.getDate() + 1);
    }

    // Aggregate weekly summaries
    const weeklyMap = {};
    dayData.forEach(dd => {
      if (!weeklyMap[dd.weekStart]) weeklyMap[dd.weekStart] = { days: 0, profit: 0, charges: 0, netProfit: 0 };
      weeklyMap[dd.weekStart].days++;
      weeklyMap[dd.weekStart].profit += dd.targetProfit;
      weeklyMap[dd.weekStart].charges += dd.charges;
      weeklyMap[dd.weekStart].netProfit += dd.netProfit;
    });

    // Aggregate monthly summaries (ordered)
    const monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    const monthlyArr = [];
    const monthlyIdx = {};
    dayData.forEach(dd => {
      const mk = monthNames[dd.month];
      if (!(mk in monthlyIdx)) {
        monthlyIdx[mk] = monthlyArr.length;
        monthlyArr.push({ month: mk, days: 0, profit: 0, charges: 0, netProfit: 0 });
      }
      const m = monthlyArr[monthlyIdx[mk]];
      m.days++;
      m.profit += dd.targetProfit;
      m.charges += dd.charges;
      m.netProfit += dd.netProfit;
    });

    const totalProfit = dayData.reduce((s, d) => s + d.targetProfit, 0);
    const totalCharges = dayData.reduce((s, d) => s + d.charges, 0);
    const totalNet = dayData.reduce((s, d) => s + d.netProfit, 0);
    const totalDays = dayData.length;
    const weeksCount = Object.keys(weeklyMap).length;

    setResults({
      dayData,
      weeklyMap,
      monthlyArr,
      totalProfit,
      totalCharges,
      totalNet,
      totalDays,
      weeksCount,
      avgWeeklyProfit: totalNet / (weeksCount || 1),
      avgMonthlyProfit: totalNet / (monthlyArr.length || 1)
    });
  }

  // Render chart when results change
  React.useEffect(() => {
    if (!results || !chartRef.current) return;
    if (chartInstance.current) chartInstance.current.destroy();

    const labels = results.dayData.map(d => d.date);
    const capitalData = results.dayData.map(d => d.capital);
    const netData = results.dayData.map(d => d.netProfit);

    chartInstance.current = new Chart(chartRef.current, {
      type: 'line',
      data: {
        labels,
        datasets: [
          {
            label: 'Capital (₹)',
            data: capitalData,
            borderColor: '#4CAF50',
            backgroundColor: 'rgba(76,175,80,0.1)',
            fill: true,
            tension: 0.3,
            yAxisID: 'y'
          },
          {
            label: 'Net Profit (₹)',
            data: netData,
            borderColor: '#FF9800',
            backgroundColor: 'rgba(255,152,0,0.1)',
            fill: false,
            tension: 0.3,
            yAxisID: 'y1'
          }
        ]
      },
      options: {
        responsive: true,
        interaction: { mode: 'index', intersect: false },
        plugins: { title: { display: true, text: 'Capital Growth & Net Daily Profit (after charges)' } },
        scales: {
          y: { type: 'linear', position: 'left', title: { display: true, text: 'Capital (₹)' } },
          y1: { type: 'linear', position: 'right', title: { display: true, text: 'Net Profit (₹)' }, grid: { drawOnChartArea: false } }
        }
      }
    });

    return () => { if (chartInstance.current) chartInstance.current.destroy(); };
  }, [results]);

  const fmt = (n) => '₹' + Math.round(n).toLocaleString('en-IN');

  return React.createElement('div', { className: 'p-6 max-w-7xl mx-auto' },
    React.createElement('h1', { className: 'text-2xl font-bold mb-1' }, '✨ Compounding Magic'),
    React.createElement('p', { className: 'text-gray-500 mb-6 text-sm' }, 'Daily profit compounding projection with NIFTY weekly cycle analysis'),

    // How it works
    React.createElement('div', { className: 'bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6 text-sm text-blue-900' },
      React.createElement('h3', { className: 'font-semibold mb-2' }, '💡 How Compounding Magic Works'),
      React.createElement('ul', { className: 'list-disc pl-5 space-y-1' },
        React.createElement('li', null, 'You start with a fixed capital (e.g. ₹2,00,000) and target a daily profit percentage (e.g. 7%).'),
        React.createElement('li', null, 'Each day, maximum lots are deployed using your full capital (lots = floor(capital / (premium × lot_size))). This maximizes position size.'),
        React.createElement('li', null, 'The minimum points you need to capture = target_profit / (lots × lot_size). More lots means fewer points needed — e.g. 41 lots × 65 qty = 2665 qty, so ₹17,151 profit needs only ~6.4 points move.'),
        React.createElement('li', null, 'The profit earned each day is added back to your capital (compounding). More capital → more lots → even fewer points needed each day.'),
        React.createElement('li', null, 'Reset mode controls when capital resets: Weekly (after NIFTY expiry), Monthly (at month-end), or No Reset (unlimited compounding).'),
        React.createElement('li', null, 'Trading charges are calculated realistically: Brokerage ₹40/trade, STT 0.05% on sell, Exchange 0.0495%, SEBI ₹10/Cr, GST 18%, Stamp 0.003%.'),
        React.createElement('li', null, 'NIFTY weekly cycle: Wed → Tue. Expiry on Tuesday (shifts to previous trading day if holiday/excluded).'),
        React.createElement('li', null, 'Premiums decay through the week — on Tue (₹45) you can buy more lots than Wed (₹218) with same capital, but need same points to hit target.')
      )
    ),

    // Config Panel
    React.createElement('div', { className: 'bg-white rounded-xl shadow p-5 mb-6 grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4' },
      React.createElement('div', null,
        React.createElement('label', { className: 'block text-xs font-semibold text-gray-600 mb-1' }, 'Starting Capital (₹)'),
        React.createElement('input', { type: 'number', value: capital, onChange: e => setCapital(+e.target.value),
          className: 'w-full border rounded px-3 py-2 text-sm' })
      ),
      React.createElement('div', null,
        React.createElement('label', { className: 'block text-xs font-semibold text-gray-600 mb-1' }, 'Daily Target %'),
        React.createElement('input', { type: 'number', value: targetPct, step: 0.5, onChange: e => setTargetPct(+e.target.value),
          className: 'w-full border rounded px-3 py-2 text-sm' })
      ),
      React.createElement('div', null,
        React.createElement('label', { className: 'block text-xs font-semibold text-gray-600 mb-1' }, 'Start Date'),
        React.createElement('input', { type: 'date', value: startDate, onChange: e => setStartDate(e.target.value),
          className: 'w-full border rounded px-3 py-2 text-sm' })
      ),
      React.createElement('div', null,
        React.createElement('label', { className: 'block text-xs font-semibold text-gray-600 mb-1' }, 'Reset Capital'),
        React.createElement('select', { value: resetMode, onChange: e => setResetMode(e.target.value),
          className: 'w-full border rounded px-3 py-2 text-sm' },
          React.createElement('option', { value: 'monthly' }, 'Monthly'),
          React.createElement('option', { value: 'weekly' }, 'Weekly (Expiry)'),
          React.createElement('option', { value: 'none' }, 'No Reset')
        )
      ),
      React.createElement('div', null,
        React.createElement('label', { className: 'block text-xs font-semibold text-gray-600 mb-1' }, 'NIFTY Lot Size (qty)'),
        React.createElement('input', { type: 'number', value: lotSize, onChange: e => setLotSize(+e.target.value),
          className: 'w-full border rounded px-3 py-2 text-sm' })
      )
    ),

    // Exclude Days
    React.createElement('div', { className: 'bg-white rounded-xl shadow p-4 mb-6' },
      React.createElement('label', { className: 'block text-xs font-semibold text-gray-600 mb-1' }, 'Exclude Days You Don\'t Want to Trade (expiry remains unchanged)'),
      React.createElement('div', { className: 'flex gap-2 flex-wrap' },
        [1,2,3,4,5].map(dayIdx =>
          React.createElement('button', {
            key: dayIdx,
            onClick: () => toggleDay(dayIdx),
            className: 'px-3 py-1 rounded text-sm font-medium ' +
              (excludedDays.includes(dayIdx) ? 'bg-red-100 text-red-700 border border-red-300' : 'bg-green-50 text-green-700 border border-green-200')
          }, dayNames[dayIdx])
        )
      )
    ),

    // Day-wise ATM Premium Config
    React.createElement('div', { className: 'bg-white rounded-xl shadow p-4 mb-6' },
      React.createElement('label', { className: 'block text-xs font-semibold text-gray-600 mb-2' }, 'NIFTY ATM Premium by Day (₹ per qty)'),
      React.createElement('div', { className: 'flex gap-3 flex-wrap items-center' },
        [{dow:3,label:'Wed'},{dow:4,label:'Thu'},{dow:5,label:'Fri'},{dow:1,label:'Mon'},{dow:2,label:'Tue'}].map(({dow,label}) =>
          React.createElement('div', { key: dow, className: 'flex flex-col items-center' },
            React.createElement('span', { className: 'text-xs text-gray-500 mb-1' }, label),
            React.createElement('input', { type: 'number', value: premiums[dow],
              onChange: e => setPremiums(prev => ({...prev, [dow]: +e.target.value})),
              className: 'w-16 border rounded px-2 py-1 text-sm text-center' })
          )
        )
      )
    ),

    // Compute Button
    React.createElement('div', { className: 'mb-6' },
      React.createElement('button', { onClick: compute,
        className: 'bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-blue-700 transition' },
        '🚀 Calculate Projection')
    ),

    // Results
    results && React.createElement(React.Fragment, null,
      // Summary Cards
      React.createElement('div', { className: 'grid grid-cols-2 md:grid-cols-6 gap-4 mb-6' },
        React.createElement(SummaryCard, { label: 'Trading Days', value: results.totalDays }),
        React.createElement(SummaryCard, { label: 'Gross Profit', value: fmt(results.totalProfit) }),
        React.createElement(SummaryCard, { label: 'Total Charges', value: fmt(results.totalCharges), color: 'text-red-600' }),
        React.createElement(SummaryCard, { label: 'Net Profit', value: fmt(results.totalNet), color: 'text-green-700' }),
        React.createElement(SummaryCard, {
          label: resetMode === 'weekly' ? '💰 Avg Weekly Take-Home' : 'Avg Weekly (Net)',
          value: fmt(results.avgWeeklyProfit),
          highlight: resetMode === 'weekly'
        }),
        React.createElement(SummaryCard, {
          label: resetMode === 'monthly' ? '💰 Avg Monthly Take-Home' : 'Avg Monthly (Net)',
          value: fmt(results.avgMonthlyProfit),
          highlight: resetMode === 'monthly'
        })
      ),

      // Chart
      React.createElement('div', { className: 'bg-white rounded-xl shadow p-4 mb-6' },
        React.createElement('canvas', { ref: chartRef, height: 80 })
      ),

      // Monthly Summary Table
      React.createElement('div', { className: 'bg-white rounded-xl shadow p-4 mb-6 overflow-x-auto' },
        React.createElement('h3', { className: 'font-semibold text-lg mb-3' }, '📅 Monthly Summary'),
        React.createElement('table', { className: 'w-full text-sm' },
          React.createElement('thead', null,
            React.createElement('tr', { className: 'bg-gray-50 text-left' },
              React.createElement('th', { className: 'px-3 py-2' }, 'Month'),
              React.createElement('th', { className: 'px-3 py-2' }, 'Trading Days'),
              React.createElement('th', { className: 'px-3 py-2' }, 'Gross Profit'),
              React.createElement('th', { className: 'px-3 py-2' }, 'Charges'),
              React.createElement('th', { className: 'px-3 py-2' }, 'Net Profit'),
              React.createElement('th', { className: 'px-3 py-2' }, 'ROI %')
            )
          ),
          React.createElement('tbody', null,
            results.monthlyArr.map(data =>
              React.createElement('tr', { key: data.month, className: 'border-t' },
                React.createElement('td', { className: 'px-3 py-2 font-medium' }, data.month),
                React.createElement('td', { className: 'px-3 py-2' }, data.days),
                React.createElement('td', { className: 'px-3 py-2 text-green-600' }, fmt(data.profit)),
                React.createElement('td', { className: 'px-3 py-2 text-red-500' }, fmt(data.charges)),
                React.createElement('td', { className: 'px-3 py-2 text-green-700 font-medium' }, fmt(data.netProfit)),
                React.createElement('td', { className: 'px-3 py-2' }, ((data.netProfit / capital) * 100).toFixed(1) + '%')
              )
            )
          )
        )
      ),

      // Weekly Summary Table
      React.createElement(WeeklySummaryTable, { weeklyMap: results.weeklyMap, capital, fmt }),

      // Daily Detail Table
      React.createElement(DailyDetailTable, { dayData: results.dayData, fmt }),

      // Large order warning
      results.dayData.some(d => d.totalQty > FREEZE_QTY) &&
        React.createElement('div', { className: 'bg-orange-50 border border-orange-300 rounded-xl p-4 mb-6 text-sm text-orange-900' },
          React.createElement('h3', { className: 'font-semibold mb-2' }, '⚠️ Large Order Warning'),
          React.createElement('ul', { className: 'list-disc pl-5 space-y-1' },
            React.createElement('li', null, 'Some days require qty > ' + FREEZE_QTY + ' (SEBI freeze limit). Orders will be auto-sliced into multiple legs, each incurring separate brokerage (₹40/slice).'),
            React.createElement('li', null, 'Large orders may face slippage — check bid-ask spread before placing. If spread > 1-2 points, your actual points needed will be higher.'),
            React.createElement('li', null, 'Consider placing orders in 2-3 tranches during high-volume periods (9:20-9:45 AM, 2:30-3:15 PM) to minimize impact cost.'),
            React.createElement('li', null, 'For qty > 5000, verify sufficient open interest (OI) at your strike — low OI means poor liquidity and wider spreads.'),
            React.createElement('li', null, 'Highlighted rows (orange) in the daily table indicate days where order slicing applies.')
          )
        )
    )
  );
}

function SummaryCard({ label, value, color, highlight }) {
  return React.createElement('div', {
    className: 'rounded-xl shadow p-4 text-center ' + (highlight ? 'bg-green-50 border-2 border-green-400' : 'bg-white')
  },
    React.createElement('div', { className: 'text-2xl font-bold ' + (color || (highlight ? 'text-green-700' : 'text-blue-700')) }, value),
    React.createElement('div', { className: 'text-xs mt-1 ' + (highlight ? 'text-green-600 font-semibold' : 'text-gray-500') }, label)
  );
}

function WeeklySummaryTable({ weeklyMap, capital, fmt }) {
  const [showAll, setShowAll] = React.useState(false);
  const weeks = Object.entries(weeklyMap);
  const visible = showAll ? weeks : weeks.slice(0, 12);

  return React.createElement('div', { className: 'bg-white rounded-xl shadow p-4 mb-6 overflow-x-auto' },
    React.createElement('h3', { className: 'font-semibold text-lg mb-3' }, '📊 Weekly Summary (NIFTY Wed→Tue Cycle)'),
    React.createElement('table', { className: 'w-full text-sm' },
      React.createElement('thead', null,
        React.createElement('tr', { className: 'bg-gray-50 text-left' },
          React.createElement('th', { className: 'px-3 py-2' }, 'Week Start'),
          React.createElement('th', { className: 'px-3 py-2' }, 'Days'),
          React.createElement('th', { className: 'px-3 py-2' }, 'Gross Profit'),
          React.createElement('th', { className: 'px-3 py-2' }, 'Charges'),
          React.createElement('th', { className: 'px-3 py-2' }, 'Net Profit'),
          React.createElement('th', { className: 'px-3 py-2' }, 'ROI %')
        )
      ),
      React.createElement('tbody', null,
        visible.map(([ws, data]) =>
          React.createElement('tr', { key: ws, className: 'border-t' },
            React.createElement('td', { className: 'px-3 py-2 font-medium' }, ws),
            React.createElement('td', { className: 'px-3 py-2' }, data.days),
            React.createElement('td', { className: 'px-3 py-2 text-green-600' }, fmt(data.profit)),
            React.createElement('td', { className: 'px-3 py-2 text-red-500' }, fmt(data.charges)),
            React.createElement('td', { className: 'px-3 py-2 text-green-700 font-medium' }, fmt(data.netProfit)),
            React.createElement('td', { className: 'px-3 py-2' }, ((data.netProfit / capital) * 100).toFixed(1) + '%')
          )
        )
      )
    ),
    weeks.length > 12 && React.createElement('button', {
      onClick: () => setShowAll(!showAll),
      className: 'mt-2 text-blue-600 text-sm hover:underline'
    }, showAll ? 'Show Less' : `Show All ${weeks.length} Weeks`)
  );
}

function DailyDetailTable({ dayData, fmt }) {
  const [expanded, setExpanded] = React.useState(false);
  const visible = expanded ? dayData : dayData.slice(0, 20);

  return React.createElement('div', { className: 'bg-white rounded-xl shadow p-4 mb-6 overflow-x-auto' },
    React.createElement('h3', { className: 'font-semibold text-lg mb-3 cursor-pointer', onClick: () => setExpanded(!expanded) },
      '📋 Daily Breakdown ', React.createElement('span', { className: 'text-sm text-gray-400' }, expanded ? '(click to collapse)' : `(showing 20 of ${dayData.length})`)),
    React.createElement('table', { className: 'w-full text-xs' },
      React.createElement('thead', null,
        React.createElement('tr', { className: 'bg-gray-50 text-left' },
          React.createElement('th', { className: 'px-2 py-1' }, 'Date'),
          React.createElement('th', { className: 'px-2 py-1' }, 'Day'),
          React.createElement('th', { className: 'px-2 py-1' }, 'Capital'),
          React.createElement('th', { className: 'px-2 py-1' }, 'Target Profit'),
          React.createElement('th', { className: 'px-2 py-1' }, 'Premium'),
          React.createElement('th', { className: 'px-2 py-1' }, 'Lots (Qty)'),
          React.createElement('th', { className: 'px-2 py-1' }, 'Pts Needed'),
          React.createElement('th', { className: 'px-2 py-1' }, 'Slices'),
          React.createElement('th', { className: 'px-2 py-1' }, 'Charges'),
          React.createElement('th', { className: 'px-2 py-1' }, 'Net Profit'),
          React.createElement('th', { className: 'px-2 py-1' }, 'Expiry')
        )
      ),
      React.createElement('tbody', null,
        visible.map(d =>
          React.createElement('tr', { key: d.date, className: 'border-t' + (d.isExpiry ? ' bg-yellow-50' : '') + (d.totalQty > FREEZE_QTY ? ' bg-orange-50' : '') },
            React.createElement('td', { className: 'px-2 py-1' }, d.date),
            React.createElement('td', { className: 'px-2 py-1' }, d.dayName),
            React.createElement('td', { className: 'px-2 py-1' }, fmt(d.capital)),
            React.createElement('td', { className: 'px-2 py-1 text-green-600' }, fmt(d.targetProfit)),
            React.createElement('td', { className: 'px-2 py-1 text-gray-500' }, '₹' + d.premium),
            React.createElement('td', { className: 'px-2 py-1 font-bold' }, d.lotsNeeded + ' (' + d.totalQty + ')'),
            React.createElement('td', { className: 'px-2 py-1 text-purple-600 font-semibold' }, d.pointsNeeded.toFixed(1)),
            React.createElement('td', { className: 'px-2 py-1' + (d.slices > 1 ? ' text-orange-600 font-semibold' : '') }, d.slices > 1 ? d.slices + '⚡' : '1'),
            React.createElement('td', { className: 'px-2 py-1 text-red-500' }, fmt(d.charges)),
            React.createElement('td', { className: 'px-2 py-1 text-green-700 font-medium' }, fmt(d.netProfit)),
            React.createElement('td', { className: 'px-2 py-1' }, d.isExpiry ? '🔔' : '')
          )
        )
      )
    ),
    !expanded && dayData.length > 20 && React.createElement('button', {
      onClick: () => setExpanded(true),
      className: 'mt-2 text-blue-600 text-sm hover:underline'
    }, `Show All ${dayData.length} Days`)
  );
}