const fs = require('fs');

const path = 'C:/Users/CSH12/Desktop/AI_Pharamcy_Frontend/AI_Pharmacy_Application/src/pages/Inventory.tsx';
let content = fs.readFileSync(path, 'utf8');

const targetSnippet = `<datalist id="product-options">`;
if (content.includes(targetSnippet)) {
  const startIdx = content.indexOf('<div className="col-span-2">');
  const endIdx = content.indexOf(') : (', startIdx);
  
  if (startIdx !== -1 && endIdx !== -1) {
    const originalBlock = content.substring(startIdx, endIdx).trim();
    // remove trailing </div> from original block if present
    const lastDivIdx = originalBlock.lastIndexOf('</div>');
    const targetBlockToReplace = originalBlock.substring(0, lastDivIdx + 6);
    
    const replacementBlock = `<div className="col-span-2 relative">
                  <label className="block text-xs font-bold uppercase tracking-wider text-slate-500" style={{ marginBottom: '8px' }}>Product / Medicine (Search by Brand, Generic or Product ID)</label>
                  <div className="relative group">
                    <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-400 group-focus-within:text-blue-500 transition-colors z-10">
                      <Search size={18} strokeWidth={2} />
                    </div>
                    <input
                      type="text"
                      value={productSearchQuery || formData.product_id}
                      onFocus={() => setIsProductDropdownOpen(true)}
                      onChange={(e) => {
                        setProductSearchQuery(e.target.value);
                        setFormData({ ...formData, product_id: e.target.value });
                        setIsProductDropdownOpen(true);
                      }}
                      placeholder="Type medicine name, generic name or Product ID..."
                      className="w-full bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 text-[15px] font-medium text-slate-800 transition-all hover:bg-slate-100 hover:border-slate-300 placeholder:text-slate-400"
                      style={{ padding: '12px 16px', paddingLeft: '44px', paddingRight: '40px' }}
                    />
                    <div 
                      className="absolute inset-y-0 right-0 pr-4 flex items-center cursor-pointer text-slate-400 hover:text-slate-600 z-10"
                      onClick={() => setIsProductDropdownOpen(!isProductDropdownOpen)}
                    >
                      <ChevronDown size={18} strokeWidth={2} className={\`transition-transform \${isProductDropdownOpen ? 'rotate-180' : ''}\`} />
                    </div>
                  </div>

                  {/* Searchable Custom Dropdown Menu */}
                  {isProductDropdownOpen && (
                    <div 
                      className="absolute left-0 right-0 top-full mt-2 bg-white border border-slate-200 rounded-xl shadow-2xl z-50 max-h-64 overflow-y-auto divide-y divide-slate-100"
                      style={{ boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)' }}
                    >
                      {filteredProductOptions.length > 0 ? (
                        filteredProductOptions.map((d: any) => (
                          <div
                            key={d.product_id}
                            onClick={() => {
                              setFormData({ ...formData, product_id: d.product_id });
                              setProductSearchQuery(\`\${d.brand_name} (\${d.product_id})\`);
                              setIsProductDropdownOpen(false);
                            }}
                            className="p-3 hover:bg-blue-50/80 cursor-pointer flex items-center justify-between transition-colors group"
                          >
                            <div className="flex flex-col">
                              <span className="font-bold text-slate-800 text-[14px] group-hover:text-blue-600">
                                {d.brand_name}
                              </span>
                              <span className="text-xs text-slate-500">
                                {d.generic_name || 'Generic Medicine'} {d.manufacturer ? \`• \${d.manufacturer}\` : ''}
                              </span>
                            </div>
                            <span className="text-[11px] font-mono font-bold bg-slate-100 text-slate-700 group-hover:bg-blue-100 group-hover:text-blue-700 px-2.5 py-1 rounded-md transition-colors shrink-0">
                              {d.product_id}
                            </span>
                          </div>
                        ))
                      ) : (
                        <div className="p-4 text-center text-slate-400 text-sm">
                          No matching medicines found
                        </div>
                      )}
                    </div>
                  )}
                </div>`;

    content = content.replace(targetBlockToReplace, replacementBlock);
    fs.writeFileSync(path, content);
    console.log("SUCCESS: Replaced datalist block with custom Combobox!");
  } else {
    console.log("Could not locate block bounds:", startIdx, endIdx);
  }
} else {
  console.log("No datalist found.");
}