'use client';

import { useState, useEffect } from 'react';
import WerteForm from '@/components/WerteForm';
import WerteList from '@/components/WerteList';
import { WerteEntry } from '@/types/werte';
import TabLayout from '@/components/TabLayout';

const MAX_ENTRIES = 15

export default function Home() {
  const [entries, setEntries] = useState<WerteEntry[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedEntry, setSelectedEntry] = useState<WerteEntry | null>(null);

  useEffect(() => {
    let isMounted = true;
    
    // Fetch initial data
    (async () => {
      try {
        const response = await fetch(`/api/werte?limit=${MAX_ENTRIES}`, {
          cache: 'no-store',
          headers: {
            'Cache-Control': 'no-cache',
          },
        });
        const data = await response.json();
        if (data.success && isMounted) {
          setEntries(data.data);
        }
      } catch (error) {
        console.error('Error fetching entries:', error);
      }
      if (isMounted) {
        setIsLoading(false);
      }
    })();
    
    return () => {
      isMounted = false;
    };
  }, []);

  const refreshEntries = async () => {
    try {
      const response = await fetch('/api/werte?limit=14', {
        cache: 'no-store',
        headers: {
          'Cache-Control': 'no-cache',
        },
      });
      const data = await response.json();
      if (data.success) {
        setEntries(data.data);
      }
    } catch (error) {
      console.error('Error fetching entries:', error);
    }
  };

  const handleSuccess = () => {
    setSelectedEntry(null);
    // Small delay to ensure database commit is complete
    setTimeout(() => {
      refreshEntries();
    }, 100);
  };

  const handleDelete = (id: number) => {
    setEntries(entries.filter(entry => entry.ID !== id));
  };

  const handleEdit = (entry: WerteEntry) => {
    setSelectedEntry(entry);
    // Scroll to top
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <TabLayout>
      <div className="mb-8">
          <h2 className="text-xl font-semibold mb-4">Eingabe</h2>
          <WerteForm onSuccess={handleSuccess} selectedEntry={selectedEntry} />
        </div>

        <div className="bg-white border border-black rounded-lg shadow-md p-6">
          <h2 className="text-xl font-semibold mb-4">Letzte {MAX_ENTRIES} Einträge</h2>
          {isLoading ? (
            <div className="text-center py-4">Lade Daten...</div>
          ) : (
            <WerteList entries={entries} onDelete={handleDelete} onEdit={handleEdit} />
          )}
        </div>

      </TabLayout>
  );
}