import React from 'react';
import { Trash2, PlusCircle, Power } from 'lucide-react';
import { IOLogicRule, LogicCondition, LogicAction } from '../types';

interface LadderEditorProps {
  logicRules: IOLogicRule[];
  inputNames: string[];
  outputNames: string[];
  currentInputs: boolean[];
  currentOutputs: boolean[];
  onAddRule: (rule: IOLogicRule) => void;
  onDeleteRule: (id: string) => void;
  onUpdateRule: (id: string, updates: Partial<IOLogicRule>) => void;
}

export const LadderEditor: React.FC<LadderEditorProps> = ({
  logicRules,
  inputNames,
  outputNames,
  currentInputs,
  currentOutputs,
  onAddRule,
  onDeleteRule,
  onUpdateRule
}) => {
  return (
    <div className="flex-1 bg-gray-950 flex flex-col relative overflow-hidden">
      {/* Background Grid Pattern */}
      <div className="absolute inset-0 opacity-[0.03] pointer-events-none" 
        style={{ backgroundImage: 'radial-gradient(#fff 1px, transparent 1px)', backgroundSize: '24px 24px' }} />

      {/* Toolbar */}
      <div className="h-12 border-b border-gray-800 flex items-center px-6 justify-between shrink-0 bg-gray-900/50 backdrop-blur-md">
        <h3 className="text-xs font-black uppercase tracking-widest text-gray-400">Main Controller (Ladder Logic)</h3>
        <button 
          onClick={() => onAddRule({
            id: crypto.randomUUID(),
            inputPort: 0,
            condition: LogicCondition.IS_ON,
            outputPort: 0,
            action: LogicAction.SET_ON,
            enabled: true
          })}
          className="flex items-center gap-2 bg-blue-600 hover:bg-blue-500 text-white px-4 py-1.5 rounded-full text-xs font-bold transition-all transform active:scale-95"
        >
          <PlusCircle size={14}/> Add New Rung
        </button>
      </div>

      {/* Programming Workspace */}
      <div className="flex-1 overflow-y-auto p-12 custom-scrollbar relative flex flex-col items-center">
        {/* Left Bus Bar (Hot) */}
        <div className="absolute left-10 top-0 bottom-0 w-1 bg-gradient-to-b from-red-600 via-red-500 to-red-600 shadow-[0_0_10px_rgba(239,68,68,0.5)] z-10" />
        {/* Right Bus Bar (Neutral) */}
        <div className="absolute right-10 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-600 via-blue-500 to-blue-600 shadow-[0_0_10px_rgba(59,130,246,0.5)] z-10" />

        <div className="w-full max-w-4xl space-y-12">
          {logicRules.map((rule, index) => {
            const inputActive = currentInputs[rule.inputPort];
            const outputActive = currentOutputs[rule.outputPort];
            
            return (
              <div key={rule.id} className="relative flex items-center group">
                {/* Rung Number */}
                <div className="absolute -left-12 text-[10px] font-mono text-gray-700">{(index + 1).toString().padStart(3, '0')}</div>
                
                {/* Delete Button */}
                <button 
                  onClick={() => onDeleteRule(rule.id)}
                  className="absolute -right-16 p-2 text-gray-700 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100"
                >
                  <Trash2 size={16}/>
                </button>

                {/* The Rung Wire */}
                <div className="flex-1 flex items-center h-[2px] bg-gray-800 relative">
                  {/* Energized segments */}
                  {inputActive && <div className="absolute left-0 w-1/2 h-full bg-green-500 shadow-[0_0_8px_#22c55e]" />}
                  {outputActive && <div className="absolute left-1/2 right-0 h-full bg-green-500 shadow-[0_0_8px_#22c55e]" />}

                  {/* Contact (Input) */}
                  <div className="absolute left-[20%] -translate-x-1/2 flex flex-col items-center">
                    <div className="mb-2 text-[10px] font-mono text-gray-500 text-center w-24">
                      {inputNames[rule.inputPort] || `Input ${rule.inputPort}`}
                    </div>
                    <div className="relative h-12 w-12 flex items-center justify-center">
                       {/* Terminal Brackets */}
                       <div className="absolute left-0 w-2 h-8 border-l-4 border-gray-600 rounded-sm" />
                       <div className="absolute right-0 w-2 h-8 border-r-4 border-gray-600 rounded-sm" />
                       
                       {/* Selector Area */}
                       <select 
                        className={`bg-gray-900 text-[10px] font-bold border-2 rounded px-1 appearance-none text-center h-6 w-8 z-10 cursor-pointer ${inputActive ? 'border-green-500 text-green-500' : 'border-gray-700 text-gray-400'}`}
                        value={rule.inputPort}
                        onChange={(e) => onUpdateRule(rule.id, { inputPort: parseInt(e.target.value) })}
                       >
                         {Array.from({length: 16}).map((_, i) => <option key={i} value={i}>{i}</option>)}
                       </select>
                    </div>
                  </div>

                  {/* Coil (Output) */}
                  <div className="absolute right-[20%] translate-x-1/2 flex flex-col items-center">
                    <div className="mb-2 text-[10px] font-mono text-gray-500 text-center w-24">
                      {outputNames[rule.outputPort] || `Output ${rule.outputPort}`}
                    </div>
                    <div className="relative h-12 w-12 flex items-center justify-center">
                       {/* Coil Brackets (Parens style) */}
                       <div className="absolute inset-0 flex items-center justify-center">
                          <div className={`w-8 h-8 rounded-full border-4 ${outputActive ? 'border-green-500 shadow-[0_0_15px_#22c55e]' : 'border-gray-700'}`} />
                       </div>
                       
                       <select 
                        className={`bg-gray-900 text-[10px] font-bold border-2 rounded px-1 appearance-none text-center h-6 w-8 z-10 cursor-pointer ${outputActive ? 'border-green-500 text-green-500' : 'border-gray-700 text-gray-400'}`}
                        value={rule.outputPort}
                        onChange={(e) => onUpdateRule(rule.id, { outputPort: parseInt(e.target.value) })}
                       >
                         {Array.from({length: 16}).map((_, i) => <option key={i} value={i}>{i}</option>)}
                       </select>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}

          {/* End of Program */}
          <div className="flex items-center justify-center py-10 opacity-20 select-none">
            <div className="h-[2px] w-20 bg-gray-600" />
            <span className="mx-4 text-xs font-black tracking-widest uppercase">End of Program</span>
            <div className="h-[2px] w-20 bg-gray-600" />
          </div>
        </div>
      </div>
    </div>
  );
};