<!-- HelpPage.vue -->
<template>
  <q-page class="help-page">
    <!-- Header -->
    <div class="help-page__header">
      <q-btn flat round icon="arrow_back" color="white" @click="goBack" />
      <div>
        <h1>Come Funziona</h1>
        <p>Guida ai Viaggi Solidali</p>
      </div>
    </div>

    <!-- Hero Section -->
    <div class="help-page__hero">
      <div class="help-page__hero-icon">
        <q-icon name="directions_car" size="48px" color="white" />
      </div>
      <h2>Viaggia insieme, risparmia insieme</h2>
      <p>Condividi i tuoi viaggi e aiuta la community a muoversi in modo sostenibile</p>
    </div>

    <!-- Quick Actions -->
    <div class="help-page__quick-actions">
      <div class="help-page__action" @click="router.push('/viaggi/offri')">
        <div class="help-page__action-icon help-page__action-icon--offer">
          <q-icon name="directions_car" size="28px" />
        </div>
        <span>Offri passaggio</span>
      </div>
      <div class="help-page__action" @click="router.push('/viaggi/cerca')">
        <div class="help-page__action-icon help-page__action-icon--search">
          <q-icon name="search" size="28px" />
        </div>
        <span>Cerca passaggio</span>
      </div>
      <div class="help-page__action" @click="router.push('/viaggi/richiedi')">
        <div class="help-page__action-icon help-page__action-icon--request">
          <q-icon name="hail" size="28px" />
        </div>
        <span>Richiedi passaggio</span>
      </div>
    </div>

    <!-- Content -->
    <div class="help-page__content">
      <!-- How It Works Section -->
      <div class="help-page__section">
        <h3 class="help-page__section-title">
          <q-icon name="play_circle" />
          Come iniziare
        </h3>

        <div class="help-page__steps">
          <div class="help-page__step">
            <div class="help-page__step-number">1</div>
            <div class="help-page__step-content">
              <h4>Completa il tuo profilo</h4>
              <p>Aggiungi una foto, una descrizione e le tue preferenze di viaggio.</p>
            </div>
          </div>
          <div class="help-page__step">
            <div class="help-page__step-number">2</div>
            <div class="help-page__step-content">
              <h4>Registra i tuoi veicoli</h4>
              <p>Se vuoi offrire passaggi, aggiungi i dati del tuo veicolo.</p>
            </div>
          </div>
          <div class="help-page__step">
            <div class="help-page__step-number">3</div>
            <div class="help-page__step-content">
              <h4>Pubblica o cerca</h4>
              <p>Pubblica un viaggio o cerca tra quelli disponibili.</p>
            </div>
          </div>
          <div class="help-page__step">
            <div class="help-page__step-number">4</div>
            <div class="help-page__step-content">
              <h4>Contatta e parti!</h4>
              <p>Mettiti d'accordo via chat, conferma e parti insieme!</p>
            </div>
          </div>
        </div>
      </div>

      <!-- For Drivers Section -->
      <div class="help-page__section">
        <h3 class="help-page__section-title">
          <q-icon name="directions_car" />
          Per chi offre passaggi
        </h3>

        <q-expansion-item v-for="(item, index) in driverFAQs" :key="`driver-${index}`" :label="item.question" expand-separator class="help-page__faq-item">
          <q-card>
            <q-card-section>{{ item.answer }}</q-card-section>
          </q-card>
        </q-expansion-item>
      </div>

      <!-- For Passengers Section -->
      <div class="help-page__section">
        <h3 class="help-page__section-title">
          <q-icon name="hail" />
          Per chi cerca passaggi
        </h3>

        <q-expansion-item v-for="(item, index) in passengerFAQs" :key="`passenger-${index}`" :label="item.question" expand-separator class="help-page__faq-item">
          <q-card>
            <q-card-section>{{ item.answer }}</q-card-section>
          </q-card>
        </q-expansion-item>
      </div>

      <!-- Safety Section -->
      <div class="help-page__section help-page__section--safety">
        <h3 class="help-page__section-title">
          <q-icon name="verified_user" />
          Sicurezza e fiducia
        </h3>

        <div class="help-page__safety-grid">
          <div class="help-page__safety-item">
            <q-icon name="star" size="32px" color="amber" />
            <h4>Sistema di recensioni</h4>
            <p>Ogni utente può lasciare e ricevere feedback dopo i viaggi</p>
          </div>
          <div class="help-page__safety-item">
            <q-icon name="verified" size="32px" color="info" />
            <h4>Profili verificati</h4>
            <p>Gli utenti possono verificare email, telefono e documenti</p>
          </div>
          <div class="help-page__safety-item">
            <q-icon name="chat" size="32px" color="positive" />
            <h4>Chat integrata</h4>
            <p>Comunica direttamente con gli altri utenti in sicurezza</p>
          </div>
          <div class="help-page__safety-item">
            <q-icon name="groups" size="32px" color="primary" />
            <h4>Community solidale</h4>
            <p>Una rete di persone che condividono valori e risorse</p>
          </div>
        </div>
      </div>

      <!-- Tips Section -->
      <div class="help-page__section">
        <h3 class="help-page__section-title">
          <q-icon name="lightbulb" />
          Consigli utili
        </h3>

        <div class="help-page__tips">
          <div class="help-page__tip">
            <q-icon name="photo_camera" color="primary" />
            <span>Aggiungi una foto profilo chiara e riconoscibile</span>
          </div>
          <div class="help-page__tip">
            <q-icon name="schedule" color="primary" />
            <span>Sii puntuale agli appuntamenti</span>
          </div>
          <div class="help-page__tip">
            <q-icon name="message" color="primary" />
            <span>Rispondi rapidamente ai messaggi</span>
          </div>
          <div class="help-page__tip">
            <q-icon name="location_on" color="primary" />
            <span>Indica punti di incontro facili da trovare</span>
          </div>
          <div class="help-page__tip">
            <q-icon name="star_rate" color="primary" />
            <span>Lascia sempre un feedback dopo il viaggio</span>
          </div>
          <div class="help-page__tip">
            <q-icon name="eco" color="primary" />
            <span>Rispetta l'ambiente: meno auto, meno emissioni!</span>
          </div>
        </div>
      </div>

      <!-- Contact Section -->
      <div class="help-page__section help-page__section--contact">
        <h3 class="help-page__section-title">
          <q-icon name="support_agent" />
          Hai bisogno di aiuto?
        </h3>

        <p>Se hai domande o problemi, il nostro team è sempre pronto ad aiutarti.</p>

        <div class="help-page__contact-actions">
          <q-btn color="primary" icon="email" label="Scrivi al supporto" unelevated @click="contactSupport" />
          <q-btn color="grey-7" icon="forum" label="Vai al forum" outline @click="openForum" />
        </div>
      </div>
    </div>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';

export default defineComponent({
  name: 'HelpPage',

  setup() {
    const router = useRouter();
    const $q = useQuasar();

    const driverFAQs = ref([
      {
        question: 'Come pubblico un viaggio?',
        answer: 'Dalla homepage, clicca su "Offri passaggio". Inserisci partenza, destinazione, data e ora, seleziona il veicolo e il numero di posti disponibili. Aggiungi eventuali note e pubblica!'
      },
      {
        question: 'Posso modificare un viaggio pubblicato?',
        answer: 'Sì, puoi modificare i dettagli del viaggio finché non ci sono prenotazioni confermate. Vai nei tuoi viaggi e clicca su "Modifica".'
      },
      {
        question: 'Come gestisco le richieste di passaggio?',
        answer: 'Riceverai una notifica per ogni richiesta. Puoi accettare o rifiutare dalla sezione "Richieste". Ti consigliamo di rispondere entro 24 ore.'
      },
      {
        question: 'Cosa succede se devo cancellare un viaggio?',
        answer: 'Puoi cancellare un viaggio dalla sezione "I miei viaggi". I passeggeri verranno avvisati automaticamente. Cancellazioni frequenti potrebbero influire sulla tua reputazione.'
      },
      {
        question: 'Devo registrare il mio veicolo?',
        answer: 'Sì, per offrire passaggi devi registrare almeno un veicolo con i dati richiesti (marca, modello, targa, posti). Questo aiuta i passeggeri a riconoscerti.'
      }
    ]);

    const passengerFAQs = ref([
      {
        question: 'Come cerco un passaggio?',
        answer: 'Dalla homepage, clicca su "Cerca passaggio". Inserisci partenza, destinazione e data. Puoi filtrare i risultati per orario, prezzo e preferenze.'
      },
      {
        question: 'Come prenoto un passaggio?',
        answer: 'Trova un viaggio che ti interessa, clicca su "Richiedi passaggio" e invia un messaggio al conducente. Attendi la conferma prima di considerare il viaggio prenotato.'
      },
      {
        question: 'Come pago il viaggio?',
        answer: 'Il contributo spese viene concordato direttamente tra conducente e passeggero. Solitamente si paga in contanti all\'arrivo o come concordato in chat.'
      },
      {
        question: 'Cosa faccio se il conducente non si presenta?',
        answer: 'Prova prima a contattarlo via chat o telefono. Se non riesci a raggiungerlo, segnala il problema al supporto e lascia un feedback negativo.'
      },
      {
        question: 'Posso cancellare una prenotazione?',
        answer: 'Sì, puoi cancellare dalla sezione "Le mie richieste". Ti chiediamo di avvisare il prima possibile per permettere al conducente di trovare altri passeggeri.'
      }
    ]);

    const goBack = () => router.back();

    const contactSupport = () => {
      $q.dialog({
        title: 'Contatta il supporto',
        message: 'Invia una email a supporto@tuosito.it oppure usa il modulo di contatto.',
        ok: 'OK'
      });
    };

    const openForum = () => {
      $q.dialog({
        title: 'Forum Community',
        message: 'Il forum sarà presto disponibile!',
        ok: 'OK'
      });
    };

    return {
      router,
      driverFAQs,
      passengerFAQs,
      goBack,
      contactSupport,
      openForum
    };
  }
});
</script>

<style lang="scss" scoped>
.help-page {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  min-height: 100vh;
  padding-bottom: 40px;

  &__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    h1 { font-size: 20px; font-weight: 600; margin: 0; }
    p { margin: 4px 0 0; opacity: 0.85; font-size: 14px; }
  }

  &__hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px 20px;
    text-align: center;

    h2 { font-size: 22px; font-weight: 600; margin: 16px 0 8px; }
    p { opacity: 0.9; margin: 0; font-size: 14px; }
  }

  &__hero-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  &__quick-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    margin-top: -20px;
  }

  &__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;

    span { font-size: 12px; color: #555; font-weight: 500; }
  }

  &__action-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s;

    &:hover { transform: translateY(-2px); }

    &--offer { background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%); }
    &--search { background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%); }
    &--request { background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%); }
  }

  &__content { padding: 16px; }

  &__section {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);

    &--safety { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); }
    &--contact { text-align: center; p { color: #666; margin-bottom: 20px; } }
  }

  &__section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px;
    .q-icon { color: #667eea; }
  }

  &__steps { display: flex; flex-direction: column; gap: 16px; }

  &__step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  &__step-number {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
  }

  &__step-content {
    h4 { margin: 0 0 4px; font-size: 15px; color: #333; }
    p { margin: 0; font-size: 13px; color: #666; line-height: 1.5; }
  }

  &__faq-item {
    margin-bottom: 8px;
    :deep(.q-expansion-item__container) { border-radius: 8px; overflow: hidden; }
    :deep(.q-item__label) { font-weight: 500; }
  }

  &__safety-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  &__safety-item {
    text-align: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;

    h4 { margin: 12px 0 4px; font-size: 14px; color: #333; }
    p { margin: 0; font-size: 12px; color: #666; }
  }

  &__tips { display: flex; flex-direction: column; gap: 12px; }

  &__tip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 10px;

    span { font-size: 13px; color: #555; }
  }

  &__contact-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.body--dark {
  .help-page {
    background: linear-gradient(135deg, #1a1a2e 0%, #16162a 100%);
    &__section { background: #1e1e30; &--safety { background: rgba(76, 175, 80, 0.1); } }
    &__section-title { color: #fff; }
    &__step-content { h4 { color: #fff; } p { color: #aaa; } }
    &__safety-item { background: rgba(255, 255, 255, 0.05); h4 { color: #fff; } }
    &__tip { background: rgba(255, 255, 255, 0.05); span { color: #ccc; } }
    &__action span { color: #ccc; }
  }
}
</style>
