// ─── 자동 계산기 설정 시트 ───────────────────
function CalculatorSettingsSheet({ recipes, onChange, onStart, onClose }) {
  // 숫자 필드를 문자열로 저장해 trailing dot("1.") 허용 및 0 접두사 방지
  const [drafts, setDrafts] = useState(
    () => recipes.map(r => ({ ...r, baseArea: String(r.baseArea ?? ''), amount: String(r.amount ?? '') }))
  );

  const toDraftNums = (drafts) => drafts.map(r => ({
    ...r,
    baseArea: parseFloat(r.baseArea) || 0,
    amount: parseFloat(r.amount) || 0,
  }));

  const addRecipe = () => setDrafts(prev => [...prev, {
    id: 'r_' + Date.now(),
    name: '',
    baseArea: '300',
    baseUnit: '㎡',
    amount: '0',
    amountUnit: 'L',
  }]);

  const removeRecipe = (id) => setDrafts(prev => prev.filter(r => r.id !== id));

  const updateRecipe = (id, field, value) =>
    setDrafts(prev => prev.map(r => r.id === id ? { ...r, [field]: value } : r));

  const handleSave = () => { onChange(toDraftNums(drafts)); onClose(); };
  const handleStart = () => { onChange(toDraftNums(drafts)); onStart(); };

  return (
    <BottomSheet onClose={onClose}>
      <div style={appStyles.sheetHeader}>
        <div style={appStyles.sheetMeta}>도구</div>
        <div style={{ ...appStyles.nameText, fontSize: 18 }}>자동 계산기</div>
        <div style={appStyles.subMeta}>기준 면적당 투입량을 설정하세요.</div>
      </div>

      <div style={appStyles.recipeHint}>
        예) 300㎡당 석회 300L · 상토 2포대 · 모종 60주
      </div>

      <div style={appStyles.recipeList}>
        {drafts.map(r => (
          <div key={r.id} style={appStyles.recipeRow}>
            <input
              value={r.name}
              onChange={e => updateRecipe(r.id, 'name', e.target.value)}
              placeholder="자재명"
              style={appStyles.recipeNameInput}
              maxLength={12}
            />
            <input
              type="text"
              inputMode="decimal"
              value={r.baseArea}
              onFocus={e => e.target.select()}
              onChange={e => updateRecipe(r.id, 'baseArea', e.target.value.replace(/[^0-9.]/g, ''))}
              style={appStyles.recipeNumInput}
            />
            <select
              value={r.baseUnit}
              onChange={e => updateRecipe(r.id, 'baseUnit', e.target.value)}
              style={appStyles.recipeUnitSelect}
            >
              {AREA_UNITS.map(u => (
                <option key={u.id} value={u.label}>{u.label}</option>
              ))}
            </select>
            <span style={{ fontSize: 11, color: '#8E8B82', flexShrink: 0 }}>당</span>
            <input
              type="text"
              inputMode="decimal"
              value={r.amount}
              onFocus={e => e.target.select()}
              onChange={e => updateRecipe(r.id, 'amount', e.target.value.replace(/[^0-9.]/g, ''))}
              style={appStyles.recipeNumInput}
            />
            <input
              value={r.amountUnit}
              onChange={e => updateRecipe(r.id, 'amountUnit', e.target.value)}
              placeholder="단위"
              list="amount-units"
              style={appStyles.recipeUnitInput}
              maxLength={6}
            />
            <datalist id="amount-units">
              {['kg', 'g', 'L', 'mL', '포대', '주', '개', 't'].map(u => (
                <option key={u} value={u} />
              ))}
            </datalist>
            <button style={appStyles.recipeDeleteBtn} onClick={() => removeRecipe(r.id)} aria-label="삭제">
              <i data-lucide="trash-2" style={{ width: 15, height: 15 }}></i>
            </button>
          </div>
        ))}
      </div>

      <button style={appStyles.recipeAddBtn} onClick={addRecipe}>
        + 항목 추가
      </button>

      <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
        <button style={{ ...appStyles.closeBtn, flex: 1 }} onClick={handleSave}>저장</button>
        <button style={{
          ...appStyles.closeBtn, flex: 2,
          background: '#E5A300', color: '#FFFFFF', border: '1px solid #E5A300',
        }} onClick={handleStart}>계산 시작</button>
      </div>
    </BottomSheet>
  );
}