import React, { useState } from 'react';
import { Plus } from 'lucide-react';

export default function DataEntryApp() {
  const [activeTab, setActiveTab] = useState('master');
  const [products, setProducts] = useState([]);
  const [newProduct, setNewProduct] = useState({
    name: '',
    unit: '',
    unitPrice: '',
    activity: '',
    reportType: ''
  });

  const handleAddProduct = (e) => {
    e.preventDefault();
    setProducts([...products, { ...newProduct, id: Date.now() }]);
    setNewProduct({
      name: '',
      unit: '',
      unitPrice: '',
      activity: '',
      reportType: ''
    });
  };

  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-7xl mx-auto bg-white rounded-lg shadow-lg">
        <div className="border-b border-gray-200">
          <nav className="flex -mb-px">
            {['master', 'purchases', 'sales', 'reports'].map((tab) => (
              <button
                key={tab}
                onClick={() => setActiveTab(tab)}
                className={`w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm ${
                  activeTab === tab
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                {tab.charAt(0).toUpperCase() + tab.slice(1)}
              </button>
            ))}
          </nav>
        </div>

        <div className="p-6">
          {activeTab === 'master' && (
            <div className="space-y-6">
              <h2 className="text-2xl font-bold">Product Information</h2>
              <form onSubmit={handleAddProduct} className="grid grid-cols-2 gap-4">
                <input
                  type="text"
                  placeholder="Product Name"
                  value={newProduct.name}
                  onChange={(e) => setNewProduct({...newProduct, name: e.target.value})}
                  className="p-2 border rounded"
                />
                <input
                  type="text"
                  placeholder="Unit"
                  value={newProduct.unit}
                  onChange={(e) => setNewProduct({...newProduct, unit: e.target.value})}
                  className="p-2 border rounded"
                />
                <input
                  type="number"
                  placeholder="Unit Price"
                  value={newProduct.unitPrice}
                  onChange={(e) => setNewProduct({...newProduct, unitPrice: e.target.value})}
                  className="p-2 border rounded"
                />
                <input
                  type="text"
                  placeholder="Activity"
                  value={newProduct.activity}
                  onChange={(e) => setNewProduct({...newProduct, activity: e.target.value})}
                  className="p-2 border rounded"
                />
                <input
                  type="text"
                  placeholder="Report Type"
                  value={newProduct.reportType}
                  onChange={(e) => setNewProduct({...newProduct, reportType: e.target.value})}
                  className="p-2 border rounded"
                />
                <button
                  type="submit"
                  className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600 flex items-center justify-center gap-2"
                >
                  <Plus size={20} /> Add Product
                </button>
              </form>

              <div className="mt-6">
                <h3 className="text-xl font-semibold mb-4">Product List</h3>
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Unit</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Unit Price</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Activity</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Report Type</th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {products.map((product) => (
                        <tr key={product.id}>
                          <td className="px-6 py-4 whitespace-nowrap">{product.name}</td>
                          <td className="px-6 py-4 whitespace-nowrap">{product.unit}</td>
                          <td className="px-6 py-4 whitespace-nowrap">{product.unitPrice}</td>
                          <td className="px-6 py-4 whitespace-nowrap">{product.activity}</td>
                          <td className="px-6 py-4 whitespace-nowrap">{product.reportType}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'purchases' && (
            <div className="mt-6">
              {/* Purchases Sheet content */}
            </div>
          )}

          {activeTab === 'sales' && (
            <div className="mt-6">
              {/* Sales Sheet content */}
            </div>
          )}

          {activeTab === 'reports' && (
            <div className="mt-6">
              {/* Reports Sheet content */}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}