const { useState, useEffect, useRef } = React;

const CATEGORY_RULES = [
  // PC Parts
  { keywords: ['rtx','gtx','rx 6','rx 7','gpu','graphics card','graphics','video card'], category: 'PC Parts', subcategory: 'GPU' },
  { keywords: ['cpu','processor','ryzen','intel core','i5','i7','i9','xeon','threadripper'], category: 'PC Parts', subcategory: 'CPU' },
  { keywords: ['ram','memory','ddr4','ddr5','dimm'], category: 'PC Parts', subcategory: 'RAM' },
  { keywords: ['ssd','nvme','hdd','hard drive','storage','m.2'], category: 'PC Parts', subcategory: 'Storage' },
  { keywords: ['motherboard','mobo','mainboard'], category: 'PC Parts', subcategory: 'Motherboard' },
  { keywords: ['psu','power supply'], category: 'PC Parts', subcategory: 'PSU' },
  { keywords: ['cpu cooler','air cooler','aio','noctua','corsair h'], category: 'PC Parts', subcategory: 'Cooling' },
  // PC Builds
  { keywords: ['pc build','gaming pc','gaming rig','desktop build','custom build','prebuilt','pre-built'], category: 'PC Builds', subcategory: 'Desktop' },
  { keywords: ['mini itx','micro atx'], category: 'PC Builds', subcategory: 'Desktop' },
  // Laptops
  { keywords: ['macbook','mac mini','imac','mac pro','mac studio'], category: 'Laptops', subcategory: 'Apple' },
  { keywords: ['laptop','notebook','thinkpad','dell xps','lenovo','hp pavilion','asus rog','razer blade','surface laptop'], category: 'Laptops', subcategory: 'Laptop' },
  { keywords: ['chromebook'], category: 'Laptops', subcategory: 'Chromebook' },
  // Phones
  { keywords: ['iphone','ipad','ipod'], category: 'Phones', subcategory: 'Apple' },
  { keywords: ['samsung galaxy','galaxy s','galaxy a','galaxy z'], category: 'Phones', subcategory: 'Samsung' },
  { keywords: ['pixel','oneplus','xiaomi','poco','oppo','nothing phone'], category: 'Phones', subcategory: 'Android' },
  { keywords: ['android phone','smartphone'], category: 'Phones', subcategory: 'Phone' },
  // Gaming
  { keywords: ['playstation','ps3','ps4','ps5'], category: 'Gaming', subcategory: 'PlayStation' },
  { keywords: ['xbox series','xbox one','xbox 360'], category: 'Gaming', subcategory: 'Xbox' },
  { keywords: ['nintendo switch','gameboy','3ds','wii','game cube'], category: 'Gaming', subcategory: 'Nintendo' },
  { keywords: ['game console','gaming console','handheld'], category: 'Gaming', subcategory: 'Console' },
  // Sneakers
  { keywords: ['jordan','travis scott','off-white nike'], category: 'Sneakers', subcategory: 'Hypebeast' },
  { keywords: ['yeezy','adidas boost'], category: 'Sneakers', subcategory: 'Yeezy' },
  { keywords: ['nike dunk','nike sb','air force','air max'], category: 'Sneakers', subcategory: 'Nike' },
  { keywords: ['sneaker','shoe','kicks','trainer'], category: 'Sneakers', subcategory: 'Sneakers' },
  // Clothes
  { keywords: ['supreme','palace','bape','off-white hoodie','fear of god','essentials'], category: 'Clothes', subcategory: 'Streetwear' },
  { keywords: ['hoodie','jacket','shirt','jeans','pants','coat','vest'], category: 'Clothes', subcategory: 'Clothing' },
  // Watches
  { keywords: ['rolex','omega','seiko','casio','citizen','hamilton','tudor','patek'], category: 'Watches', subcategory: 'Watch' },
  { keywords: ['apple watch','galaxy watch','garmin','smartwatch'], category: 'Watches', subcategory: 'Smartwatch' },
  // Cameras
  { keywords: ['sony a','sony zv','canon r','canon eos','nikon z','fujifilm','lumix','mirrorless','dslr'], category: 'Cameras', subcategory: 'Camera' },
  { keywords: ['camera lens','sigma','tamron','50mm','85mm','24-70'], category: 'Cameras', subcategory: 'Lens' },
  { keywords: ['gopro','action camera','drone'], category: 'Cameras', subcategory: 'Action' },
  // Audio
  { keywords: ['airpods','earbuds','headphones','wh-1000','bose','sennheiser','sony wh','audio technica'], category: 'Audio', subcategory: 'Headphones' },
  { keywords: ['speaker','jbl','sonos','marshall','bose soundlink'], category: 'Audio', subcategory: 'Speaker' },
];

const ALL_CATS = ['PC Parts','PC Builds','Laptops','Phones','Gaming','Sneakers','Clothes','Watches','Cameras','Audio','Jewelry','Furniture','Books','Toys','Tools','Bikes','TVs','Other'];

const REPAIR_CATS = new Set(['PC Parts','PC Builds','Laptops','Phones','Cameras','Audio','TVs']);

const PLATFORMS = ['eBay','Facebook Marketplace','Other'];

const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
const DAYS_OF_WEEK = ['Su','Mo','Tu','We','Th','Fr','Sa'];

function detectCategory(val) {
  const lower = val.toLowerCase();
  for (const r of CATEGORY_RULES) {
    if (r.keywords.some(k => lower.includes(k))) return r;
  }
  return null;
}

function MiniCalendar({ value, onChange }) {
  const today = new Date();
  const initDate = value ? new Date(value + 'T00:00:00') : today;
  const [viewY, setViewY] = useState(initDate.getFullYear());
  const [viewM, setViewM] = useState(initDate.getMonth());
  const [selD, setSelD] = useState(initDate.getDate());
  const [selM, setSelM] = useState(initDate.getMonth());
  const [selY, setSelY] = useState(initDate.getFullYear());

  useEffect(() => {
    if (!value) {
      const pad = n => String(n).padStart(2,'0');
      onChange(today.getFullYear() + '-' + pad(today.getMonth()+1) + '-' + pad(today.getDate()));
    }
  }, []);

  function pick(d) {
    setSelD(d); setSelM(viewM); setSelY(viewY);
    const pad = n => String(n).padStart(2,'0');
    onChange(viewY + '-' + pad(viewM+1) + '-' + pad(d));
  }

  function prevMonth() {
    if (viewM === 0) { setViewM(11); setViewY(y => y-1); }
    else setViewM(m => m-1);
  }
  function nextMonth() {
    const n = new Date(viewY, viewM+1, 1);
    if (n <= new Date(today.getFullYear(), today.getMonth(), 28)) {
      if (viewM === 11) { setViewM(0); setViewY(y => y+1); }
      else setViewM(m => m+1);
    }
  }

  const firstDay = new Date(viewY, viewM, 1).getDay();
  const daysInMonth = new Date(viewY, viewM+1, 0).getDate();
  const cells = [];
  for (let i = 0; i < firstDay; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);

  return (
    <div className="mini-calendar">
      <div className="cal-header">
        <button type="button" className="cal-nav" onClick={prevMonth}>‹</button>
        <div className="cal-month-selector">
          <select className="cal-month-select" value={viewM} onChange={e => { setViewM(parseInt(e.target.value)); setSelD(null); }}>
            {MONTHS.map((month, i) => <option key={month} value={i}>{month}</option>)}
          </select>
          <select className="cal-year-select" value={viewY} onChange={e => { setViewY(parseInt(e.target.value)); setSelD(null); }}>
            {Array.from({length: 5}, (_, i) => viewY - 2 + i).map(year => 
              <option key={year} value={year}>{year}</option>
            )}
          </select>
        </div>
        <button type="button" className="cal-nav" onClick={nextMonth}>›</button>
      </div>
      <div className="cal-grid">
        {DAYS_OF_WEEK.map(d => <div key={d} className="cal-dow">{d}</div>)}
        {cells.map((d, i) => {
          if (!d) return <div key={`e${i}`} />;
          const isToday = d === today.getDate() && viewM === today.getMonth() && viewY === today.getFullYear();
          const isSel = d === selD && viewM === selM && viewY === selY;
          const isFuture = new Date(viewY, viewM, d) > today;
          return (
            <button key={d} type="button"
              className={`cal-day ${isToday ? 'cal-today' : ''} ${isSel ? 'cal-selected' : ''} ${isFuture ? 'cal-disabled' : ''}`}
              disabled={isFuture} onClick={() => pick(d)}>{d}</button>
          );
        })}
      </div>
    </div>
  );
}

function CategoryChips({ value, onChange }) {
  const [showAll, setShowAll] = useState(false);
  const top3 = ALL_CATS.slice(0, 4);
  const visible = showAll ? ALL_CATS : top3;
  return (
    <div className="cat-chips-wrap">
      {visible.map(cat => (
        <button key={cat} type="button"
          className={`cat-chip ${value === cat ? 'selected' : ''}`}
          onClick={() => onChange(cat)}>{cat}</button>
      ))}
      {!showAll && (
        <button type="button" className="cat-chip cat-chip-more" onClick={() => setShowAll(true)}>+ More</button>
      )}
    </div>
  );
}

function OtherInput({ placeholder, value, onChange }) {
  return (
    <input type="text" className="log-input" placeholder={placeholder}
      value={value} onChange={e => onChange(e.target.value)}
      style={{marginTop:10, borderColor:'var(--text)', borderWidth:2}} autoFocus />
  );
}

function LogScreen({ navigate }) {
  const { dispatch } = useStore();
  const [itemName, setItemName] = useState('');
  const [buyPrice, setBuyPrice] = useState('');
  const [buyDate, setBuyDate] = useState('');
  const [category, setCategory] = useState('');
  const [otherCategory, setOtherCategory] = useState('');
  const [hours, setHours] = useState('');
  const [repairCost, setRepairCost] = useState('');
  const [source, setSource] = useState('');
  const [sourceOther, setSourceOther] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const detected = itemName.length > 2 ? detectCategory(itemName) : null;
  const showCatSection = itemName.length > 2;
  const showRepair = REPAIR_CATS.has(category);
  const finalCategory = category === 'Other' ? otherCategory : category;

  useEffect(() => {
    if (detected && !category) setCategory(detected.category);
  }, [itemName]);

  // Build suggested cats from detection
  const suggestedCats = detected
    ? [detected.category, ...ALL_CATS.filter(c => c !== detected.category).slice(0, 2)]
    : ALL_CATS.slice(0, 3);

  function handleSubmit(e) {
    e.preventDefault();
    if (!itemName || !buyPrice || !buyDate) return;
    if (category === 'Other' && !otherCategory) { alert('Please specify the category'); return; }
    if (source === 'Other' && !sourceOther) { alert('Please specify where you bought it'); return; }
    dispatch({
      type: 'ADD_FLIP',
      flip: {
        item_name: itemName,
        buy_price: parseFloat(buyPrice) + (parseFloat(repairCost)||0),
        buy_date: buyDate,
        category: finalCategory,
        hours_spent: parseFloat(hours)||0,
        source: source === 'Other' ? sourceOther : source,
        repair_cost: parseFloat(repairCost)||0,
      }
    });
    setSubmitted(true);
    setTimeout(() => navigate('flips'), 500);
  }

  return (
    <div className="content" style={{padding:'0 16px 24px', gap:0}}>
      {submitted && (
        <div style={{
          position: 'fixed',
          bottom: 32,
          left: '50%',
          transform: 'translateX(-50%)',
          background: '#1a1a1a',
          color: 'white',
          padding: '14px 28px',
          borderRadius: 50,
          fontSize: 14,
          fontWeight: 600,
          zIndex: 200,
          display: 'flex',
          alignItems: 'center',
          gap: 10,
          boxShadow: '0 8px 32px rgba(0,0,0,0.25)',
          animation: 'slideUp 0.3s ease',
          fontFamily: 'inherit',
          whiteSpace: 'nowrap',
        }}>
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
            <circle cx="9" cy="9" r="9" fill="#2d7a14"/>
            <path d="M5 9l3 3 5-5" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          Flip saved successfully
        </div>
      )}
      <form onSubmit={handleSubmit}>

        {/* Item name */}
        <div className="log-section">
          <div className="log-label">Item name</div>
          <input type="text" className="log-input" placeholder="e.g. RTX 4070 Ti, iPhone 15 Pro"
            value={itemName} onChange={e => { setItemName(e.target.value); setCategory(''); }}
            autoComplete="off" />
        </div>

        {/* Category */}
        {showCatSection && (
          <div className="log-section">
            <div className="log-label">Category</div>
            <div className="cat-chips-wrap">
              {suggestedCats.map(cat => (
                <button key={cat} type="button"
                  className={`cat-chip ${category === cat ? 'selected' : ''}`}
                  onClick={() => { setCategory(cat); setOtherCategory(''); }}>
                  {cat}
                </button>
              ))}
              {!suggestedCats.includes('Other') && (
                <button type="button"
                  className={`cat-chip ${category === 'Other' ? 'selected' : ''} cat-chip-more`}
                  onClick={() => setCategory(category === 'Other' ? '' : 'Other')}>
                  Other
                </button>
              )}
            </div>
            {category === 'Other' && (
              <OtherInput placeholder="Specify category (e.g. Furniture, Tools…)" value={otherCategory} onChange={setOtherCategory} />
            )}
            {detected && category === detected.category && (
              <div style={{fontSize:12,color:'var(--green)',marginTop:6}}>✓ Auto-detected from item name</div>
            )}
          </div>
        )}

        {/* Price */}
        <div className="log-section">
          <div className="log-label">What you paid</div>
          <div className="log-input-row">
            <span className="log-prefix">$</span>
            <input type="number" className="log-input log-input-prefixed" placeholder="0"
              step="1" min="0" inputMode="numeric" value={buyPrice} onChange={e => setBuyPrice(e.target.value)} />
          </div>
        </div>

        {/* Repair cost — only for relevant categories */}
        {showRepair && (
          <div className="log-section">
            <div className="log-label">Repair / refurb cost <span className="label-hint">(optional)</span></div>
            <div className="log-input-row">
              <span className="log-prefix">$</span>
              <input type="number" className="log-input log-input-prefixed" placeholder="0"
                step="0.01" min="0" inputMode="decimal" value={repairCost} onChange={e => setRepairCost(e.target.value)} />
            </div>
            <div className="field-hint" style={{marginTop:6}}>Parts, labour, cleaning — added to your cost basis</div>
            {repairCost && parseFloat(repairCost) > 0 && buyPrice && (
              <div style={{fontSize:12,color:'var(--text-muted)',marginTop:4}}>
                Total cost basis: <strong style={{color:'var(--text)'}}>${(parseFloat(buyPrice||0)+parseFloat(repairCost)).toFixed(2)}</strong>
              </div>
            )}
          </div>
        )}

        {/* Date */}
        <div className="log-section">
          <div className="log-label">Date bought</div>
          <MiniCalendar value={buyDate} onChange={setBuyDate} />
          {buyDate && <div style={{fontSize:13,color:'var(--green)',marginTop:6}}>✓ {buyDate}</div>}
        </div>

        {/* Source platform */}
        <div className="log-section">
          <div className="log-label">Where you bought it</div>
          <div className="styled-select-wrap">
            <select className="log-input" style={{paddingRight:40}} value={source}
              onChange={e => { setSource(e.target.value); setSourceOther(''); }}
              required>
              <option value="" disabled>Select platform</option>
              {PLATFORMS.map(p => <option key={p} value={p}>{p}</option>)}
            </select>
            <svg className="select-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
          </div>
          {source === 'Other' && (
            <OtherInput placeholder="Where exactly? (e.g. Garage sale, Thrift store, Estate sale…)" value={sourceOther} onChange={setSourceOther} />
          )}
          {source === 'Local / Cash' && (
            <OtherInput placeholder="Where? (e.g. Parking lot, Seller's house, Flea market…)" value={sourceOther} onChange={setSourceOther} />
          )}
        </div>

        {/* Hours */}
        <div className="log-section">
          <div className="log-label">Hours spent <span className="label-hint">(optional)</span></div>
          <div className="log-input-row">
            <span className="log-prefix">⏱</span>
            <input type="number" className="log-input log-input-prefixed" placeholder="0"
              step="0.5" min="0" inputMode="decimal" value={hours} onChange={e => setHours(e.target.value)} />
          </div>
          <div className="field-hint" style={{marginTop:6}}>Cleaning, fixing, listing, communicating</div>
        </div>

        <button type="submit" className="log-btn" style={{marginTop:8}}>Save flip</button>
      </form>

      <div className="coming-soon" style={{marginTop:16}}>
        <div className="cs-icon" style={{display:"flex",alignItems:"center",justifyContent:"center"}}><i className="ph-bold ph-link" style={{fontSize:20,color:"var(--text-muted)"}} /></div>
        <div className="cs-text">
          <div className="cs-title">Connect eBay / Facebook</div>
          <div className="cs-sub">Auto-import your sales</div>
        </div>
        <div className="cs-badge">Soon</div>
      </div>
    </div>
  );
}

Object.assign(window, { LogScreen });