import React, { useState, useEffect } from 'react';
import { Ruler, ArrowUpRight, ArrowDownRight, RefreshCw, Calculator, Info, Edit3, Target } from 'lucide-react';

const App = () => {
  // 基本設定の状態 (すべてmm単位)
  // 初期値を文字列で管理することで、入力時の挙動を制御しやすくする
  const [totalLength, setTotalLength] = useState('10000'); 
  const [totalHeightDiff, setTotalHeightDiff] = useState('100');
  const [slopeDirection, setSlopeDirection] = useState(1); // 1: 下がり, -1: 上がり
  
  // 基点設定
  const [baseLevel, setBaseLevel] = useState('75'); 
  const [baseSign, setBaseSign] = useState(1); // 1: プラス, -1: マイナス

  // 測りたい場所 (最小50, 最大10000, 5mm刻み)
  const [currentDist, setCurrentDist] = useState('5000'); 
  
  // 計算結果
  const [finalLevel, setFinalLevel] = useState(0);
  const [slopePercent, setSlopePercent] = useState(0);

  // 数値変換用ヘルパー
  const num = (val) => Number(val) || 0;

  // 計算ロジック
  useEffect(() => {
    const L = num(totalLength);
    const H = num(totalHeightDiff);
    const D = num(currentDist);
    const B = num(baseLevel);

    if (L > 0) {
      const slopeRatio = H / L;
      const deltaH = slopeRatio * D * (slopeDirection === 1 ? -1 : 1);
      const startLevel = B * baseSign;
      const result = startLevel + deltaH;
      setFinalLevel(result.toFixed(1));

      const percent = (H / L) * 100;
      setSlopePercent(percent.toFixed(2));
    }
  }, [totalLength, totalHeightDiff, slopeDirection, baseLevel, baseSign, currentDist]);

  // 入力フォーカス時の処理（全選択）
  const handleFocus = (e) => {
    e.target.select();
  };

  // リセット
  const resetFields = () => {
    setTotalLength('10000');
    setTotalHeightDiff('100');
    setSlopeDirection(1);
    setBaseLevel('75');
    setBaseSign(1);
    setCurrentDist('5000');
  };

  return (
    <div className="min-h-screen bg-slate-950 p-4 md:p-8 font-sans text-slate-100 select-none">
      <div className="max-w-md mx-auto bg-slate-900 rounded-3xl shadow-2xl overflow-hidden border border-slate-800 ring-1 ring-white/5">
        
        {/* ヘッダー */}
        <div className="bg-gradient-to-br from-blue-900/40 to-slate-900 p-6 text-white text-center relative border-b border-slate-800">
          <div className="flex items-center justify-center gap-2 mb-1">
            <div className="bg-blue-500 p-1.5 rounded-lg">
              <Target className="w-5 h-5 text-white" />
            </div>
            <h1 className="text-xl font-bold tracking-tight">勾配レベル計算 V4</h1>
          </div>
          <p className="text-blue-400/60 text-[10px] font-bold uppercase tracking-[0.2em]">Kawabata-Gumi Edition</p>
          <button onClick={resetFields} className="absolute right-4 top-6 p-2 text-slate-500 hover:text-white transition-colors">
            <RefreshCw className="w-5 h-5" />
          </button>
        </div>

        <div className="p-6 space-y-6">
          
          {/* 1. 全体条件 (mm) */}
          <section className="space-y-4 bg-slate-800/30 p-4 rounded-2xl border border-white/5 shadow-inner">
            <div className="flex justify-between items-center px-1">
              <h2 className="text-[10px] font-black text-slate-500 uppercase tracking-widest">全体の条件 (mm)</h2>
              <div className="flex gap-2">
                 <span className="bg-blue-500/10 text-blue-400 px-2 py-0.5 rounded text-[10px] font-bold border border-blue-500/20">勾配: {slopePercent}%</span>
              </div>
            </div>
            
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <label className="text-[10px] font-bold text-slate-400 ml-1">全体の長さ</label>
                <div className="relative group">
                  <input
                    type="number"
                    inputMode="numeric"
                    value={totalLength}
                    onFocus={handleFocus}
                    onDoubleClick={handleFocus}
                    onChange={(e) => setTotalLength(e.target.value)}
                    className="w-full bg-slate-950 border border-slate-700 rounded-xl py-2.5 px-3 focus:ring-2 focus:ring-blue-500 text-lg font-bold text-white transition-all outline-none"
                  />
                  <span className="absolute right-3 top-3 text-slate-600 text-xs font-bold">mm</span>
                </div>
              </div>
              <div className="space-y-1.5">
                <label className="text-[10px] font-bold text-slate-400 ml-1">全体の高低差</label>
                <div className="relative group">
                  <input
                    type="number"
                    inputMode="numeric"
                    value={totalHeightDiff}
                    onFocus={handleFocus}
                    onDoubleClick={handleFocus}
                    onChange={(e) => setTotalHeightDiff(e.target.value)}
                    className="w-full bg-slate-950 border border-slate-700 rounded-xl py-2.5 px-3 focus:ring-2 focus:ring-blue-500 text-lg font-bold text-white transition-all outline-none"
                  />
                  <span className="absolute right-3 top-3 text-slate-600 text-xs font-bold">mm</span>
                </div>
              </div>
            </div>
            
            <button 
              onClick={() => setSlopeDirection(prev => prev * -1)}
              className={`w-full py-3 px-4 rounded-xl flex items-center justify-center gap-3 font-black transition-all border-2 ${
                slopeDirection === 1 
                ? 'bg-orange-500/5 text-orange-400 border-orange-500/20 active:scale-95' 
                : 'bg-green-500/5 text-green-400 border-green-500/20 active:scale-95'
              }`}
            >
              {slopeDirection === 1 ? <ArrowDownRight className="w-6 h-6" /> : <ArrowUpRight className="w-6 h-6" />}
              <span className="text-sm tracking-widest">{slopeDirection === 1 ? '勾配：下がり' : '勾配：上がり'}</span>
            </button>
          </section>

          {/* 2. 基点の設定 */}
          <section className="space-y-3 bg-slate-800/30 p-4 rounded-2xl border border-white/5 shadow-inner">
            <h2 className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">基点(0mm地点)の設計レベル</h2>
            <div className="flex gap-3">
              <button 
                onClick={() => setBaseSign(prev => prev * -1)}
                className={`w-24 h-16 rounded-xl flex flex-col items-center justify-center font-black transition-all border-2 ${
                  baseSign === 1 
                  ? 'bg-blue-600 border-blue-400 text-white shadow-lg shadow-blue-900/40 active:scale-95' 
                  : 'bg-red-600 border-red-400 text-white shadow-lg shadow-red-900/40 active:scale-95'
                }`}
              >
                <span className="text-[10px] opacity-70 leading-none mb-1">{baseSign === 1 ? 'PLUS' : 'MINUS'}</span>
                <span className="text-4xl leading-none">{baseSign === 1 ? '+' : '-'}</span>
              </button>
              <div className="flex-1 relative">
                <input
                  type="number"
                  inputMode="numeric"
                  value={baseLevel}
                  onFocus={handleFocus}
                  onDoubleClick={handleFocus}
                  onChange={(e) => setBaseLevel(e.target.value)}
                  className="w-full h-full bg-slate-950 border border-slate-700 rounded-xl py-2 px-4 focus:ring-2 focus:ring-blue-500 text-4xl font-black text-white text-right outline-none transition-all"
                />
                <span className="absolute left-4 top-2 text-slate-600 text-[10px] font-black uppercase">Start Lv</span>
                <span className="absolute right-4 bottom-2 text-slate-600 text-xs font-bold uppercase tracking-widest">mm</span>
              </div>
            </div>
          </section>

          {/* 3. 測りたい場所 */}
          <section className="space-y-4 pt-2">
            <div className="flex justify-between items-center px-1">
              <h2 className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
                <Ruler className="w-4 h-4 text-blue-500" /> 測りたい場所 (5mm単位)
              </h2>
              <div className="text-blue-500 font-black text-xs italic tracking-widest">
                STEP: 5mm
              </div>
            </div>

            <div className="space-y-6">
              <div className="px-2">
                <input
                  type="range"
                  min="50"
                  max="10000"
                  step="5"
                  value={num(currentDist)}
                  onChange={(e) => setCurrentDist(e.target.value)}
                  className="w-full h-4 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-blue-500 border border-slate-700"
                />
              </div>
              
              <div className="relative group px-1">
                <div className="absolute left-8 top-1/2 -translate-y-1/2 text-slate-700 group-focus-within:text-blue-500 transition-colors pointer-events-none">
                  <Edit3 className="w-6 h-6" />
                </div>
                <input
                  type="number"
                  inputMode="numeric"
                  value={currentDist}
                  onFocus={handleFocus}
                  onDoubleClick={handleFocus}
                  onChange={(e) => setCurrentDist(e.target.value)}
                  className="w-full bg-slate-950 border-2 border-slate-800 rounded-3xl py-6 px-8 text-center text-5xl font-black text-white focus:ring-8 focus:ring-blue-500/10 focus:border-blue-500 outline-none shadow-2xl transition-all"
                  placeholder="タップして入力"
                />
                <span className="absolute right-10 top-1/2 -translate-y-1/2 text-slate-600 text-xl font-black italic tracking-widest">mm</span>
              </div>
            </div>
          </section>

          {/* 結果表示エリア */}
          <div className="bg-yellow-400 rounded-[2.5rem] p-8 shadow-2xl text-slate-950 relative overflow-hidden ring-4 ring-yellow-400/20 border-t-4 border-white/20">
             <div className="absolute -top-6 -right-6 p-4 opacity-10">
                <Calculator className="w-32 h-32 text-black" />
             </div>
             <p className="text-[10px] font-black uppercase opacity-60 text-center tracking-[0.3em] mb-3">現在の設計レベル</p>
             <div className="flex items-center justify-center gap-2">
               <span className="text-4xl font-black mb-8">
                 {num(finalLevel) > 0 ? '+' : ''}
               </span>
               <span className="text-8xl font-black tabular-nums tracking-tighter drop-shadow-sm">{finalLevel}</span>
               <span className="text-2xl font-black mt-8 ml-1 italic">mm</span>
             </div>
             <div className="mt-4 flex justify-between items-center text-[10px] font-black border-t-2 border-slate-950/10 pt-4">
                <div className="flex items-center gap-1">
                  <div className={`w-2 h-2 rounded-full ${slopeDirection === 1 ? 'bg-orange-600' : 'bg-green-600'}`}></div>
                  <span className="opacity-60">勾配率:</span> {slopePercent}%
                </div>
                <div className="opacity-60 italic">比率: 1/{Math.round(num(totalLength) / (num(totalHeightDiff) || 1))}</div>
             </div>
          </div>

          {/* 視覚プレビュー */}
          <div className="bg-slate-950 p-6 rounded-3xl border border-slate-800/50 shadow-inner">
            <svg viewBox="0 0 100 40" className="w-full h-auto overflow-visible">
              {/* グリッド線 */}
              <line x1="5" y1="35" x2="95" y2="35" stroke="#1e293b" strokeWidth="1" strokeDasharray="3,3" />
              
              {/* 勾配メインライン */}
              <path 
                d={`M 5 ${35 - (baseSign * 3)} L 95 ${35 - (baseSign * 3) - (slopeDirection === 1 ? -12 : 12)}`} 
                fill="none" 
                stroke={slopeDirection === 1 ? "#f97316" : "#22c55e"} 
                strokeWidth="3" 
                strokeLinecap="round"
                className="drop-shadow-[0_0_5px_rgba(249,115,22,0.3)]"
              />
              
              {/* 現在位置ピン */}
              {num(totalLength) > 0 && (
                <g transform={`translate(${5 + (num(currentDist) / num(totalLength)) * 90}, ${ (35 - (baseSign * 3)) + ((num(currentDist) / num(totalLength)) * (slopeDirection === 1 ? 12 : -12)) })`}>
                  <circle r="4" fill="#3b82f6" stroke="white" strokeWidth="1.5" />
                  <line y1="0" y2={35 - ((35 - (baseSign * 3)) + ((num(currentDist) / num(totalLength)) * (slopeDirection === 1 ? 12 : -12)))} stroke="#3b82f6" strokeWidth="1" strokeDasharray="1,1" />
                </g>
              )}
              
              <text x="5" y="32" fontSize="3" className="fill-slate-600 font-black uppercase tracking-tighter italic">START</text>
              <text x="85" y="32" fontSize="3" className="fill-slate-600 font-black uppercase tracking-tighter italic text-right">END</text>
            </svg>
          </div>

        </div>
      </div>
      <div className="h-16"></div>
    </div>
  );
};

export default App;