'use client';

import { AusgabenEntry } from '@/types/ausgaben';

interface AusgabenListProps {
  entries: AusgabenEntry[];
  onDelete: (id: number) => void;
  onEdit: (entry: AusgabenEntry) => void;
}

export default function AusgabenList({ entries, onDelete, onEdit }: AusgabenListProps) {
  const handleDelete = async (id: number) => {
    if (!confirm('Wirklich löschen?')) return;

    try {
      const response = await fetch(`/api/ausgaben/${id}`, {
        method: 'DELETE',
      });

      if (response.ok) {
        onDelete(id);
      } else {
        alert('Fehler beim Löschen!');
      }
    } catch (error) {
      console.error('Error:', error);
      alert('Fehler beim Löschen!');
    }
  };

  const formatDate = (dateStr: string) => {
    const date = new Date(dateStr);
    return date.toLocaleDateString('de-DE', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
    });
  };

  const formatAmount = (amount: number) => {
    return new Intl.NumberFormat('de-DE', {
      style: 'currency',
      currency: 'EUR',
    }).format(amount);
  };

  return (
    <div className="overflow-x-auto">
      <table className="w-full">
        <thead>
          <tr className="bg-[#CCCCFF]">
            <th className="border-b-2 border-black p-2 w-32">Datum</th>
            <th className="border-b-2 border-black p-2 w-12">Tag</th>
            <th className="border-b-2 border-black p-2 w-36">Wo</th>
            <th className="border-b-2 border-black p-2 w-48">Was</th>
            <th className="border-b-2 border-black p-2 w-8">Betrag</th>
            <th className="border-b-2 border-black p-2 w-16">Wie</th>
            <th className="border-b-2 border-black p-2 w-38">Aktion</th>
          </tr>
        </thead>
        <tbody>
          {entries.length === 0 ? (
            <tr>
              <td colSpan={7} className="text-center p-4 text-gray-500">
                Keine Einträge vorhanden
              </td>
            </tr>
          ) : (
            entries.map((entry, index) => (
              <tr key={entry.ID} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-100'}>
                <td className="border-y border-black p-2 text-center">
                  {formatDate(entry.Datum)}
                </td>
                <td className="border-y border-black p-2 text-center">{entry.WochTag.slice(0, 2)}</td>
                <td className="border-y border-black p-2">{entry.Wo}</td>
                <td className="border-y border-black p-2">{entry.Was}</td>
                <td className="border-y border-black p-2 text-right">
                  {formatAmount(entry.Wieviel)}
                </td>
                <td className="border-y border-black p-2 text-center">{entry.Wie}</td>
                <td className="border-y border-black p-2 text-center">
                  <button
                    onClick={() => onEdit(entry)}
                    className="text-blue-600 hover:text-blue-800 px-3 py-1 rounded text-sm mr-2"
                  >
                    Bearbeiten
                  </button>
                  <button
                    onClick={() => handleDelete(entry.ID)}
                    className="text-red-600 hover:text-red-800 px-3 py-1 rounded text-sm"
                  >
                    Löschen
                  </button>
                </td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
}