---
// Impostazioni: profilo, notifiche, account. I campi sono ancora un modulo dimostrativo —
// non c'è un endpoint di salvataggio — ma la struttura è quella definitiva.
import StressIndex from '../../../layouts/StressIndex.astro';
import Card from '../../../components/stress-index/Card.astro';
import { professional } from '../../../lib/stress-index/data';
export const prerender = false;

const [nome = '', cognome = ''] = professional.name.replace(/^Dr\.?\s*/i, '').split(' ');
const GIORNI = ['Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato', 'Domenica'];
const ORE = ['07:00', '08:00', '09:00', '18:00', '19:00', '20:00'];
const TABS = [
  { key: 'profilo', label: 'Profilo' },
  { key: 'notifiche', label: 'Notifiche' },
  { key: 'account', label: 'Account' },
];
---
<StressIndex title="Impostazioni" crumbs={['Impostazioni']}>
  <div class="si-head">
    <h1>Impostazioni</h1>
    <p>Profilo, notifiche e account</p>
  </div>

  <div class="si-tabs" role="tablist" id="si-set-tabs">
    {TABS.map((t, i) => (
      <button type="button" role="tab" class="si-tabs__btn" data-tab={t.key} aria-selected={i === 0 ? 'true' : 'false'}>{t.label}</button>
    ))}
  </div>

  <section data-panel="profilo" class="si-stack">
    <Card title="Dati professionista">
      <div class="si-form-grid">
        <label class="si-field">Titolo<input type="text" value="Dr." /></label>
        <label class="si-field">Professione<input type="text" value={professional.role} /></label>
        <label class="si-field">Nome<input type="text" value={nome} /></label>
        <label class="si-field">Cognome<input type="text" value={cognome} /></label>
        <label class="si-field">Specializzazione<input type="text" value={professional.role} /></label>
      </div>
    </Card>

    <Card title="Studio">
      <div class="si-form-grid">
        <label class="si-field">Nome studio<input type="text" value={professional.studio} /></label>
        <label class="si-field">Indirizzo<input type="text" placeholder="Via Roma 1, Bologna" /></label>
        <label class="si-field">Telefono<input type="tel" placeholder="+39 051 123456" /></label>
        <label class="si-field">Sito web<input type="url" placeholder="https://studio.it" /></label>
      </div>
      <p class="si-mt"><button type="button" class="si-btn si-btn--solid">Salva</button></p>
    </Card>
  </section>

  <section data-panel="notifiche" hidden>
    <Card title="Preferenze di notifica">
      <ul class="si-list si-list--rows si-prefs">
        <li>
          <span>
            <strong>Riassunto settimanale via email</strong>
            <span class="si-muted si-small">Un riepilogo periodico dell'andamento dei clienti</span>
          </span>
          <input type="checkbox" checked />
        </li>
        <li>
          <span>
            <strong>Alert immediati</strong>
            <span class="si-muted si-small">Email non appena viene generato un alert cliente</span>
          </span>
          <input type="checkbox" checked />
        </li>
        <li>
          <span>
            <strong>Novità di prodotto</strong>
            <span class="si-muted si-small">Aggiornamenti sulle nuove funzionalità</span>
          </span>
          <input type="checkbox" />
        </li>
      </ul>
      <div class="si-form-grid si-mt">
        <label class="si-field">Giorno dell'invio
          <select>{GIORNI.map((g) => <option>{g}</option>)}</select>
        </label>
        <label class="si-field">Ora dell'invio
          <select>{ORE.map((o) => <option>{o}</option>)}</select>
        </label>
      </div>
      <p class="si-mt"><button type="button" class="si-btn si-btn--solid">Salva preferenze</button></p>
    </Card>
  </section>

  <section data-panel="account" hidden class="si-stack">
    <Card title="Accesso">
      <label class="si-field">Email<input type="email" value={professional.email} readonly /></label>
      <p class="si-muted si-small si-mt">Per cambiare l'indirizzo email serve una richiesta al supporto.</p>
      <div class="si-form-grid si-mt">
        <label class="si-field">Password attuale<input type="password" autocomplete="current-password" /></label>
        <label class="si-field">Nuova password<input type="password" autocomplete="new-password" /></label>
        <label class="si-field">Conferma nuova password<input type="password" autocomplete="new-password" /></label>
      </div>
      <p class="si-mt"><button type="button" class="si-btn si-btn--solid">Aggiorna password</button></p>
    </Card>

    <Card title="Abbonamento">
      <p class="si-muted si-small">Per il piano e la fatturazione fa riferimento al supporto Stress Index.</p>
    </Card>

    <p><a class="si-btn" href="/admin/logout">Esci dall'account</a></p>
  </section>
</StressIndex>

<script>
  const tabs = document.getElementById('si-set-tabs');
  if (tabs) {
    const buttons = Array.from(tabs.querySelectorAll<HTMLButtonElement>('.si-tabs__btn'));
    const panels = Array.from(document.querySelectorAll<HTMLElement>('[data-panel]'));
    for (const btn of buttons) {
      btn.addEventListener('click', () => {
        for (const b of buttons) b.setAttribute('aria-selected', String(b === btn));
        for (const p of panels) p.hidden = p.dataset.panel !== btn.dataset.tab;
      });
    }
  }
</script>