<template>
  <div class="intervention-page">

    <!-- ── Top Navigation Bar ── -->
    <div class="page-topbar">
      <router-link to="/interventions" class="back-btn">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
        Interventions
      </router-link>

      <div v-if="intervention" class="topbar-center">
        <span class="topbar-id">#{{ intervention.id }}</span>
        <span class="topbar-divider">·</span>
        <span class="topbar-name">{{ getDeceasedName(intervention) }}</span>
      </div>

      <div class="topbar-right">
        <div v-if="interventionStore.isLoading" class="topbar-loading">
          <div class="mini-spinner"></div>
        </div>
      </div>
    </div>

    <!-- ── Loading ── -->
    <div v-if="interventionStore.isLoading && !intervention" class="fullpage-center">
      <div class="loading-orb"></div>
      <p class="loading-text">Chargement de l'intervention…</p>
    </div>

    <!-- ── Error ── -->
    <div v-else-if="interventionStore.getError && !intervention" class="fullpage-center">
      <div class="state-icon error-icon">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
      </div>
      <h3 class="state-title">Erreur de chargement</h3>
      <p class="state-desc">{{ interventionStore.getError }}</p>
      <router-link to="/interventions" class="btn-primary">Retour à la liste</router-link>
    </div>

    <!-- ── Main Layout ── -->
    <div v-else-if="intervention" class="page-layout">

      <!-- LEFT SIDEBAR -->
      <aside class="sidebar">
        <!-- Hero -->
        <div class="hero-card">
          <div class="hero-avatar">
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
              <circle cx="9" cy="7" r="4"/>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
          </div>
          <h2 class="hero-name">{{ getDeceasedName(intervention) }}</h2>
          <p class="hero-type">{{ getTypeLabel(intervention.type) }}</p>
          <StatusBadge :status="intervention.status" />
        </div>

        <!-- Quick Stats -->
        <div class="quick-stats">
          <QuickStat color="#4f46e5" :label="'Date'" :value="formatDate(intervention.scheduled_at)">
            <template #icon><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></template>
          </QuickStat>
          <QuickStat color="#059669" :label="'Lieu'" :value="intervention.location?.name || 'Non défini'">
            <template #icon><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></template>
          </QuickStat>
          <QuickStat color="#d97706" :label="'Durée'" :value="intervention.duration_min ? intervention.duration_min + ' min' : 'Non définie'">
            <template #icon><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></template>
          </QuickStat>
        </div>

        <!-- Tab Nav -->
        <nav class="tab-nav">
          <button
            v-for="tab in tabs"
            :key="tab.id"
            class="tab-item"
            :class="{ active: activeTab === tab.id }"
            @click="activeTab = tab.id"
          >
            <span class="tab-icon" v-html="tab.icon"></span>
            <span class="tab-label">{{ tab.label }}</span>
            <span v-if="tab.badge" class="tab-badge">{{ tab.badge }}</span>
          </button>
        </nav>

        <!-- Assign Button -->
        <button class="assign-cta" @click="openAssignModal">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
          Assigner un praticien
        </button>
      </aside>

      <!-- MAIN CONTENT -->
      <main class="main-content">

        <!-- OVERVIEW -->
        <section v-if="activeTab === 'overview'" class="tab-section">
          <SectionHeader title="Vue d'ensemble" />
          <div class="info-grid">
            <InfoCard title="Informations générales" accent="#4f46e5">
              <template #icon><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M6 20v-2a6 6 0 0 1 12 0v2"/></svg></template>
              <DataRow label="Nom du défunt"   :value="getDeceasedName(intervention)" />
              <DataRow label="Date prévue"     :value="formatDate(intervention.scheduled_at)" />
              <DataRow label="Lieu"            :value="intervention.location?.name || 'Non défini'" />
              <DataRow label="Durée"           :value="intervention.duration_min ? intervention.duration_min + ' min' : 'Non définie'" />
            </InfoCard>

            <InfoCard title="Contact & Communication" accent="#10b981">
              <template #icon><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.16 6.16l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 17z"/></svg></template>
              <DataRow label="Contact familial"  :value="intervention.order_giver || 'Non renseigné'" />
              <DataRow label="Email / Tél."      :value="intervention.client ? (intervention.client.email || intervention.client.phone || '-') : '-'" />
              <DataRow label="Type intervention" :value="getTypeLabel(intervention.type)" />
            </InfoCard>

            <InfoCard title="Notes & Description" accent="#8b5cf6" class="full-col">
              <template #icon><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></template>
              <p class="notes-text">{{ intervention.notes || 'Aucune description disponible.' }}</p>
            </InfoCard>
          </div>
        </section>

        <!-- DETAILS -->
        <section v-if="activeTab === 'details'" class="tab-section">
          <SectionHeader title="Détails de l'intervention" />
          <div class="card-wrap">
            <!-- Editable form fields -->
            <div class="edit-form">
              <div class="form-row">
                <div class="form-group">
                  <label>Type d'intervention</label>
                  <select v-model="editForm.type" class="form-select">
                    <option value="thanatopraxie">Thanatopraxie</option>
                    <option value="toilette_mortuaire">Toilette mortuaire</option>
                    <option value="exhumation">Exhumation</option>
                    <option value="retrait_pacemaker">Retrait pacemaker</option>
                    <option value="retrait_bijoux">Retrait bijoux</option>
                    <option value="autre">Autre</option>
                  </select>
                </div>
                <div class="form-group">
                  <label>Statut</label>
                  <select v-model="editForm.status" class="form-select">
                    <option value="demande">Demande</option>
                    <option value="planifie">Planifié</option>
                    <option value="en_cours">En cours</option>
                    <option value="termine">Terminé</option>
                    <option value="annule">Annulé</option>
                  </select>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group">
                  <label>Date prévue</label>
                  <input type="datetime-local" v-model="editForm.scheduled_at" class="form-input" />
                </div>
                <div class="form-group">
                  <label>Durée (minutes)</label>
                  <input type="number" v-model="editForm.duration_min" class="form-input" min="0" />
                </div>
              </div>
              <div class="form-group">
                <label>Contact familial (donneur d'ordre)</label>
                <input type="text" v-model="editForm.order_giver" class="form-input" />
              </div>
              <div class="form-group">
                <label>Notes</label>
                <textarea v-model="editForm.notes" class="form-textarea" rows="4" placeholder="Ajouter des notes…"></textarea>
              </div>
              <div class="form-actions">
                <button class="btn-ghost" @click="resetForm">Annuler</button>
                <button class="btn-primary" :disabled="interventionStore.isLoading" @click="submitUpdate">
                  <span v-if="interventionStore.isLoading" class="mini-spinner white"></span>
                  Enregistrer les modifications
                </button>
              </div>
            </div>
          </div>
        </section>

        <!-- TEAM -->
        <section v-if="activeTab === 'team'" class="tab-section">
          <SectionHeader title="Équipe assignée">
            <button class="btn-primary sm" @click="openAssignModal">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
              Ajouter
            </button>
          </SectionHeader>

          <div v-if="intervention.practitioners?.length" class="practitioner-grid">
            <div v-for="(p, i) in intervention.practitioners" :key="i" class="practitioner-card">
              <div class="pract-avatar">{{ getInitials(getPractName(p)) }}</div>
              <div class="pract-info">
                <div class="pract-name">{{ getPractName(p) }}</div>
                <span class="role-chip" :class="p.pivot?.role === 'principal' ? 'chip-principal' : 'chip-assistant'">
                  {{ p.pivot?.role === 'principal' ? 'Principal' : 'Assistant' }}
                </span>
              </div>
              <button class="unassign-btn" title="Désassigner" @click="handleUnassign(p)">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
              </button>
            </div>
          </div>

          <EmptyState v-else icon="team" message="Aucun praticien assigné">
            <button class="btn-primary sm" @click="openAssignModal">Assigner maintenant</button>
          </EmptyState>
        </section>

        <!-- DOCUMENTS -->
        <section v-if="activeTab === 'documents'" class="tab-section">
          <SectionHeader title="Documents" />
          <DocumentManagement
            :documents="documentAttachments"
            :loading="documentStore.isLoading"
            :error="documentStore.getError"
            @files-selected="() => {}"
            @upload-files="handleUploadFiles"
            @delete-document="handleDeleteDocument"
            @delete-documents="handleDeleteDocuments"
            @update-document-label="handleUpdateDocumentLabel"
            @retry="loadDocuments"
          />
        </section>

        <!-- QUOTE -->
        <section v-if="activeTab === 'quote'" class="tab-section">
          <SectionHeader title="Devis associé">
            <router-link v-if="intervention.quote?.id" :to="`/ventes/devis/${intervention.quote.id}`" class="btn-primary sm">
              Ouvrir le devis
            </router-link>
          </SectionHeader>

          <div v-if="intervention.quote">
            <div class="info-grid">
              <InfoCard title="Informations" accent="#3b82f6">
                <template #icon><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></template>
                <DataRow label="Référence" :value="intervention.quote.reference" />
                <DataRow label="Date"      :value="intervention.quote.quote_date" />
                <DataRow label="Validité"  :value="intervention.quote.valid_until" />
                <div class="data-row">
                  <span class="data-label">Statut</span>
                  <span class="status-chip" :class="'sc-' + getQuoteColor(intervention.quote.status)">{{ getQuoteLabel(intervention.quote.status) }}</span>
                </div>
              </InfoCard>
              <InfoCard title="Montants" accent="#10b981">
                <template #icon><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></template>
                <DataRow label="Total HT"  :value="fmtCurrency(intervention.quote.total_ht)" />
                <DataRow label="Total TVA" :value="fmtCurrency(intervention.quote.total_tva)" />
                <DataRow label="Total TTC" :value="fmtCurrency(intervention.quote.total_ttc)" :bold="true" />
              </InfoCard>
            </div>

            <div v-if="intervention.quote.lines?.length" class="quote-lines">
              <div class="lines-title">Lignes du devis</div>
              <div class="table-wrap">
                <table class="data-table">
                  <thead><tr><th>Description</th><th class="tc">Qté</th><th class="tr">PU HT</th><th class="tr">Total HT</th></tr></thead>
                  <tbody>
                    <tr v-for="l in intervention.quote.lines" :key="l.id">
                      <td>{{ l.description || '-' }}</td>
                      <td class="tc">{{ l.units_qty || 0 }}</td>
                      <td class="tr">{{ fmtCurrency(l.unit_price) }}</td>
                      <td class="tr fw6">{{ fmtCurrency(l.total_ht) }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <EmptyState v-else icon="quote" message="Aucun devis associé à cette intervention" />
        </section>

        <!-- HISTORY -->
        <section v-if="activeTab === 'history'" class="tab-section">
          <SectionHeader title="Historique" />
          <EmptyState icon="history" message="Historique des modifications">
            <span class="coming-soon-chip">Fonctionnalité à venir</span>
          </EmptyState>
        </section>

      </main>
    </div>

    <!-- Assign Modal -->
    <AssignPractitionerModal
      :is-open="isModalOpen"
      @close="closeAssignModal"
      @assign="handleAssignPractitioner"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, defineComponent, h } from 'vue';
import { useRoute, RouterLink } from 'vue-router';
import { useInterventionStore } from '@/stores/interventionStore';
import { useNotificationStore } from '@/stores/notification';
import { useDocumentAttachmentStore } from '@/stores/documentAttachmentStore';
import DocumentManagement from '@/components/molecules/Interventions/DocumentManagement.vue';
import AssignPractitionerModal from '@/components/molecules/intervention/AssignPractitionerModal.vue';

// ── Inline sub-components ──────────────────────────────────────────────────
const StatusBadge = {
  props: { status: String },
  setup(props) {
    const map = { demande: ['warning','Demande'], planifie: ['info','Planifié'], en_cours: ['primary','En cours'], termine: ['success','Terminé'], annule: ['danger','Annulé'] };
    const [color, label] = map[props.status] || ['secondary', props.status || 'En attente'];
    return () => h('span', { class: `status-badge sb-${color}` }, label);
  }
};

const QuickStat = {
  props: { label: String, value: String, color: String },
  template: `
    <div class="qs-item">
      <div class="qs-icon" :style="{ background: color + '18', color }"><slot name="icon"/></div>
      <div><div class="qs-label">{{ label }}</div><div class="qs-value">{{ value || '-' }}</div></div>
    </div>
  `
};

const InfoCard = {
  props: { title: String, accent: String },
  template: `
    <div class="info-card">
      <div class="info-card-header" :style="{ '--a': accent }">
        <span class="ic-icon"><slot name="icon"/></span>
        <span class="ic-title">{{ title }}</span>
      </div>
      <div class="info-card-body"><slot/></div>
    </div>
  `
};

const DataRow = {
  props: { label: String, value: String, bold: Boolean },
  template: `
    <div class="data-row">
      <span class="data-label">{{ label }}</span>
      <span class="data-value" :class="bold ? 'fw6' : ''">{{ value || '-' }}</span>
    </div>
  `
};

const SectionHeader = {
  props: { title: String },
  template: `<div class="section-header"><h3 class="section-title">{{ title }}</h3><slot/></div>`
};

const EmptyState = {
  props: { icon: String, message: String },
  setup(props, { slots }) {
    const icons = {
      team:    `<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="23" y1="11" x2="17" y2="11"/><line x1="20" y1="8" x2="20" y2="14"/></svg>`,
      quote:   `<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`,
      history: `<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.5"/></svg>`,
    };
    return () => h('div', { class: 'empty-state' }, [
      h('div', { class: 'empty-icon', innerHTML: icons[props.icon] || icons.team }),
      h('p', { class: 'empty-msg' }, props.message),
      slots.default?.(),
    ]);
  }
};

// ── Setup ──────────────────────────────────────────────────────────────────
const route             = useRoute();
const interventionStore = useInterventionStore();
const notifStore        = useNotificationStore();
const documentStore     = useDocumentAttachmentStore();

const intervention  = ref(null);
const activeTab     = ref('overview');
const isModalOpen   = ref(false);
const editForm      = ref({});

const documentAttachments = computed(() =>
  documentStore.getInterventionAttachments(intervention.value?.id || 0)
);

const tabs = computed(() => [
  { id: 'overview',  label: "Vue d'ensemble", icon: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>` },
  { id: 'details',   label: 'Détails',         icon: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>` },
  { id: 'team',      label: 'Équipe',           icon: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`, badge: intervention.value?.practitioners?.length || null },
  { id: 'documents', label: 'Documents',        icon: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>` },
  { id: 'quote',     label: 'Devis',            icon: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>` },
  { id: 'history',   label: 'Historique',       icon: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.5"/></svg>` },
]);

// ── Helpers ────────────────────────────────────────────────────────────────
const getDeceasedName = i => i?.deceased
  ? `${i.deceased.last_name || ''} ${i.deceased.first_name || ''}`.trim()
  : `Personne ${i?.deceased_id || 'inconnue'}`;

const formatDate = v => v ? new Date(v).toLocaleString('fr-FR') : 'Non définie';
const getTypeLabel = t => ({ thanatopraxie:'Thanatopraxie', toilette_mortuaire:'Toilette mortuaire', exhumation:'Exhumation', retrait_pacemaker:'Retrait pacemaker', retrait_bijoux:'Retrait bijoux', autre:'Autre' }[t] || t || 'Type non défini');
const getQuoteLabel = s => ({ brouillon:'Brouillon', envoye:'Envoyé', accepte:'Accepté', refuse:'Refusé', expire:'Expiré' }[s] || s || 'Inconnu');
const getQuoteColor = s => ({ brouillon:'secondary', envoye:'info', accepte:'success', refuse:'danger', expire:'warning' }[s] || 'secondary');
const fmtCurrency   = v => new Intl.NumberFormat('fr-FR', { style:'currency', currency:'EUR' }).format(Number(v || 0));
const getPractName  = p => p.employee ? `${p.employee.first_name || ''} ${p.employee.last_name || ''}`.trim() : `${p.first_name || ''} ${p.last_name || ''}`.trim();
const getInitials   = n => n ? n.split(' ').map(w => w[0]).join('').toUpperCase().substring(0,2) : '?';

// ── Edit form ──────────────────────────────────────────────────────────────
const resetForm = () => {
  if (!intervention.value) return;
  editForm.value = {
    type: intervention.value.type || '',
    status: intervention.value.status || '',
    scheduled_at: intervention.value.scheduled_at ? intervention.value.scheduled_at.substring(0,16) : '',
    duration_min: intervention.value.duration_min || '',
    order_giver: intervention.value.order_giver || '',
    notes: intervention.value.notes || '',
  };
};

const submitUpdate = async () => {
  try {
    const result = await interventionStore.updateIntervention({ id: intervention.value.id, ...editForm.value });
    intervention.value = result;
    notifStore.updated('Intervention');
  } catch (e) {
    notifStore.error('Erreur', 'Impossible de mettre à jour');
  }
};

// ── Data fetch ─────────────────────────────────────────────────────────────
const fetchIntervention = async () => {
  try {
    const id = parseInt(route.params.id);
    if (id) {
      intervention.value = await interventionStore.fetchInterventionById(id);
      resetForm();
    }
  } catch (e) {
    notifStore.error('Erreur', 'Impossible de charger l\'intervention');
  }
};

// ── Modal & assignment ─────────────────────────────────────────────────────
const openAssignModal  = () => { isModalOpen.value = true; };
const closeAssignModal = () => { isModalOpen.value = false; };

const handleAssignPractitioner = async (data) => {
  try {
    const payload = data.role === 'principal'
      ? { principal_practitioner_id: data.practitionerId }
      : { assistant_practitioner_ids: [data.practitionerId] };
    await interventionStore.assignPractitioner(intervention.value.id, payload);
    await fetchIntervention();
    notifStore.created('Praticien assigné');
    closeAssignModal();
  } catch (e) {
    notifStore.error('Erreur', 'Impossible d\'assigner');
  }
};

const handleUnassign = async (p) => {
  try {
    await interventionStore.unassignPractitioner(intervention.value.id, p.id);
    await fetchIntervention();
    notifStore.updated('Praticien désassigné');
  } catch (e) {
    notifStore.error('Erreur', 'Impossible de désassigner');
  }
};

// ── Documents ──────────────────────────────────────────────────────────────
const loadDocuments = async () => {
  if (!intervention.value?.id) return;
  try { await documentStore.fetchInterventionFiles(intervention.value.id); }
  catch (e) { documentStore.clearError(); }
};
const handleUploadFiles = async files => {
  if (!intervention.value?.id || !files.length) return;
  try { await documentStore.uploadAndAttachFiles(files, 'App\\Models\\Intervention', intervention.value.id); }
  catch { documentStore.clearError(); }
};
const handleDeleteDocument  = async id  => { try { await documentStore.detachFile(id); } catch { documentStore.clearError(); } };
const handleDeleteDocuments = async ids => { try { await documentStore.detachMultipleFiles({ attachment_ids: ids }); } catch { documentStore.clearError(); } };
const handleUpdateDocumentLabel = async ({ id, label }) => { try { await documentStore.updateAttachmentMetadata(id, { label }); } catch { documentStore.clearError(); } };

// ── Watchers & lifecycle ───────────────────────────────────────────────────
watch(() => interventionStore.currentIntervention, v => { if (v) intervention.value = v; }, { deep: true });
watch(activeTab, tab => { if (tab === 'documents' && intervention.value?.id) loadDocuments(); });
onMounted(fetchIntervention);
</script>

<style scoped>
/* ── Design tokens ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

.intervention-page {
  --brand:       #4f46e5;
  --brand-lt:    #eef2ff;
  --brand-dk:    #3730a3;
  --surface:     #ffffff;
  --surface-2:   #f8fafc;
  --surface-3:   #f1f5f9;
  --border:      #e2e8f0;
  --border-lt:   #f1f5f9;
  --text-1:      #0f172a;
  --text-2:      #64748b;
  --text-3:      #94a3b8;
  --r-sm:        8px;
  --r-md:        12px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,.08);
  min-height: 100vh;
  
  color: var(--text-1);
  display: flex;
  flex-direction: column;
}

/* ── Top bar ───────────────────────────────────────────────────────────── */
.page-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  text-decoration: none; padding: 5px 10px; border-radius: var(--r-sm);
  transition: background .15s, color .15s;
}
.back-btn:hover { background: var(--surface-3); color: var(--text-1); }
.topbar-center { display: flex; align-items: center; gap: 8px; margin: 0 auto; }
.topbar-id   { font-size: 13px; font-weight: 600; color: var(--text-2); }
.topbar-divider { color: var(--text-3); }
.topbar-name { font-size: 14px; font-weight: 600; color: var(--text-1); }
.topbar-right { margin-left: auto; }
.topbar-loading { display: flex; align-items: center; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.page-layout {
  display: grid;
  grid-template-columns: 272px 1fr;
  flex: 1;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
}

/* Hero */
.hero-card {
  padding: 24px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  border-bottom: 1px solid var(--border-lt);
}
.hero-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  color: white; margin-bottom: 4px;
  box-shadow: 0 4px 14px rgba(79,70,229,.3);
}
.hero-name  { font-size: 15px; font-weight: 700; color: var(--text-1); margin: 0; line-height: 1.3; }
.hero-type  { font-size: 12px; color: var(--text-2); margin: 0; font-weight: 500; }

/* Quick stats */
.quick-stats {
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 10px;
  border-bottom: 1px solid var(--border-lt);
}
.qs-item { display: flex; align-items: flex-start; gap: 10px; }
.qs-icon  { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qs-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); font-weight: 600; }
.qs-value { font-size: 12.5px; color: var(--text-1); font-weight: 500; margin-top: 1px; }

/* Tab nav */
.tab-nav { padding: 10px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.tab-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border-radius: var(--r-sm); border: none; background: transparent; cursor: pointer;
  width: 100%; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--text-2);
  transition: all .12s;
}
.tab-item:hover { background: var(--surface-3); color: var(--text-1); }
.tab-item.active { background: var(--brand-lt); color: var(--brand); font-weight: 600; }
.tab-icon { flex-shrink: 0; display: flex; color: var(--text-3); }
.tab-item.active .tab-icon { color: var(--brand); }
.tab-label { flex: 1; }
.tab-badge {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--brand); color: white; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tab-item.active .tab-badge { background: var(--brand-dk); }

/* Assign CTA */
.assign-cta {
  margin: 0 10px 14px; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px; border: 1.5px dashed var(--border); border-radius: var(--r-sm);
  background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--text-2);
  transition: all .15s;
}
.assign-cta:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-lt); }

/* ── Main content ──────────────────────────────────────────────────────── */
.main-content { padding: 24px 28px; overflow-y: auto; }
.tab-section  { animation: fadeUp .2s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }

.section-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;
}
.section-title { font-size: 17px; font-weight: 700; color: var(--text-1); margin: 0; }

/* ── Info grid ─────────────────────────────────────────────────────────── */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.full-col { grid-column: 1 / -1; }

/* Info card */
.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.info-card-header {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-lt);
  background: var(--surface-2);
}
.ic-icon {
  width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--a, #4f46e5) 14%, transparent);
  color: var(--a, #4f46e5);
}
.ic-title {
  font-size: 11.5px; font-weight: 700; color: var(--text-1);
  text-transform: uppercase; letter-spacing: .6px;
}
.info-card-body { padding: 4px 16px 12px; }

/* Data row */
.data-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-lt); gap: 12px; }
.data-row:last-child { border-bottom: none; }
.data-label { font-size: 12px; color: var(--text-3); font-weight: 500; flex-shrink: 0; }
.data-value { font-size: 13px; color: var(--text-1); text-align: right; }
.fw6 { font-weight: 600; }

.notes-text { font-size: 13.5px; color: var(--text-2); line-height: 1.7; margin: 8px 0 0; }

/* ── Edit form ─────────────────────────────────────────────────────────── */
.card-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 24px; box-shadow: var(--shadow-sm);
}
.edit-form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .4px; }
.form-input, .form-select, .form-textarea {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--text-1); background: var(--surface); outline: none;
  transition: border-color .15s, box-shadow .15s; font-family: inherit;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.1);
}
.form-textarea { resize: vertical; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 4px; }

/* ── Team ──────────────────────────────────────────────────────────────── */
.practitioner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.practitioner-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-sm); transition: box-shadow .15s;
}
.practitioner-card:hover { box-shadow: var(--shadow-md); }
.pract-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.pract-info { flex: 1; }
.pract-name { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.role-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 600; margin-top: 3px; }
.chip-principal { background: #eef2ff; color: #4f46e5; }
.chip-assistant  { background: #f0fdf4; color: #16a34a; }
.unassign-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-3); transition: all .15s; flex-shrink: 0;
}
.unassign-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

/* ── Status badge ──────────────────────────────────────────────────────── */
.status-badge {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 20px; font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
}
.sb-success  { background:#dcfce7; color:#16a34a; }
.sb-warning  { background:#fef9c3; color:#ca8a04; }
.sb-danger   { background:#fee2e2; color:#dc2626; }
.sb-info     { background:#dbeafe; color:#2563eb; }
.sb-primary  { background:#eef2ff; color:#4f46e5; }
.sb-secondary{ background:#f1f5f9; color:#64748b; }

/* Status chip (quote) */
.status-chip { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11.5px; font-weight:600; }
.sc-success  { background:#dcfce7; color:#16a34a; }
.sc-info     { background:#dbeafe; color:#2563eb; }
.sc-warning  { background:#fef9c3; color:#ca8a04; }
.sc-danger   { background:#fee2e2; color:#dc2626; }
.sc-secondary{ background:#f1f5f9; color:#64748b; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--r-sm); border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: white; background: var(--brand);
  text-decoration: none; transition: all .15s;
}
.btn-primary:hover { background: var(--brand-dk); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,.3); }
.btn-primary.sm   { padding: 6px 13px; font-size: 12px; }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--r-sm); border: 1px solid var(--border);
  cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-2); background: transparent;
  transition: all .15s;
}
.btn-ghost:hover { background: var(--surface-3); color: var(--text-1); }

/* ── Quote ─────────────────────────────────────────────────────────────── */
.quote-lines   { margin-top: 18px; }
.lines-title   { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-2); margin-bottom: 10px; }
.table-wrap    { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.data-table    { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead { background: var(--surface-2); }
.data-table th { padding: 10px 16px; font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); text-align: left; }
.data-table td { padding: 11px 16px; border-bottom: 1px solid var(--border-lt); color: var(--text-1); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--surface-2); }
.tc { text-align: center; }
.tr { text-align: right; }

/* ── Empty state ───────────────────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px; text-align: center; gap: 10px; }
.empty-icon  { width: 60px; height: 60px; border-radius: 50%; background: var(--surface-3); display: flex; align-items: center; justify-content: center; color: var(--text-3); margin-bottom: 4px; }
.empty-msg   { font-size: 14px; color: var(--text-2); margin: 0; font-weight: 500; }
.coming-soon-chip { font-size: 11px; color: var(--text-3); background: var(--surface-3); padding: 3px 10px; border-radius: 20px; }

/* ── Loading / error ───────────────────────────────────────────────────── */
.fullpage-center { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 14px; padding: 80px; text-align: center; }
.loading-orb { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--brand); animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 14px; color: var(--text-2); margin: 0; }
.state-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.error-icon { background: #fee2e2; color: #dc2626; }
.state-title { font-size: 18px; font-weight: 700; margin: 0; }
.state-desc  { font-size: 14px; color: var(--text-2); margin: 0; }

.mini-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(79,70,229,.3); border-top-color: var(--brand); animation: spin .6s linear infinite; display: inline-block; }
.mini-spinner.white { border-color: rgba(255,255,255,.3); border-top-color: white; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .page-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .tab-nav { flex-direction: row; flex-wrap: wrap; }
  .tab-item { flex: none; }
  .info-grid { grid-template-columns: 1fr; }
  .full-col  { grid-column: 1; }
  .form-row  { grid-template-columns: 1fr; }
  .main-content { padding: 16px; }
}
</style>
