import React, { useState, useMemo } from 'react';
import { TrendingUp, TrendingDown, CheckCircle, XCircle, Filter, RefreshCw, Plus, Trash2, Info } from 'lucide-react';

const INITIAL_DATA = [
  { id: 1, symbol: 'NSE:RELIANCE', price: 2450, ema50: 2400, sma200: 2440, rsi: 42, volume: 5000000 },
  { id: 2, symbol: 'NSE:TCS', price: 3500, ema50: 3450, sma200: 3200, rsi: 65, volume: 2000000 },
  { id: 3, symbol: 'NSE:INFY', price: 1400, ema50: 1420, sma200: 1600, rsi: 30, volume: 4500000 },
  { id: 4, symbol: 'NSE:HDFCBANK', price: 1605, ema50: 1580, sma200: 1600, rsi: 44, volume: 8000000 },
  { id: 5, symbol: 'NSE:ITC', price: 410, ema50: 400, sma200: 405, rsi: 41, volume: 12000000 },
  { id: 6, symbol: 'NSE:SBIN', price: 580, ema50: 570, sma200: 550, rsi: 78, volume: 15000000 },
  { id: 7, symbol: 'NSE:LT', price: 2900, ema50: 2850, sma200: 2880, rsi: 45, volume: 1000000 },
  { id: 8, symbol: 'NSE:TATAMOTORS', price: 620, ema50: 615, sma200: 625, rsi: 43, volume: 30000000 },
];

export default function ScreenerApp() {
  const [stocks, setStocks] = useState(INITIAL_DATA);
  const [filterOnlyEligible, setFilterOnlyEligible] = useState(false);
  const [newStock, setNewStock] = useState({
    symbol: 'NSE:',
    price: '',
    sma200: '',
    rsi: ''
  });
  const [isAdding, setIsAdding] = useState(false);

  // LOGIC ENGINE: Calculate derived metrics based on the User's Rules
  const processedStocks = useMemo(() => {
    return stocks.map(stock => {
      // Rule 1: Distance from 200 SMA
      const distanceRaw = (stock.price - stock.sma200) / stock.sma200;
      const distancePct = distanceRaw * 100;
      
      // Logic: Between -2% and +2%
      const nearSupport = Math.abs(distancePct) <= 2;

      // Rule 2: Trend Status
      const above200 = stock.price > stock.sma200;
      const trendStatus = above200 ? "Uptrend" : "Downtrend";

      // Rule 3: RSI 40-45 (Calm/Pullback zone)
      const rsiEligible = stock.rsi >= 40 && stock.rsi <= 45;

      // Rule 4: Volume (Simple check for liquidity, visual only)
      const liquid = stock.volume > 500000;

      // FINAL ELIGIBILITY
      // Must be above 200 SMA (or very close to it if testing support from below? 
      // The prompt said "Price > 200SMA" strictly, but usually near support allows slightly below.
      // We will stick to the prompt: Price > 200 SMA AND Near Support (+/- 2%) AND RSI 40-45.
      
      const isEligible = above200 && nearSupport && rsiEligible;

      return {
        ...stock,
        distancePct,
        trendStatus,
        isEligible,
        reasons: {
          nearSupport,
          rsiEligible,
          above200
        }
      };
    });
  }, [stocks]);

  const filteredStocks = filterOnlyEligible 
    ? processedStocks.filter(s => s.isEligible) 
    : processedStocks;

  const handleAddStock = () => {
    if(!newStock.symbol || !newStock.price || !newStock.sma200 || !newStock.rsi) return;
    
    const stockToAdd = {
      id: Date.now(),
      symbol: newStock.symbol.toUpperCase(),
      price: parseFloat(newStock.price),
      sma200: parseFloat(newStock.sma200),
      ema50: 0, // Not strictly used in final YES/NO logic, just visual
      rsi: parseFloat(newStock.rsi),
      volume: 1000000 // Default liquid
    };

    setStocks([...stocks, stockToAdd]);
    setNewStock({ symbol: 'NSE:', price: '', sma200: '', rsi: '' });
    setIsAdding(false);
  };

  const deleteStock = (id) => {
    setStocks(stocks.filter(s => s.id !== id));
  };

  return (
    <div className="min-h-screen bg-gray-50 text-gray-800 p-4 md:p-8 font-sans">
      <div className="max-w-6xl mx-auto">
        
        {/* Header Section */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-slate-800 mb-2 flex items-center gap-2">
            <Filter className="w-8 h-8 text-blue-600" />
            Weekly Stock Screener
          </h1>
          <p className="text-slate-600">
            Logic Simulator: Validates stocks based on <strong>Liquidity, 200 SMA Support, and RSI (40-45)</strong>.
          </p>
        </div>

        {/* Rules Card */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
          <div className="bg-white p-4 rounded-lg shadow-sm border-l-4 border-blue-500">
            <div className="text-xs text-gray-500 uppercase font-bold tracking-wider">Universe</div>
            <div className="font-semibold">NIFTY 50 Only</div>
          </div>
          <div className="bg-white p-4 rounded-lg shadow-sm border-l-4 border-purple-500">
            <div className="text-xs text-gray-500 uppercase font-bold tracking-wider">Support Logic</div>
            <div className="font-semibold">Within ±2% of 200 SMA</div>
          </div>
          <div className="bg-white p-4 rounded-lg shadow-sm border-l-4 border-orange-500">
            <div className="text-xs text-gray-500 uppercase font-bold tracking-wider">RSI Filter</div>
            <div className="font-semibold">Between 40 and 45</div>
          </div>
           <div className="bg-white p-4 rounded-lg shadow-sm border-l-4 border-green-500">
            <div className="text-xs text-gray-500 uppercase font-bold tracking-wider">Execution</div>
            <div className="font-semibold">Max 2 Trades/Week</div>
          </div>
        </div>

        {/* Controls */}
        <div className="flex flex-col md:flex-row justify-between items-center mb-6 gap-4">
          <div className="flex gap-2">
             <button 
              onClick={() => setFilterOnlyEligible(!filterOnlyEligible)}
              className={`px-4 py-2 rounded-md font-medium transition-colors flex items-center gap-2 ${filterOnlyEligible ? 'bg-green-600 text-white shadow-md' : 'bg-white text-gray-600 border border-gray-300 hover:bg-gray-50'}`}
            >
              {filterOnlyEligible ? <CheckCircle size={18} /> : <Filter size={18} />}
              {filterOnlyEligible ? 'Showing Candidates' : 'Show All'}
            </button>
            <button 
              onClick={() => setStocks(INITIAL_DATA)}
              className="px-4 py-2 bg-white border border-gray-300 text-gray-600 rounded-md hover:bg-gray-50 flex items-center gap-2"
            >
              <RefreshCw size={18} /> Reset Data
            </button>
          </div>

          <button 
            onClick={() => setIsAdding(!isAdding)}
            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 shadow-sm flex items-center gap-2"
          >
            <Plus size={18} /> Add Test Stock
          </button>
        </div>

        {/* Add Stock Form */}
        {isAdding && (
          <div className="bg-blue-50 p-4 rounded-lg mb-6 border border-blue-100 animate-in fade-in slide-in-from-top-4">
            <h3 className="font-semibold text-blue-800 mb-3">Test a Potential Setup</h3>
            <div className="grid grid-cols-1 md:grid-cols-5 gap-4 items-end">
              <div>
                <label className="block text-xs font-semibold text-blue-700 mb-1">Symbol</label>
                <input 
                  type="text" 
                  value={newStock.symbol} 
                  onChange={e => setNewStock({...newStock, symbol: e.target.value})}
                  className="w-full p-2 border border-blue-200 rounded focus:ring-2 focus:ring-blue-400 outline-none"
                />
              </div>
              <div>
                <label className="block text-xs font-semibold text-blue-700 mb-1">Current Price</label>
                <input 
                  type="number" 
                  placeholder="1000"
                  value={newStock.price} 
                  onChange={e => setNewStock({...newStock, price: e.target.value})}
                  className="w-full p-2 border border-blue-200 rounded focus:ring-2 focus:ring-blue-400 outline-none"
                />
              </div>
              <div>
                <label className="block text-xs font-semibold text-blue-700 mb-1">200 SMA Value</label>
                <input 
                  type="number" 
                  placeholder="990"
                  value={newStock.sma200} 
                  onChange={e => setNewStock({...newStock, sma200: e.target.value})}
                  className="w-full p-2 border border-blue-200 rounded focus:ring-2 focus:ring-blue-400 outline-none"
                />
              </div>
              <div>
                <label className="block text-xs font-semibold text-blue-700 mb-1">RSI (14)</label>
                <input 
                  type="number" 
                  placeholder="42"
                  value={newStock.rsi} 
                  onChange={e => setNewStock({...newStock, rsi: e.target.value})}
                  className="w-full p-2 border border-blue-200 rounded focus:ring-2 focus:ring-blue-400 outline-none"
                />
              </div>
              <button 
                onClick={handleAddStock}
                className="bg-blue-600 text-white p-2 rounded hover:bg-blue-700 font-medium"
              >
                Run Logic
              </button>
            </div>
          </div>
        )}

        {/* The Screener Table */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="bg-gray-100 text-gray-600 text-sm uppercase tracking-wider">
                  <th className="p-4 font-semibold border-b">Symbol</th>
                  <th className="p-4 font-semibold border-b text-right">Price</th>
                  <th className="p-4 font-semibold border-b text-right">200 SMA</th>
                  <th className="p-4 font-semibold border-b text-right">Dist %</th>
                  <th className="p-4 font-semibold border-b text-center">RSI</th>
                  <th className="p-4 font-semibold border-b text-center">Trend</th>
                  <th className="p-4 font-semibold border-b text-center">Eligible?</th>
                  <th className="p-4 font-semibold border-b w-10"></th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100">
                {filteredStocks.map((stock) => (
                  <tr key={stock.id} className={`hover:bg-gray-50 transition-colors ${stock.isEligible ? 'bg-green-50/50' : ''}`}>
                    <td className="p-4 font-medium text-gray-900">{stock.symbol}</td>
                    <td className="p-4 text-right font-mono text-gray-700">{stock.price}</td>
                    <td className="p-4 text-right font-mono text-gray-500">{stock.sma200}</td>
                    
                    {/* Distance Column */}
                    <td className="p-4 text-right font-mono">
                      <span className={`px-2 py-1 rounded text-sm ${stock.reasons.nearSupport ? 'bg-green-100 text-green-800' : 'text-red-500'}`}>
                        {stock.distancePct > 0 ? '+' : ''}{stock.distancePct.toFixed(2)}%
                      </span>
                    </td>

                    {/* RSI Column */}
                    <td className="p-4 text-center font-mono">
                      <span className={`px-2 py-1 rounded text-sm ${stock.reasons.rsiEligible ? 'bg-green-100 text-green-800 font-bold' : 'text-gray-400'}`}>
                        {stock.rsi}
                      </span>
                    </td>

                    {/* Trend Column */}
                    <td className="p-4 text-center">
                      <div className="flex items-center justify-center gap-1">
                        {stock.trendStatus === 'Uptrend' 
                          ? <TrendingUp size={16} className="text-green-600" />
                          : <TrendingDown size={16} className="text-red-500" />
                        }
                        <span className={`text-sm ${stock.trendStatus === 'Uptrend' ? 'text-green-700' : 'text-red-600'}`}>
                          {stock.trendStatus}
                        </span>
                      </div>
                    </td>

                    {/* Eligibility Column */}
                    <td className="p-4 text-center">
                      {stock.isEligible ? (
                        <div className="inline-flex items-center gap-1 bg-green-600 text-white px-3 py-1 rounded-full text-sm font-medium shadow-sm">
                          <CheckCircle size={14} /> YES
                        </div>
                      ) : (
                        <div className="inline-flex items-center gap-1 text-gray-400 text-sm">
                          <XCircle size={14} /> NO
                        </div>
                      )}
                    </td>

                    <td className="p-4 text-center">
                      <button onClick={() => deleteStock(stock.id)} className="text-gray-400 hover:text-red-500 transition-colors">
                        <Trash2 size={16} />
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          
          {filteredStocks.length === 0 && (
            <div className="p-8 text-center text-gray-500">
              <Info className="mx-auto h-12 w-12 text-gray-300 mb-2" />
              <p>No stocks match the strict criteria right now.</p>
              <button onClick={() => setFilterOnlyEligible(false)} className="text-blue-600 hover:underline mt-2">
                Show all stocks
              </button>
            </div>
          )}
        </div>

        <div className="mt-6 text-sm text-gray-500 flex items-start gap-2 bg-yellow-50 p-4 rounded border border-yellow-100">
           <Info className="w-5 h-5 text-yellow-600 flex-shrink-0" />
           <p>
             <strong>Why did HDFCBANK (in the example) pass?</strong> <br/>
             Price (1605) is greater than 200SMA (1600). <br/>
             Distance is +0.31% (within 2% limit). <br/>
             RSI is 44 (within 40-45 limit). <br/>
             <strong>This is your "Gold Standard" setup.</strong>
           </p>
        </div>
      </div>
    </div>
  );
}