'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';

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 [importText, setImportText] = useState('');

  useEffect(() => {
    Promise.all([
      fetch('/data/characters.json').then(r => r.json()).catch(() => []),
      fetch('/data/items.json').then(r => r.json()).catch(() => []),
      fetch('/data/offerings.json').then(r => r.json()).catch(() => []),
      fetch('/data/customization_items.json').then(r => r.json()).catch(() => []),
      fetch('/data/dlcs.json').then(r => r.json()).catch(() => [])
    ]).then(([chars, items, offerings, customizations, dlcs]) => {
      setCharCount(chars.length);
      setItemsCount(items.length);
      setOfferingsCount(offerings.length);
      setCustCount(customizations.length);
      setDlcsCount(dlcs.filter(isNamedDLC).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,
      items: store.items,
      offerings: store.offerings
    }, null, 2);
  };

  const handleImport = async () => {
    const parsed = JSON.parse(importText);
    store.importProfile(parsed);
  };

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

  /*
    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]);

  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} / {charCount || '-'}</div>
      </div>
      <div className={styles.statCard}>
        <div className={styles.statLabel}>Customizations</div>
        <div className={styles.statValue}>{store.unlockedCustomizations.length} / {custCount || '-'}</div>
      </div>
      <div className={styles.statCard}>
        <div className={styles.statLabel}>DLCs</div>
        <div className={styles.statValue}>{store.unlockedDLCs.length} / {dlcsCount || '-'}</div>
      </div>
      <div className={styles.statCard}>
        <div className={styles.statLabel}>Items</div>
        <div className={styles.statValue}>{unlockedItems} / {itemsCount || '-'}</div>
      </div>
      <div className={styles.statCard}>
        <div className={styles.statLabel}>Offerings</div>
        <div className={styles.statValue}>{unlockedOfferings} / {offeringsCount || '-'}</div>
      </div>
    </section>

    {/* profile import export stuff */}
    <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>)
}