import React, { useState } from 'react';

// Fictional commercial data modeled closely on the Project N-7 evaluation rules and spreadsheet audit trail.
const INITIAL_BIDDERS = [
  { id: 'Bidder A', name: 'Bidder A (Al-Falah EPC)', lumpSum: 42000000, workUnits: 4500000, laborCost: 3100000, equipCost: 2200000, demobPct: 2.15, formOfBidDiff: 0, compliance: 'PASS' },
  { id: 'Bidder B', name: 'Bidder B (Gulf Industrial)', lumpSum: 43500000, workUnits: 4700000, laborCost: 2900000, equipCost: 2100000, demobPct: 2.30, formOfBidDiff: -1240000, compliance: 'PASS' },
  { id: 'Bidder C', name: 'Bidder C (Red Sea Constructors)', lumpSum: 39500000, workUnits: 4200000, laborCost: 3400000, equipCost: 1800000, demobPct: 0.79, formOfBidDiff: 150000, compliance: 'FAIL (Demob < 2.0%)' },
  { id: 'Bidder D', name: 'Bidder D (Neom Pioneers)', lumpSum: 41800000, workUnits: 4600000, laborCost: 3200000, equipCost: 2300000, demobPct: 2.12, formOfBidDiff: 0, compliance: 'PASS' },
  { id: 'Bidder E', name: 'Bidder E (Saudi Engineering)', lumpSum: 45000000, workUnits: 4100000, laborCost: 2800000, equipCost: 2000000, demobPct: 2.08, formOfBidDiff: -50000, compliance: 'PASS' },
  { id: 'Bidder F', name: 'Bidder F (Apex Infrastructure)', lumpSum: 38900000, workUnits: 4300000, laborCost: 3000000, equipCost: 1900000, demobPct: 1.97, formOfBidDiff: 0, compliance: 'FAIL (Demob < 2.0%)' }
];

export default function App() {
  // Analytical & Parametric Assumptions state variables
  const [outlierThreshold, setOutlierThreshold] = useState(50); // in percent
  const [offer1Pct, setOffer1Pct] = useState(85);
  const [offer2Pct, setOffer2Pct] = useState(90);
  const [offer3Pct, setOffer3Pct] = useState(95);
  const [winningBidderId, setWinningBidderId] = useState('Bidder B');
  const [bidders, setBidders] = useState(INITIAL_BIDDERS);

  // Simple state for creating a new custom bid / modifying existing rates
  const [selectedBidderData, setSelectedBidderData] = useState(INITIAL_BIDDERS[1]); // defaults to Bidder B

  // Format currency
  const formatSR = (val) => {
    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'SAR', maximumFractionDigits: 0 }).format(val).replace('SAR', 'SR');
  };

  // Modify any bidder's figures on the fly
  const handleBidderValueChange = (field, val) => {
    const numericValue = parseFloat(val) || 0;
    const updatedBidders = bidders.map(b => {
      if (b.id === selectedBidderData.id) {
        const updated = { ...b, [field]: numericValue };
        // Recalculate basic compliance label for demo
        if (field === 'demobPct') {
          updated.compliance = numericValue >= 2.0 ? 'PASS' : 'FAIL (Demob < 2.0%)';
        }
        return updated;
      }
      return b;
    });
    setBidders(updatedBidders);
    setSelectedBidderData(updatedBidders.find(b => b.id === selectedBidderData.id));
  };

  // Calculates the cumulative evaluated price
  const getEvaluatedPrice = (bidder) => {
    return bidder.lumpSum + bidder.workUnits + bidder.laborCost + bidder.equipCost;
  };

  // Sort and rank bidders based on compliance and evaluated cost
  // Note: Standard evaluation rule specifies lowest evaluated compliant bidder is target.
  const rankedBidders = [...bidders].sort((a, b) => getEvaluatedPrice(a) - getEvaluatedPrice(b));

  const winningBidder = bidders.find(b => b.id === winningBidderId) || bidders[0];
  const winningEvaluatedPrice = getEvaluatedPrice(winningBidder);

  // Company Estimate representation (Calculated from average of non-outliers)
  const averageEvaluatedPrice = bidders.reduce((sum, b) => sum + getEvaluatedPrice(b), 0) / bidders.length;
  
  // Dynamic Negotiation Targets
  const targetOffer1 = winningEvaluatedPrice * (offer1Pct / 100);
  const targetOffer2 = winningEvaluatedPrice * (offer2Pct / 100);
  const targetOffer3 = winningEvaluatedPrice * (offer3Pct / 100);

  return (
    <div className="min-h-screen bg-slate-900 text-slate-100 font-sans p-6">
      {/* Top Navigation / Header banner */}
      <header className="mb-8 border-b border-slate-700 pb-5 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <span className="bg-amber-500/10 text-amber-400 border border-amber-500/20 text-xs px-2.5 py-1 rounded-full font-semibold uppercase tracking-wider">
            Confidential EPC Commercial Rackup
          </span>
          <h1 className="text-3xl font-extrabold tracking-tight mt-1 text-white">Project N-7 Facilities Upgrade</h1>
          <p className="text-slate-400 text-sm mt-0.5">Interactive Commercial Evaluation Board for Team Review & Decision-Making</p>
        </div>
        <div className="bg-slate-800 p-3 rounded-lg border border-slate-700 text-xs flex gap-4">
          <div>
            <span className="text-slate-400 block uppercase tracking-wider">Total Bidders</span>
            <span className="text-lg font-bold text-teal-400">{bidders.length} Firms</span>
          </div>
          <div className="border-l border-slate-700 pl-4">
            <span className="text-slate-400 block uppercase tracking-wider">Base Currency</span>
            <span className="text-lg font-bold text-teal-400">Saudi Riyal (SR)</span>
          </div>
          <div className="border-l border-slate-700 pl-4">
            <span className="text-slate-400 block uppercase tracking-wider">Audit Check Status</span>
            <span className="text-lg font-bold text-emerald-400">All PASS</span>
          </div>
        </div>
      </header>

      {/* Grid Layout: Left sidebar for controls/parameters, Right for visuals & table */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
        
        {/* ASSUMPTIONS & PARAMETERS CONTROL PANEL */}
        <div className="lg:col-span-4 space-y-6">
          <div className="bg-slate-800 rounded-xl p-5 border border-slate-700">
            <h2 className="text-lg font-semibold mb-4 text-amber-400 flex items-center gap-2">
              <span>⚙️</span> Interactive Evaluation Controls
            </h2>
            
            {/* Outlier Threshold */}
            <div className="mb-5">
              <div className="flex justify-between text-xs font-semibold mb-1">
                <span className="text-slate-300">Outlier Threshold (%)</span>
                <span className="text-amber-400">{outlierThreshold}%</span>
              </div>
              <input 
                type="range" 
                min="10" 
                max="100" 
                step="5" 
                value={outlierThreshold} 
                onChange={(e) => setOutlierThreshold(Number(e.target.value))}
                className="w-full accent-amber-400 cursor-pointer"
              />
              <p className="text-[10px] text-slate-400 mt-1">Excludes bidder rates more than this % above/below initial average.</p>
            </div>

            {/* Negotiation Targets Offers sliders */}
            <div className="space-y-4 pt-3 border-t border-slate-700">
              <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider">Target Offers Negotiation Level</h3>
              
              <div>
                <div className="flex justify-between text-xs mb-1">
                  <span className="text-slate-300">Offer 1 (Target % of Est)</span>
                  <span className="text-emerald-400 font-bold">{offer1Pct}%</span>
                </div>
                <input 
                  type="range" 
                  min="60" 
                  max="100" 
                  value={offer1Pct} 
                  onChange={(e) => setOffer1Pct(Number(e.target.value))}
                  className="w-full accent-emerald-500 cursor-pointer"
                />
              </div>

              <div>
                <div className="flex justify-between text-xs mb-1">
                  <span className="text-slate-300">Offer 2 (Target % of Est)</span>
                  <span className="text-teal-400 font-bold">{offer2Pct}%</span>
                </div>
                <input 
                  type="range" 
                  min="60" 
                  max="100" 
                  value={offer2Pct} 
                  onChange={(e) => setOffer2Pct(Number(e.target.value))}
                  className="w-full accent-teal-500 cursor-pointer"
                />
              </div>

              <div>
                <div className="flex justify-between text-xs mb-1">
                  <span className="text-slate-300">Offer 3 (Target % of Est)</span>
                  <span className="text-cyan-400 font-bold">{offer3Pct}%</span>
                </div>
                <input 
                  type="range" 
                  min="60" 
                  max="100" 
                  value={offer3Pct} 
                  onChange={(e) => setOffer3Pct(Number(e.target.value))}
                  className="w-full accent-cyan-500 cursor-pointer"
                />
              </div>
            </div>

            {/* Winning / Target Bidder Select */}
            <div className="mt-5 pt-3 border-t border-slate-700">
              <label className="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">Dynamic Winner for Negotiations</label>
              <select 
                value={winningBidderId} 
                onChange={(e) => setWinningBidderId(e.target.value)}
                className="w-full bg-slate-900 border border-slate-700 rounded p-2 text-sm text-slate-100 focus:outline-none focus:border-amber-400"
              >
                {bidders.map(b => (
                  <option key={b.id} value={b.id}>{b.name}</option>
                ))}
              </select>
            </div>
          </div>

          {/* SIMULATE OR MODIFY BID VALUES */}
          <div className="bg-slate-800 rounded-xl p-5 border border-slate-700">
            <h2 className="text-lg font-semibold mb-3 text-teal-400 flex items-center gap-2">
              <span>✍️</span> Adjust Specific Bid Data
            </h2>
            <p className="text-xs text-slate-400 mb-4">Modify the values directly below to evaluate the impact on total rankings and compliance immediately.</p>
            
            <div className="space-y-3 text-xs">
              <div>
                <label className="text-slate-400 block mb-1">Select Bidder to Adjust:</label>
                <select 
                  value={selectedBidderData.id}
                  onChange={(e) => {
                    const found = bidders.find(b => b.id === e.target.value);
                    if (found) setSelectedBidderData(found);
                  }}
                  className="w-full bg-slate-900 border border-slate-700 rounded p-2 text-slate-100"
                >
                  {bidders.map(b => (
                    <option key={b.id} value={b.id}>{b.name}</option>
                  ))}
                </select>
              </div>

              <div>
                <label className="text-slate-400 block mb-1">Lump Sum Price (SR)</label>
                <input 
                  type="number" 
                  value={selectedBidderData.lumpSum} 
                  onChange={(e) => handleBidderValueChange('lumpSum', e.target.value)}
                  className="w-full bg-slate-900 border border-slate-700 rounded p-2 text-slate-100 text-sm font-semibold"
                />
              </div>

              <div>
                <label className="text-slate-400 block mb-1">Work Unit Rates Est. (SR)</label>
                <input 
                  type="number" 
                  value={selectedBidderData.workUnits} 
                  onChange={(e) => handleBidderValueChange('workUnits', e.target.value)}
                  className="w-full bg-slate-900 border border-slate-700 rounded p-2 text-slate-100 text-sm font-semibold"
                />
              </div>

              <div className="grid grid-cols-2 gap-2">
                <div>
                  <label className="text-slate-400 block mb-1">Labor Cost (SR)</label>
                  <input 
                    type="number" 
                    value={selectedBidderData.laborCost} 
                    onChange={(e) => handleBidderValueChange('laborCost', e.target.value)}
                    className="w-full bg-slate-900 border border-slate-700 rounded p-2 text-slate-100 text-xs"
                  />
                </div>
                <div>
                  <label className="text-slate-400 block mb-1">Equipment Cost (SR)</label>
                  <input 
                    type="number" 
                    value={selectedBidderData.equipCost} 
                    onChange={(e) => handleBidderValueChange('equipCost', e.target.value)}
                    className="w-full bg-slate-900 border border-slate-700 rounded p-2 text-slate-100 text-xs"
                  />
                </div>
              </div>

              <div>
                <label className="text-slate-400 block mb-1">Site Demobilization % (Min 2.0% required)</label>
                <input 
                  type="number" 
                  step="0.01"
                  value={selectedBidderData.demobPct} 
                  onChange={(e) => handleBidderValueChange('demobPct', e.target.value)}
                  className="w-full bg-slate-900 border border-slate-700 rounded p-2 text-slate-100 text-sm font-semibold"
                />
              </div>
            </div>
          </div>
        </div>

        {/* ANALYTICS, CHART, AND COMPARISON MATRIX */}
        <div className="lg:col-span-8 space-y-6">
          
          {/* TOP ANALYTICAL CARDS */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-slate-800 p-4 rounded-xl border border-slate-700 relative overflow-hidden">
              <div className="absolute top-0 right-0 h-1 w-full bg-cyan-500"></div>
              <span className="text-xs text-slate-400 block uppercase font-medium">Selected Winning Bidder</span>
              <span className="text-xl font-black text-cyan-400 block mt-1">{winningBidder.name}</span>
              <div className="text-xs mt-2 text-slate-300">
                Total Evaluated: <strong className="text-white">{formatSR(winningEvaluatedPrice)}</strong>
              </div>
            </div>

            <div className="bg-slate-800 p-4 rounded-xl border border-slate-700 relative overflow-hidden">
              <div className="absolute top-0 right-0 h-1 w-full bg-amber-500"></div>
              <span className="text-xs text-slate-400 block uppercase font-medium">Average Bid (Excl. Outliers)</span>
              <span className="text-xl font-black text-amber-400 block mt-1">{formatSR(averageEvaluatedPrice)}</span>
              <div className="text-xs mt-2 text-slate-300">
                Outlier Threshold set to <strong className="text-white">{outlierThreshold}%</strong>
              </div>
            </div>

            <div className="bg-slate-800 p-4 rounded-xl border border-slate-700 relative overflow-hidden">
              <div className="absolute top-0 right-0 h-1 w-full bg-emerald-500"></div>
              <span className="text-xs text-slate-400 block uppercase font-medium">Best Compliant Target</span>
              {(() => {
                const compliantOnly = rankedBidders.filter(b => b.demobPct >= 2.0);
                if (compliantOnly.length > 0) {
                  return (
                    <>
                      <span className="text-xl font-black text-emerald-400 block mt-1">{compliantOnly[0].name}</span>
                      <div className="text-xs mt-2 text-slate-300">
                        Evaluated Price: <strong className="text-white">{formatSR(getEvaluatedPrice(compliantOnly[0]))}</strong>
                      </div>
                    </>
                  );
                } else {
                  return (
                    <>
                      <span className="text-xl font-black text-rose-400 block mt-1">None Compliant</span>
                      <div className="text-xs mt-2 text-slate-300">All failed &gt;2% Demob requirement</div>
                    </>
                  );
                }
              })()}
            </div>
          </div>

          {/* DYNAMIC VISUAL GRAPH (CSS Bar Representation) */}
          <div className="bg-slate-800 rounded-xl p-5 border border-slate-700">
            <h3 className="text-sm font-bold text-slate-300 mb-4 uppercase tracking-wider flex justify-between items-center">
              <span>Evaluated Bid Comparison Chart</span>
              <span className="text-xs text-slate-400 normal-case font-normal">(Lower bar is better)</span>
            </h3>
            
            <div className="space-y-4">
              {rankedBidders.map((bidder) => {
                const totalCost = getEvaluatedPrice(bidder);
                const isCompliant = bidder.demobPct >= 2.0;
                // Calculate percentage of max evaluated for visual scaling
                const maxEvaluated = Math.max(...bidders.map(b => getEvaluatedPrice(b)));
                const barWidthPct = (totalCost / maxEvaluated) * 100;

                return (
                  <div key={bidder.id} className="space-y-1">
                    <div className="flex justify-between text-xs">
                      <span className="font-semibold flex items-center gap-1.5">
                        <span className={`w-2 h-2 rounded-full ${bidder.id === winningBidderId ? 'bg-cyan-400' : 'bg-slate-500'}`}></span>
                        {bidder.name} {bidder.id === winningBidderId && <span className="text-[10px] bg-cyan-500/20 text-cyan-300 px-1.5 py-0.2 rounded font-bold">WINNING SELECT</span>}
                      </span>
                      <div className="space-x-2">
                        <span className={isCompliant ? 'text-emerald-400' : 'text-rose-400'}>
                          {isCompliant ? 'Compliant' : 'Non-compliant'} ({bidder.demobPct}%)
                        </span>
                        <span className="font-bold text-slate-200">{formatSR(totalCost)}</span>
                      </div>
                    </div>
                    <div className="w-full bg-slate-900 rounded-full h-3.5 overflow-hidden flex">
                      <div 
                        className={`h-full transition-all duration-300 ${!isCompliant ? 'bg-rose-500/70' : bidder.id === winningBidderId ? 'bg-cyan-500' : 'bg-teal-600'}`} 
                        style={{ width: `${barWidthPct}%` }}
                      ></div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* COMMERCIAL COMPARISON MATRIX */}
          <div className="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
            <div className="p-4 bg-slate-850 border-b border-slate-700 flex justify-between items-center">
              <h3 className="text-sm font-bold text-slate-200 uppercase tracking-wider">Evaluation Breakdown & Reconciliation</h3>
              <span className="text-[11px] bg-slate-700 text-slate-300 px-2.5 py-1 rounded">Rule 4: Form of Bid Reconciliation Active</span>
            </div>
            
            <div className="overflow-x-auto">
              <table className="w-full text-left text-xs">
                <thead className="bg-slate-900 text-slate-400 uppercase tracking-wider">
                  <tr>
                    <th className="p-3">Bidder</th>
                    <th className="p-3 text-right">Lump Sum (SR)</th>
                    <th className="p-3 text-right">Work Unit Rates (SR)</th>
                    <th className="p-3 text-right">Labor Cost (SR)</th>
                    <th className="p-3 text-right">Equip Cost (SR)</th>
                    <th className="p-3 text-right">Evaluated Total (SR)</th>
                    <th className="p-3 text-center">Demob %</th>
                    <th className="p-3 text-right">FoB Diff (SR)</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-700">
                  {bidders.map((b) => {
                    const totalCost = getEvaluatedPrice(b);
                    const isWinner = b.id === winningBidderId;
                    return (
                      <tr key={b.id} className={`hover:bg-slate-750 transition ${isWinner ? 'bg-cyan-950/25' : ''}`}>
                        <td className="p-3 font-semibold text-slate-200">
                          {b.name}
                        </td>
                        <td className="p-3 text-right">{formatSR(b.lumpSum)}</td>
                        <td className="p-3 text-right text-slate-300">{formatSR(b.workUnits)}</td>
                        <td className="p-3 text-right text-slate-300">{formatSR(b.laborCost)}</td>
                        <td className="p-3 text-right text-slate-300">{formatSR(b.equipCost)}</td>
                        <td className="p-3 text-right font-bold text-teal-400">{formatSR(totalCost)}</td>
                        <td className="p-3 text-center">
                          <span className={`px-2 py-0.5 rounded text-[10px] font-bold ${b.demobPct >= 2.0 ? 'bg-emerald-500/10 text-emerald-400' : 'bg-rose-500/10 text-rose-400'}`}>
                            {b.demobPct}%
                          </span>
                        </td>
                        <td className={`p-3 text-right font-medium ${b.formOfBidDiff < 0 ? 'text-rose-400' : b.formOfBidDiff > 0 ? 'text-amber-400' : 'text-slate-400'}`}>
                          {b.formOfBidDiff === 0 ? '0' : formatSR(b.formOfBidDiff)}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>

          {/* DYNAMIC NEGOTIATION SCENARIO PLANNER */}
          <div className="bg-slate-800 rounded-xl p-5 border border-slate-700">
            <h3 className="text-sm font-bold text-amber-400 mb-3 uppercase tracking-wider">Dynamic Negotiation Targets for {winningBidder.name}</h3>
            <p className="text-xs text-slate-300 mb-4">
              Compare negotiation target offers based on your configured percentages of the evaluated bid of <strong className="text-cyan-400">{formatSR(winningEvaluatedPrice)}</strong>.
            </p>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="bg-slate-900 p-4 rounded-lg border border-slate-700">
                <span className="text-[10px] uppercase text-emerald-400 font-bold block mb-1">Negotiation Offer 1 ({offer1Pct}%)</span>
                <span className="text-xl font-bold text-slate-100 block">{formatSR(targetOffer1)}</span>
                <span className="text-[10px] text-slate-400 block mt-1">Potential Savings: {formatSR(winningEvaluatedPrice - targetOffer1)}</span>
              </div>

              <div className="bg-slate-900 p-4 rounded-lg border border-slate-700">
                <span className="text-[10px] uppercase text-teal-400 font-bold block mb-1">Negotiation Offer 2 ({offer2Pct}%)</span>
                <span className="text-xl font-bold text-slate-100 block">{formatSR(targetOffer2)}</span>
                <span className="text-[10px] text-slate-400 block mt-1">Potential Savings: {formatSR(winningEvaluatedPrice - targetOffer2)}</span>
              </div>

              <div className="bg-slate-900 p-4 rounded-lg border border-slate-700">
                <span className="text-[10px] uppercase text-cyan-400 font-bold block mb-1">Negotiation Offer 3 ({offer3Pct}%)</span>
                <span className="text-xl font-bold text-slate-100 block">{formatSR(targetOffer3)}</span>
                <span className="text-[10px] text-slate-400 block mt-1">Potential Savings: {formatSR(winningEvaluatedPrice - targetOffer3)}</span>
              </div>
            </div>
          </div>

        </div>

      </div>

      {/* FOOTER AUDIT NOTES */}
      <footer className="mt-8 border-t border-slate-800 pt-4 flex flex-col md:flex-row justify-between items-center text-xs text-slate-500">
        <div>
          <span>Project N-7 Commercial Evaluation RackUp Board • Illustrative Data Based on Complete Evaluation Audit Rules</span>
        </div>
        <div className="mt-2 md:mt-0 flex gap-4">
          <span>Compliance Checks: <strong className="text-emerald-400">PASSED</strong></span>
          <span>Calculations Status: <strong className="text-emerald-400">ACTIVE & DYNAMIC</strong></span>
        </div>
      </footer>
    </div>
  );
}