HexUnlockedWeb/app/page.tsx

'use client';

import { useState, useEffect, useMemo } from 'react';
import { useInventoryStore } from '@/store/useInventoryStore';
import styles from '../styles/Home.module.css';
import { isNamedDLC } from '@/lib/utils';
import { fetchCharacters, fetchItems, fetchOfferings, fetchCustomizations, fetchDLCs, fetchAddons, fetchPerks } from '@/lib/db';

export default function Home() {
  const store = useInventoryStore();

  const [charCount, setCharCount] = useState(0);
  const [custCount, setCustCount] = useState(0);
  const [itemsCount, setItemsCount] = useState(0);
  const [offeringsCount, setOfferingsCount] = useState(0);
  const [dlcsCount, setDlcsCount] = useState(0);
  const [addonsCount, setAddonsCount] = useState(0);
  const [perksCount, setPerksCount] = useState(0);

  const [importText, setImportText] = useState('');

  useEffect(() => {
    Promise.all([
      fetchCharacters(),
      fetchItems(),
      fetchOfferings(),
      fetchCustomizations(),
      fetchDLCs(),
      fetchAddons(),
      fetchPerks()
    ]).then(([chars, items, offerings, customizations, dlcs, addons, perks]) => {
      setCharCount(chars.length);
      setItemsCount(items.length);
      setOfferingsCount(offerings.length);
      setCustCount(customizations.length);
      setDlcsCount(dlcs.filter(isNamedDLC).length);
      setAddonsCount(addons.length);
      setPerksCount(perks.length);
    });
  }, []);

  /*
    profile handling
  */
  const handleDownload = () => {
    const blob = new Blob([importText], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'profile.json';
    link.click();
    URL.revokeObjectURL(url);
  };

  const handleCopy = () => {
    navigator.clipboard.writeText(importText);
  };

  const getExportText = () => {
    return JSON.stringify({
      unlockedCharacters: store.unlockedCharacters,
      unlockedCustomizations: store.unlockedCustomizations,
      unlockedDLCs: store.unlockedDLCs,
      unlockedPerks: store.unlockedPerks,
      items: store.items,
      offerings: store.offerings,
      addons: store.addons
    }, null, 2);
  };

  const handleImport = async () => {
    try {
      const parsed = JSON.parse(importText);
      store.importProfile(parsed);
    } catch (e) {
      console.error("Invalid JSON", e);
    }
  };

  useEffect(() => {
    setImportText(getExportText());
  }, [store.unlockedCharacters, store.unlockedCustomizations, store.unlockedDLCs, store.unlockedPerks, store.items, store.offerings, store.addons]);

  /*
    stats
  */
  const unlockedItems = useMemo(() => Object.values(store.items).filter(qty => qty > 0).length, [store.items]);
  const unlockedOfferings = useMemo(() => Object.values(store.offerings).filter(qty => qty > 0).length, [store.offerings]);
  const unlockedAddons = useMemo(() => Object.values(store.addons).filter(qty => qty > 0).length, [store.addons]);
  const unlockedPerks = store.unlockedPerks.length;

  return (<div className={styles.container}>
    <header className={styles.header}>
      <h1 className={styles.title}>Dashboard</h1>
      <p className={styles.subtitle}>Status overview and profile management</p>
    </header>

    {/* stats cards */}
    <section className={styles.statsGrid}>
      <div className={styles.statCard}>
        <div className={styles.statLabel}>Characters</div>
        <div className={styles.statValue}>{store.unlockedCharacters.length} <span className={styles.statTotal}>/ {charCount || '-'}</span></div>
      </div>
      <div className={styles.statCard}>
        <div className={styles.statLabel}>Customizations</div>
        <div className={styles.statValue}>{store.unlockedCustomizations.length} <span className={styles.statTotal}>/ {custCount || '-'}</span></div>
      </div>
      <div className={styles.statCard}>
        <div className={styles.statLabel}>DLCs</div>
        <div className={styles.statValue}>{store.unlockedDLCs.length} <span className={styles.statTotal}>/ {dlcsCount || '-'}</span></div>
      </div>
      <div className={styles.statCard}>
        <div className={styles.statLabel}>Items</div>
        <div className={styles.statValue}>{unlockedItems} <span className={styles.statTotal}>/ {itemsCount || '-'}</span></div>
      </div>
      <div className={styles.statCard}>
        <div className={styles.statLabel}>Offerings</div>
        <div className={styles.statValue}>{unlockedOfferings} <span className={styles.statTotal}>/ {offeringsCount || '-'}</span></div>
      </div>
      <div className={styles.statCard}>
        <div className={styles.statLabel}>Addons</div>
        <div className={styles.statValue}>{unlockedAddons} <span className={styles.statTotal}>/ {addonsCount || '-'}</span></div>
      </div>
      <div className={styles.statCard}>
        <div className={styles.statLabel}>Perks</div>
        <div className={styles.statValue}>{unlockedPerks} <span className={styles.statTotal}>/ {perksCount || '-'}</span></div>
      </div>
    </section>

    {/* Control panels */}
    <section className={styles.panelGrid}>
      <div className={styles.card}>
        <h3 className={styles.cardTitle}>Profile Import / Export</h3>

        <textarea
          className={styles.textarea}
          value={importText}
          onChange={(e) => setImportText(e.target.value)}
        />

        <div className={styles.btnRow}>
          <button className={styles.primaryBtn} onClick={handleImport}>
            Validate & Import
          </button>
          <button className={styles.secondaryBtn} onClick={handleCopy}>
            Copy to Clipboard
          </button>
          <button className={styles.secondaryBtn} onClick={handleDownload}>
            Download file
          </button>
        </div>

      </div>
    </section>
  </div>)
}