import React from 'react';
import { AppConfig } from '../types';
import { Ruler, Box, Layers, Minimize2 } from 'lucide-react';

interface Props {
  config: AppConfig;
  onChange: (newConfig: AppConfig) => void;
}

const InputGroup: React.FC<{ label: string; children: React.ReactNode }> = ({ label, children }) => (
  <div className="flex flex-col gap-2 mb-4">
    <label className="text-sm font-medium text-gray-300">{label}</label>
    <div className="flex gap-4">{children}</div>
  </div>
);

const NumberInput = ({ 
  label, 
  value, 
  onChange, 
  max 
}: { 
  label: string; 
  value: number; 
  onChange: (val: number) => void; 
  max?: number 
}) => (
  <div className="flex-1 relative">
    <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-xs">{label}</span>
    <input
      type="number"
      min="1"
      max={max}
      value={value}
      onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
      className="w-full bg-slate-800 border border-slate-700 rounded p-2 pl-8 text-white focus:ring-2 focus:ring-primary outline-none"
    />
    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-xs">мм</span>
  </div>
);

export const ConfigStep: React.FC<Props> = ({ config, onChange }) => {
  const updateDrawer = (key: keyof AppConfig['drawer'], val: number) => {
    onChange({ ...config, drawer: { ...config.drawer, [key]: val } });
  };

  return (
    <div className="bg-slate-900 p-6 rounded-xl shadow-lg border border-slate-800 animate-fade-in">
      <h2 className="text-xl font-bold mb-6 flex items-center gap-2 text-primary">
        <Box size={24} /> 1. Размеры
      </h2>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {/* Drawer Dimensions */}
        <div className="bg-slate-800/50 p-4 rounded-lg border border-slate-700">
          <h3 className="text-lg font-semibold mb-4 flex items-center gap-2 text-gray-200">
             <Ruler className="text-accent" size={18} /> Внутренние размеры ящика
          </h3>
          <InputGroup label="Ширина (X)">
            <NumberInput label="Ш" value={config.drawer.width} onChange={(v) => updateDrawer('width', v)} />
          </InputGroup>
          <InputGroup label="Глубина (Y)">
            <NumberInput label="Г" value={config.drawer.depth} onChange={(v) => updateDrawer('depth', v)} />
          </InputGroup>
          <InputGroup label="Высота (Z)">
            <NumberInput label="В" value={config.drawer.height} onChange={(v) => updateDrawer('height', v)} />
          </InputGroup>
        </div>

        {/* Settings */}
        <div className="bg-slate-800/50 p-4 rounded-lg border border-slate-700 flex flex-col justify-center">
           <h3 className="text-lg font-semibold mb-4 flex items-center gap-2 text-gray-200">
             <Layers className="text-accent" size={18} /> Параметры печати
           </h3>
           
           <div className="mb-6">
             <div className="flex justify-between items-center mb-2">
                <label className="text-sm font-medium text-gray-300">Толщина стенок</label>
                <span className="text-primary font-bold bg-primary/10 px-2 py-1 rounded text-sm border border-primary/20">
                  {config.wallThickness.toFixed(1)} мм
                </span>
             </div>
             
             <div className="flex items-center gap-4">
               <span className="text-xs text-gray-500 font-mono">0.4</span>
               <input 
                  type="range" 
                  min="0.4" 
                  max="3.2" 
                  step="0.1"
                  value={config.wallThickness} 
                  onChange={(e) => onChange({...config, wallThickness: parseFloat(e.target.value)})}
                  className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-primary hover:accent-blue-400 transition-all"
               />
               <span className="text-xs text-gray-500 font-mono">3.2</span>
             </div>
           </div>

           <div className="mb-4">
             <div className="flex justify-between items-center mb-2">
                <label className="text-sm font-medium text-gray-300 flex items-center gap-1">
                   <Minimize2 size={14} className="text-gray-400"/> Зазор (Tolerance)
                </label>
                <span className="text-accent font-bold bg-accent/10 px-2 py-1 rounded text-sm border border-accent/20">
                  {config.printerTolerance.toFixed(1)} мм
                </span>
             </div>
             
             <div className="flex items-center gap-4">
               <span className="text-xs text-gray-500 font-mono">0.0</span>
               <input 
                  type="range" 
                  min="0.0" 
                  max="2.0" 
                  step="0.1"
                  value={config.printerTolerance} 
                  onChange={(e) => onChange({...config, printerTolerance: parseFloat(e.target.value)})}
                  className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-accent hover:accent-amber-400 transition-all"
               />
               <span className="text-xs text-gray-500 font-mono">2.0</span>
             </div>
           </div>

           <div className="bg-slate-900/50 p-3 rounded border border-slate-700/50">
             <p className="text-xs text-gray-400 leading-relaxed">
               <span className="text-accent font-semibold">Зазор</span> уменьшает размер каждой ячейки, чтобы они легко вставлялись в ящик и друг в друга. Рекомендуется 0.5 мм.
             </p>
           </div>
        </div>
      </div>
    </div>
  );
};