<template>
  <v-dialog :model-value="modelValue" max-width="660" scrollable @update:model-value="$emit('update:modelValue', $event)">
    <v-card v-if="completion">
      <v-card-title>PM completion — {{ completion.asset_code }}</v-card-title>
      <v-card-text>
        <div class="quiet text-body-2 mb-3">
          {{ completion.plan_name || 'Maintenance' }} · completed {{ completion.completed_at }}
          by {{ completion.completed_by_name || 'Unknown' }} · cost {{ currency(completion.cost) }}
        </div>

        <div class="rating-row mb-3">
          <div><div class="quiet text-caption">Safety / is it safe?</div><v-rating :model-value="completion.ratings.safety || 0" length="5" readonly density="compact" color="amber" size="small" /></div>
          <div><div class="quiet text-caption">Physical condition</div><v-rating :model-value="completion.ratings.physical || 0" length="5" readonly density="compact" color="amber" size="small" /></div>
          <div><div class="quiet text-caption">Operating condition</div><v-rating :model-value="completion.ratings.operating || 0" length="5" readonly density="compact" color="amber" size="small" /></div>
        </div>

        <template v-if="completion.steps.length">
          <h3 class="section-title mb-1">Steps</h3>
          <div v-for="(s, i) in completion.steps" :key="`s${i}`" class="text-body-2">
            <v-icon :icon="s.done ? 'mdi-check-circle' : 'mdi-circle-outline'" :color="s.done ? 'success' : ''" size="16" /> {{ s.title }}
          </div>
        </template>

        <template v-if="completion.notes.length">
          <h3 class="section-title mt-3 mb-1">Completion notes</h3>
          <ul class="pl-4">
            <li v-for="(n, i) in completion.notes" :key="`n${i}`" class="text-body-2">{{ n }}</li>
          </ul>
        </template>

        <template v-if="completion.components.length">
          <h3 class="section-title mt-3 mb-1">Parts</h3>
          <div v-for="(c, i) in completion.components" :key="`c${i}`" class="d-flex text-body-2">
            <span>{{ c.part_number ? c.part_number + ' · ' : '' }}{{ c.description }}</span>
            <v-spacer /><span>{{ currency(c.cost) }}</span>
          </div>
        </template>

        <template v-if="completion.photos.length">
          <h3 class="section-title mt-3 mb-1">Photos</h3>
          <div class="pm-photo-grid">
            <a v-for="p in completion.photos" :key="p.id" :href="p.data" target="_blank" rel="noopener">
              <img :src="p.data" class="pm-photo" :alt="p.name || 'photo'" />
            </a>
          </div>
        </template>

        <template v-if="completion.signature">
          <h3 class="section-title mt-3 mb-1">Signature</h3>
          <img :src="completion.signature" class="pm-signature" alt="signature" />
        </template>
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="$emit('update:modelValue', false)">Close</v-btn>
      </v-card-actions>
    </v-card>
    <v-card v-else>
      <v-card-text class="quiet">Loading…</v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
import { apiRequest } from '../services/api';
import { currency } from '../utils/format';

export default {
  props: {
    token: { type: String, required: true },
    modelValue: { type: Boolean, default: false },
    completionId: { type: [Number, String], default: null }
  },
  emits: ['update:modelValue'],
  data() {
    return { completion: null };
  },
  watch: {
    completionId() {
      if (this.modelValue) this.load();
    },
    modelValue(open) {
      if (open) this.load();
    }
  },
  methods: {
    currency,
    async load() {
      this.completion = null;
      if (!this.completionId) return;
      const data = await (await apiRequest(`/api/pm-completions/${this.completionId}`, this.token)).json();
      this.completion = data.completion;
    }
  }
};
</script>

<style scoped>
.rating-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.pm-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pm-photo {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(var(--v-theme-on-surface), 0.2);
}
.pm-signature {
  max-width: 100%;
  border: 1px solid rgba(var(--v-theme-on-surface), 0.2);
  border-radius: 8px;
  background: #fff;
}
</style>
