import React, { useState } from 'react';
import {
  IonPage,
  IonContent,
  IonList,
  IonItem,
  IonLabel,
  IonInput,
  IonButton,
  IonSpinner,
  IonText,
} from '@ionic/react';
import { useCoda } from '../hooks/useCoda';

const TestCoda: React.FC = () => {
  const {
    records,
    loading,
    error,
    fetchRecords,
    addRecord,
    deleteRecord,
    updateVoti,
  } = useCoda();

  // Stati per i nuovi record da aggiungere
  const [title, setTitle] = useState('');
  const [artista, setArtista] = useState('');
  const [coverUrl, setCoverUrl] = useState('');
  const [color, setColor] = useState('');

  const handleAdd = () => {
    if (!title || !artista || !coverUrl || !color) return alert('Completa tutti i campi');
    addRecord({ title, artista, coverUrl, color, voti: 0 });
    setTitle('');
    setArtista('');
    setCoverUrl('');
    setColor('');
  };

  return (
    <IonPage>
      <IonContent className="ion-padding">
        <h1>Test UseCoda</h1>

        {loading && (
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 10 }}>
            <IonSpinner name="crescent" />
          </div>
        )}

        {error && (
          <IonText color="danger">
            <p>{error}</p>
          </IonText>
        )}

        <IonButton expand="block" onClick={fetchRecords} disabled={loading}>
          Ricarica Record
        </IonButton>

        <h2>Aggiungi Nuovo Record</h2>
        <IonInput
          placeholder="Title"
          value={title}
          onIonChange={(e) => setTitle(e.detail.value!)}
        />
        <IonInput
          placeholder="Artista"
          value={artista}
          onIonChange={(e) => setArtista(e.detail.value!)}
        />
        <IonInput
          placeholder="Cover URL"
          value={coverUrl}
          onIonChange={(e) => setCoverUrl(e.detail.value!)}
        />
        <IonInput
          placeholder="Color (es. #ff0000)"
          value={color}
          onIonChange={(e) => setColor(e.detail.value!)}
        />
        <IonButton expand="block" onClick={handleAdd} disabled={loading}>
          Aggiungi
        </IonButton>

        <h2>Lista Record</h2>
        <IonList>
          {records.length === 0 && !loading && <p>Nessun record disponibile</p>}
          {records.map((r) => (
            <IonItem key={r.id} style={{ borderLeft: `5px solid ${r.color}` }}>
              <IonLabel>
                <h3>{r.title}</h3>
                <p>Artista: {r.artista}</p>
                <img
                  src={r.coverUrl}
                  alt={r.title}
                  style={{ width: 50, height: 50, objectFit: 'cover', marginBottom: 5 }}
                />
                <p>Voti: {r.voti}</p>
              </IonLabel>
              <IonButton size="small" onClick={() => updateVoti(r.id, 1)} disabled={loading}>
                +1
              </IonButton>
              <IonButton size="small" onClick={() => updateVoti(r.id, -1)} disabled={loading}>
                -1
              </IonButton>
              <IonButton color="danger" size="small" onClick={() => deleteRecord(r.id)} disabled={loading}>
                Elimina
              </IonButton>
            </IonItem>
          ))}
        </IonList>
      </IonContent>
    </IonPage>
  );
};

export default TestCoda;