import { useEffect } from 'react';
import { useSetStore } from '../../stores/setStore';
import type { TrainingSet } from '../../types';

interface SetListProps {
  onEdit: (set: TrainingSet) => void;
  onDelete: (set: TrainingSet) => void;
}

export function SetList({ onEdit, onDelete }: SetListProps) {
  const { sets, loading, fetchSets } = useSetStore();

  useEffect(() => {
    fetchSets();
  }, [fetchSets]);

  if (loading) {
    return <div className="text-center text-gray-500 py-8">Laden...</div>;
  }

  if (sets.length === 0) {
    return (
      <div className="text-center text-gray-500 py-12">
        <p className="text-lg">Noch keine Sets angelegt</p>
        <p className="text-sm mt-1">Erstelle dein erstes Set mit dem Button oben.</p>
      </div>
    );
  }

  return (
    <div className="grid gap-3">
      {sets.map((set) => (
        <div
          key={set.id}
          className="bg-gray-900 border border-gray-800 rounded-xl p-4"
        >
          <div className="flex items-start justify-between gap-2">
            <div className="flex-1 min-w-0">
              <h3 className="font-semibold text-gray-100">{set.name}</h3>
              <p className="text-sm text-gray-400 mt-1">
                {set.exercises?.length || 0} Übungen
              </p>
              {set.exercises && set.exercises.length > 0 && (
                <div className="flex flex-wrap gap-1 mt-2">
                  {set.exercises.map((ex) => (
                    <span
                      key={ex.id}
                      className="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded"
                    >
                      {ex.name}
                    </span>
                  ))}
                </div>
              )}
            </div>
            <div className="flex gap-1">
              <button
                onClick={() => onEdit(set)}
                className="min-h-[44px] min-w-[44px] flex items-center justify-center text-gray-400 hover:text-blue-400 rounded-lg hover:bg-gray-800"
                title="Bearbeiten"
              >
                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg>
              </button>
              <button
                onClick={() => onDelete(set)}
                className="min-h-[44px] min-w-[44px] flex items-center justify-center text-gray-400 hover:text-red-400 rounded-lg hover:bg-gray-800"
                title="Löschen"
              >
                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}
