import React, { useState, useEffect } from 'react';
import { Package, Plus, Minus, Edit, Search, Menu, X, Save, ArrowLeft } from 'lucide-react';

const InventoryApp = () => {
  const [currentScreen, setCurrentScreen] = useState('main');
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('');
  const [editingProduct, setEditingProduct] = useState(null);
  const [showCategoryModal, setShowCategoryModal] = useState(false);
  const [newCategoryName, setNewCategoryName] = useState('');

  // 初期商品データ（CSVから）
  const initialProducts = [
    { id: 1, name: 'RUF-E2406SAW', category: '給湯器', stock: 0, minStock: 5, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 2, name: 'RUF-E240ESAW', category: '給湯器', stock: 0, minStock: 5, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 3, name: 'GT-C2462SAWX-2', category: '給湯器', stock: 0, minStock: 5, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 4, name: 'DKDU-A20W', category: '給湯器', stock: 0, minStock: 5, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 5, name: 'RVD-E2405SAW2-1', category: '給湯器', stock: 0, minStock: 5, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 6, name: 'RT-64JH6S2-GL', category: 'コンロ', stock: 0, minStock: 3, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 7, name: 'RT-64JH6S2-GR', category: 'コンロ', stock: 0, minStock: 3, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 8, name: 'PD-N36', category: 'コンロ', stock: 0, minStock: 3, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 9, name: 'STG-25MT1M', category: 'メーター', stock: 0, minStock: 10, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 10, name: 'SA-25MTI-6', category: 'メーター', stock: 0, minStock: 10, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 11, name: 'EY-25MTP-YL', category: 'メーター', stock: 0, minStock: 10, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 12, name: 'AXS-8C-2TH', category: '空調機器', stock: 0, minStock: 2, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 13, name: 'AS-8ZA-L650', category: '空調機器', stock: 0, minStock: 2, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 14, name: 'MUBIY-15(W)', category: '空調機器', stock: 0, minStock: 2, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 15, name: 'YF-433F-S', category: '換気扇', stock: 0, minStock: 5, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 16, name: 'CF-626ポL', category: '換気扇', stock: 0, minStock: 5, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 17, name: 'APH-40N', category: '換気扇', stock: 0, minStock: 5, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 18, name: 'ガスコード 1m', category: 'ガスコード', stock: 0, minStock: 20, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 19, name: 'ガスコード 2m', category: 'ガスコード', stock: 0, minStock: 15, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 20, name: 'ガスコード 3m', category: 'ガスコード', stock: 0, minStock: 10, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 21, name: 'ガスコード 5m', category: 'ガスコード', stock: 0, minStock: 5, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 22, name: 'VL-SE30X-L', category: 'ドアホン', stock: 0, minStock: 3, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 23, name: '22タイプ', category: 'エアコン', stock: 0, minStock: 2, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 24, name: '25タイプ', category: 'エアコン', stock: 0, minStock: 2, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 25, name: '28タイプ', category: 'エアコン', stock: 0, minStock: 2, note: '', lastInDate: '', lastOutDate: '', lastUser: '' },
    { id: 26, name: '40タイプ', category: 'エアコン', stock: 0, minStock: 1, note: '', lastInDate: '', lastOutDate: '', lastUser: '' }
  ];

  const [products, setProducts] = useState(initialProducts);
  const [formData, setFormData] = useState({
    productId: '',
    quantity: '',
    user: '',
    note: ''
  });

  const [categories, setCategories] = useState(['給湯器', 'コンロ', 'メーター', '空調機器', '換気扇', 'ガスコード', 'ドアホン', 'エアコン']);

  const formatDate = (date) => {
    return new Date(date).toLocaleDateString('ja-JP', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    });
  };

  const getCurrentDate = () => {
    return new Date().toISOString().split('T')[0];
  };

  const filteredProducts = products.filter(product => {
    const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         product.category.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesCategory = !selectedCategory || product.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  const handleStockIn = () => {
    if (!formData.productId || !formData.quantity || !formData.user) {
      alert('商品、数量、担当者を入力してください');
      return;
    }

    const quantity = parseInt(formData.quantity);
    if (quantity <= 0) {
      alert('数量は1以上を入力してください');
      return;
    }

    setProducts(prev => prev.map(product => 
      product.id === parseInt(formData.productId) 
        ? {
            ...product, 
            stock: product.stock + quantity,
            lastInDate: getCurrentDate(),
            lastUser: formData.user,
            note: formData.note || product.note
          }
        : product
    ));

    setFormData({ productId: '', quantity: '', user: '', note: '' });
    alert('入庫が完了しました');
    setCurrentScreen('main');
  };

  const handleStockOut = () => {
    if (!formData.productId || !formData.quantity || !formData.user) {
      alert('商品、数量、担当者を入力してください');
      return;
    }

    const quantity = parseInt(formData.quantity);
    const product = products.find(p => p.id === parseInt(formData.productId));
    
    if (quantity <= 0) {
      alert('数量は1以上を入力してください');
      return;
    }

    if (product.stock < quantity) {
      alert('在庫が不足しています');
      return;
    }

    setProducts(prev => prev.map(p => 
      p.id === parseInt(formData.productId) 
        ? {
            ...p, 
            stock: p.stock - quantity,
            lastOutDate: getCurrentDate(),
            lastUser: formData.user,
            note: formData.note || p.note
          }
        : p
    ));

    setFormData({ productId: '', quantity: '', user: '', note: '' });
    alert('出庫が完了しました');
    setCurrentScreen('main');
  };

  const handleProductEdit = (product) => {
    setEditingProduct({...product});
  };

  const handleProductSave = () => {
    if (!editingProduct.name || !editingProduct.category) {
      alert('商品名とカテゴリーを入力してください');
      return;
    }

    if (editingProduct.id > Math.max(...products.map(p => p.id))) {
      // 新商品の追加
      setProducts(prev => [...prev, editingProduct]);
    } else {
      // 既存商品の更新
      setProducts(prev => prev.map(p => 
        p.id === editingProduct.id ? editingProduct : p
      ));
    }
    setEditingProduct(null);
    alert('商品情報を更新しました');
  };

  const handleAddCategory = () => {
    if (!newCategoryName.trim()) {
      alert('カテゴリー名を入力してください');
      return;
    }
    if (categories.includes(newCategoryName.trim())) {
      alert('既に存在するカテゴリー名です');
      return;
    }
    setCategories(prev => [...prev, newCategoryName.trim()]);
    setNewCategoryName('');
    alert('カテゴリーを追加しました');
  };

  const handleDeleteCategory = (categoryName) => {
    console.log(`削除対象カテゴリー: ${categoryName}`);
    console.log('現在の商品一覧:', products);
    
    const productsInCategory = products.filter(p => p.category === categoryName);
    console.log(`カテゴリー「${categoryName}」の商品:`, productsInCategory);
    console.log(`商品数: ${productsInCategory.length}`);
    
    if (productsInCategory.length > 0) {
      alert(`このカテゴリーには${productsInCategory.length}個の商品が登録されています。先に商品を削除するか、他のカテゴリーに移動してください。`);
      return;
    }
    
    const confirmDelete = confirm(`カテゴリー「${categoryName}」を削除しますか？`);
    console.log(`削除確認結果: ${confirmDelete}`);
    
    if (confirmDelete) {
      console.log(`カテゴリー「${categoryName}」を削除中...`);
      console.log('削除前のカテゴリー:', categories);
      
      setCategories(prev => {
        const newCategories = prev.filter(cat => cat !== categoryName);
        console.log('削除後のカテゴリー:', newCategories);
        return newCategories;
      });
      
      // 選択中のカテゴリーが削除された場合、フィルターをリセット
      if (selectedCategory === categoryName) {
        setSelectedCategory('');
        console.log('選択中のカテゴリーフィルターをリセット');
      }
      
      console.log('削除処理完了');
      alert('カテゴリーを削除しました');
    }
  };

  const handleAddProduct = () => {
    const newProduct = {
      id: Math.max(...products.map(p => p.id)) + 1,
      name: '',
      category: categories[0],
      stock: 0,
      minStock: 5,
      note: '',
      lastInDate: '',
      lastOutDate: '',
      lastUser: ''
    };
    setEditingProduct(newProduct);
  };

  const handleDeleteProduct = (productId) => {
    if (confirm('この商品を削除しますか？')) {
      setProducts(prev => prev.filter(p => p.id !== productId));
    }
  };

  const renderMainScreen = () => (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-blue-600 text-white p-4 sticky top-0 z-10">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <Package className="w-6 h-6" />
            <h1 className="text-lg font-bold">在庫管理システム</h1>
          </div>
        </div>
      </div>

      {/* Search and Filter */}
      <div className="p-4 bg-white border-b">
        <div className="space-y-3">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
            <input
              type="text"
              placeholder="商品名またはカテゴリーで検索"
              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          <select
            className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            value={selectedCategory}
            onChange={(e) => setSelectedCategory(e.target.value)}
          >
            <option value="">全てのカテゴリー</option>
            {categories.map(cat => (
              <option key={cat} value={cat}>{cat}</option>
            ))}
          </select>
        </div>
      </div>

      {/* Action Buttons */}
      <div className="p-4 grid grid-cols-3 gap-3">
        <button
          onClick={() => setCurrentScreen('stockIn')}
          className="bg-green-500 text-white p-3 rounded-lg flex flex-col items-center space-y-1 hover:bg-green-600 transition-colors"
        >
          <Plus className="w-6 h-6" />
          <span className="text-sm font-medium">入庫</span>
        </button>
        <button
          onClick={() => setCurrentScreen('stockOut')}
          className="bg-red-500 text-white p-3 rounded-lg flex flex-col items-center space-y-1 hover:bg-red-600 transition-colors"
        >
          <Minus className="w-6 h-6" />
          <span className="text-sm font-medium">出庫</span>
        </button>
        <button
          onClick={() => setCurrentScreen('manage')}
          className="bg-blue-500 text-white p-3 rounded-lg flex flex-col items-center space-y-1 hover:bg-blue-600 transition-colors"
        >
          <Edit className="w-6 h-6" />
          <span className="text-sm font-medium">商品管理</span>
        </button>
      </div>

      {/* Product List */}
      <div className="p-4">
        <div className="space-y-3">
          {filteredProducts.map(product => (
            <div key={product.id} className="bg-white rounded-lg p-4 shadow-sm border">
              <div className="flex justify-between items-start">
                <div className="flex-1">
                  <h3 className="font-medium text-gray-900">{product.name}</h3>
                  <p className="text-sm text-gray-500">{product.category}</p>
                  <div className="mt-2 flex items-center space-x-4">
                    <span className={`font-medium ${
                      product.stock === 0 ? 'text-red-600' : 
                      product.stock <= product.minStock ? 'text-orange-600' : 
                      'text-green-600'
                    }`}>
                      在庫: {product.stock}個
                    </span>
                    <span className="text-sm text-gray-500">
                      適正: {product.minStock}個
                    </span>
                  </div>
                  {product.note && (
                    <p className="text-sm text-gray-600 mt-1">備考: {product.note}</p>
                  )}
                  <div className="text-xs text-gray-400 mt-2 space-y-1">
                    {product.lastInDate && <div>最新入庫: {formatDate(product.lastInDate)}</div>}
                    {product.lastOutDate && <div>最新出庫: {formatDate(product.lastOutDate)}</div>}
                    {product.lastUser && <div>担当者: {product.lastUser}</div>}
                  </div>
                </div>
                <div className={`px-2 py-1 rounded text-xs font-medium ${
                  product.stock === 0 ? 'bg-red-100 text-red-800' :
                  product.stock <= product.minStock ? 'bg-yellow-100 text-yellow-800' :
                  'bg-green-100 text-green-800'
                }`}>
                  {product.stock === 0 ? '欠品' : product.stock <= product.minStock ? '少' : '在庫有'}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  const renderStockInScreen = () => (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-green-600 text-white p-4 flex items-center space-x-3">
        <button onClick={() => setCurrentScreen('main')}>
          <ArrowLeft className="w-6 h-6" />
        </button>
        <h1 className="text-lg font-bold">入庫処理</h1>
      </div>

      <div className="p-4 space-y-4">
        <div className="bg-white rounded-lg p-4 shadow-sm">
          <label className="block text-sm font-medium text-gray-700 mb-2">商品選択</label>
          <select
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
            value={formData.productId}
            onChange={(e) => setFormData({...formData, productId: e.target.value})}
          >
            <option value="">商品を選択してください</option>
            {products.map(product => (
              <option key={product.id} value={product.id}>
                {product.name} ({product.category}) - 現在庫: {product.stock}個
              </option>
            ))}
          </select>
        </div>

        <div className="bg-white rounded-lg p-4 shadow-sm">
          <label className="block text-sm font-medium text-gray-700 mb-2">入庫数量</label>
          <input
            type="number"
            min="1"
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
            placeholder="入庫する数量を入力"
            value={formData.quantity}
            onChange={(e) => setFormData({...formData, quantity: e.target.value})}
          />
        </div>

        <div className="bg-white rounded-lg p-4 shadow-sm">
          <label className="block text-sm font-medium text-gray-700 mb-2">担当者名</label>
          <input
            type="text"
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
            placeholder="担当者名を入力"
            value={formData.user}
            onChange={(e) => setFormData({...formData, user: e.target.value})}
          />
        </div>

        <div className="bg-white rounded-lg p-4 shadow-sm">
          <label className="block text-sm font-medium text-gray-700 mb-2">備考（任意）</label>
          <textarea
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
            placeholder="備考があれば入力"
            rows="3"
            value={formData.note}
            onChange={(e) => setFormData({...formData, note: e.target.value})}
          />
        </div>

        <button
          onClick={handleStockIn}
          className="w-full bg-green-500 text-white p-4 rounded-lg font-medium hover:bg-green-600 transition-colors"
        >
          入庫処理を実行
        </button>
      </div>
    </div>
  );

  const renderStockOutScreen = () => (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-red-600 text-white p-4 flex items-center space-x-3">
        <button onClick={() => setCurrentScreen('main')}>
          <ArrowLeft className="w-6 h-6" />
        </button>
        <h1 className="text-lg font-bold">出庫処理</h1>
      </div>

      <div className="p-4 space-y-4">
        <div className="bg-white rounded-lg p-4 shadow-sm">
          <label className="block text-sm font-medium text-gray-700 mb-2">商品選択</label>
          <select
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500"
            value={formData.productId}
            onChange={(e) => setFormData({...formData, productId: e.target.value})}
          >
            <option value="">商品を選択してください</option>
            {products.map(product => (
              <option key={product.id} value={product.id}>
                {product.name} ({product.category}) - 現在庫: {product.stock}個
              </option>
            ))}
          </select>
        </div>

        <div className="bg-white rounded-lg p-4 shadow-sm">
          <label className="block text-sm font-medium text-gray-700 mb-2">出庫数量</label>
          <input
            type="number"
            min="1"
            max={formData.productId ? products.find(p => p.id === parseInt(formData.productId))?.stock : undefined}
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500"
            placeholder="出庫する数量を入力"
            value={formData.quantity}
            onChange={(e) => setFormData({...formData, quantity: e.target.value})}
          />
        </div>

        <div className="bg-white rounded-lg p-4 shadow-sm">
          <label className="block text-sm font-medium text-gray-700 mb-2">担当者名</label>
          <input
            type="text"
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500"
            placeholder="担当者名を入力"
            value={formData.user}
            onChange={(e) => setFormData({...formData, user: e.target.value})}
          />
        </div>

        <div className="bg-white rounded-lg p-4 shadow-sm">
          <label className="block text-sm font-medium text-gray-700 mb-2">備考（任意）</label>
          <textarea
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500"
            placeholder="備考があれば入力"
            rows="3"
            value={formData.note}
            onChange={(e) => setFormData({...formData, note: e.target.value})}
          />
        </div>

        <button
          onClick={handleStockOut}
          className="w-full bg-red-500 text-white p-4 rounded-lg font-medium hover:bg-red-600 transition-colors"
        >
          出庫処理を実行
        </button>
      </div>
    </div>
  );

  const renderManageScreen = () => (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-blue-600 text-white p-4 flex items-center justify-between">
        <div className="flex items-center space-x-3">
          <button onClick={() => setCurrentScreen('main')}>
            <ArrowLeft className="w-6 h-6" />
          </button>
          <h1 className="text-lg font-bold">商品管理</h1>
        </div>
        <div className="flex space-x-2">
          <button
            onClick={() => setShowCategoryModal(true)}
            className="bg-blue-500 p-2 rounded-lg hover:bg-blue-700 transition-colors"
            title="カテゴリー管理"
          >
            <Menu className="w-5 h-5" />
          </button>
          <button
            onClick={handleAddProduct}
            className="bg-blue-500 p-2 rounded-lg hover:bg-blue-700 transition-colors"
            title="商品追加"
          >
            <Plus className="w-5 h-5" />
          </button>
        </div>
      </div>

      <div className="p-4 space-y-3">
        {products.map(product => (
          <div key={product.id} className="bg-white rounded-lg p-4 shadow-sm border">
            <div className="flex justify-between items-start">
              <div className="flex-1">
                <h3 className="font-medium text-gray-900">{product.name}</h3>
                <p className="text-sm text-gray-500">{product.category}</p>
                <div className="text-sm text-gray-600 mt-1">
                  <div>在庫: {product.stock}個 / 適正: {product.minStock}個</div>
                </div>
              </div>
              <div className="flex space-x-2">
                <button
                  onClick={() => handleProductEdit(product)}
                  className="text-blue-600 p-1 hover:bg-blue-50 rounded"
                >
                  <Edit className="w-4 h-4" />
                </button>
                <button
                  onClick={() => handleDeleteProduct(product.id)}
                  className="text-red-600 p-1 hover:bg-red-50 rounded"
                >
                  <X className="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* カテゴリー管理モーダル */}
      {showCategoryModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md max-h-96 overflow-y-auto">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-lg font-bold">カテゴリー管理</h2>
              <button
                onClick={() => setShowCategoryModal(false)}
                className="text-gray-500 hover:text-gray-700"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* 新しいカテゴリー追加 */}
            <div className="mb-4 p-3 bg-gray-50 rounded-lg">
              <label className="block text-sm font-medium text-gray-700 mb-2">新しいカテゴリー追加</label>
              <div className="flex space-x-2">
                <input
                  type="text"
                  className="flex-1 p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  placeholder="カテゴリー名を入力"
                  value={newCategoryName}
                  onChange={(e) => setNewCategoryName(e.target.value)}
                />
                <button
                  onClick={handleAddCategory}
                  className="bg-green-500 text-white px-3 py-2 rounded-lg hover:bg-green-600 transition-colors"
                >
                  追加
                </button>
              </div>
            </div>

            {/* 既存カテゴリー一覧 */}
            <div className="space-y-2">
              <h3 className="text-sm font-medium text-gray-700">既存カテゴリー</h3>
              {categories.map(category => {
                const productCount = products.filter(p => p.category === category).length;
                return (
                  <div key={category} className="flex justify-between items-center p-2 bg-gray-50 rounded">
                    <div>
                      <span className="font-medium">{category}</span>
                      <span className="text-sm text-gray-500 ml-2">({productCount}個の商品)</span>
                    </div>
                    <button
                      onClick={() => handleDeleteCategory(category)}
                      className={`p-1 rounded transition-colors ${
                        productCount > 0 
                          ? 'text-gray-400 cursor-not-allowed' 
                          : 'text-red-600 hover:bg-red-50 cursor-pointer'
                      }`}
                      disabled={productCount > 0}
                      title={productCount > 0 ? "商品が登録されているため削除できません" : "カテゴリーを削除"}
                    >
                      <X className="w-4 h-4" />
                    </button>
                  </div>
                );
              })}
            </div>

            <button
              onClick={() => setShowCategoryModal(false)}
              className="w-full mt-4 bg-gray-500 text-white p-2 rounded-lg hover:bg-gray-600 transition-colors"
            >
              閉じる
            </button>
          </div>
        </div>
      )}

      {editingProduct && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-lg font-bold">
                {editingProduct.id > Math.max(...products.map(p => p.id)) ? '商品追加' : '商品編集'}
              </h2>
              <button
                onClick={() => setEditingProduct(null)}
                className="text-gray-500 hover:text-gray-700"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">商品名</label>
                <input
                  type="text"
                  className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  value={editingProduct.name}
                  onChange={(e) => setEditingProduct({...editingProduct, name: e.target.value})}
                  placeholder="商品名を入力"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">カテゴリー</label>
                <select
                  className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  value={editingProduct.category}
                  onChange={(e) => setEditingProduct({...editingProduct, category: e.target.value})}
                >
                  {categories.map(cat => (
                    <option key={cat} value={cat}>{cat}</option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">現在庫数</label>
                <input
                  type="number"
                  min="0"
                  className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  value={editingProduct.stock}
                  onChange={(e) => setEditingProduct({...editingProduct, stock: parseInt(e.target.value) || 0})}
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">適正在庫数</label>
                <input
                  type="number"
                  min="0"
                  className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  value={editingProduct.minStock || 0}
                  onChange={(e) => setEditingProduct({...editingProduct, minStock: parseInt(e.target.value) || 0})}
                  placeholder="適正在庫数を入力"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">備考</label>
                <textarea
                  className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  rows="3"
                  value={editingProduct.note}
                  onChange={(e) => setEditingProduct({...editingProduct, note: e.target.value})}
                  placeholder="備考を入力"
                />
              </div>

              <div className="flex space-x-3">
                <button
                  onClick={() => setEditingProduct(null)}
                  className="flex-1 bg-gray-500 text-white p-2 rounded-lg hover:bg-gray-600 transition-colors"
                >
                  キャンセル
                </button>
                <button
                  onClick={handleProductSave}
                  className="flex-1 bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition-colors flex items-center justify-center space-x-1"
                >
                  <Save className="w-4 h-4" />
                  <span>保存</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );

  return (
    <div className="max-w-md mx-auto bg-white min-h-screen">
      {currentScreen === 'main' && renderMainScreen()}
      {currentScreen === 'stockIn' && renderStockInScreen()}
      {currentScreen === 'stockOut' && renderStockOutScreen()}
      {currentScreen === 'manage' && renderManageScreen()}
    </div>
  );
};

export default InventoryApp;