<template>
  <section class="content-grid">
    <v-card class="metric span-3">
      <div class="metric-label">Assigned</div>
      <div class="metric-value">{{ summary.active_assignments || 0 }}</div>
      <div class="metric-subtle">Assets with active custody</div>
    </v-card>
    <v-card class="metric span-3">
      <div class="metric-label">Unassigned</div>
      <div class="metric-value">{{ summary.unassigned_assets || 0 }}</div>
      <div class="metric-subtle">Need owner/location review</div>
    </v-card>
    <v-card class="metric span-3">
      <div class="metric-label">Employees</div>
      <div class="metric-value">{{ employees.length }}</div>
      <div class="metric-subtle">Manual or Workday synced</div>
    </v-card>
    <v-card class="metric span-3">
      <div class="metric-label">Locations</div>
      <div class="metric-value">{{ summary.assigned_locations || 0 }}</div>
      <div class="metric-subtle">Active assignment sites</div>
    </v-card>

    <v-card class="span-5 panel-pad">
      <h2 class="section-title mb-4">Assign asset</h2>
      <v-select v-model="assignmentForm.asset_id" :items="assetOptions" item-title="title" item-value="value" label="Asset" />
      <v-select v-model="assignmentForm.employee_id" :items="employeeOptions" item-title="title" item-value="value" clearable label="Employee" @update:model-value="applyEmployeeDefaults" />
      <v-text-field v-model="assignmentForm.department" label="Department" />
      <v-text-field v-model="assignmentForm.location" label="Location" />
      <v-textarea v-model="assignmentForm.notes" label="Notes" rows="2" />
      <v-btn color="primary" prepend-icon="mdi-account-check" :loading="assignmentSaving" @click="$emit('assign-asset', assignmentForm)">Assign asset</v-btn>
    </v-card>

    <v-card class="span-7 panel-pad">
      <div class="toolbar-row mb-4">
        <h2 class="section-title">Employees</h2>
        <v-spacer />
        <v-btn variant="tonal" prepend-icon="mdi-account-plus" @click="employeeDialog = true">Add employee</v-btn>
      </div>
      <DataTable
        :columns="employeeColumns"
        :rows="employees"
        row-key="id"
        :page-size="10"
        searchable
        search-placeholder="Filter employees"
        empty-text="No employees yet."
      >
        <template #cell-name="{ row }">
          <span class="font-weight-bold">{{ row.name }}</span>
        </template>
        <template #cell-source="{ row }">
          <v-chip size="small" variant="tonal">{{ row.source }}</v-chip>
        </template>
      </DataTable>
    </v-card>

    <v-card class="span-12 panel-pad">
      <div class="toolbar-row mb-4">
        <h2 class="section-title">Traceability</h2>
        <v-spacer />
        <v-btn variant="tonal" prepend-icon="mdi-refresh" @click="$emit('reload')">Refresh</v-btn>
      </div>
      <DataTable
        :columns="assignmentColumns"
        :rows="assignments"
        row-key="id"
        has-actions
        searchable
        search-placeholder="Filter assignments"
        empty-text="No assignment history yet."
      >
        <template #cell-asset_code="{ row }">
          <strong>{{ row.asset_code }}</strong><br />
          <span class="quiet">{{ row.asset_description }}</span>
        </template>
        <template #cell-employee_name="{ row }">{{ row.employee_name || 'Unassigned employee' }}</template>
        <template #cell-department="{ row }">{{ row.department || '-' }}</template>
        <template #cell-location="{ row }">{{ row.location || '-' }}</template>
        <template #cell-status="{ row }">
          <span :class="['status-chip', row.active ? 'status-in_service' : 'status-disposed']">{{ row.status }}</span>
        </template>
        <template #actions="{ row }">
          <v-btn v-if="row.active" size="small" variant="text" color="warning" @click="$emit('release-assignment', row)">Release</v-btn>
        </template>
      </DataTable>
    </v-card>

    <v-dialog v-model="employeeDialog" max-width="480">
      <v-card>
        <v-card-title>Add employee</v-card-title>
        <v-card-text>
          <v-text-field v-model="employeeForm.name" label="Name" />
          <v-text-field v-model="employeeForm.email" label="Email" />
          <v-text-field v-model="employeeForm.employee_number" label="Employee number" />
          <v-text-field v-model="employeeForm.department" label="Department" />
          <v-text-field v-model="employeeForm.location" label="Location" />
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn variant="text" @click="employeeDialog = false">Cancel</v-btn>
          <v-btn color="primary" @click="saveEmployee">Save employee</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </section>
</template>

<script>
import DataTable from '../components/DataTable.vue';

export default {
  components: { DataTable },
  props: {
    assignments: { type: Array, required: true },
    assets: { type: Array, required: true },
    assignmentSaving: { type: Boolean, default: false },
    employees: { type: Array, required: true },
    shortDate: { type: Function, required: true },
    summary: { type: Object, required: true }
  },
  emits: ['add-employee', 'assign-asset', 'release-assignment', 'reload'],
  data() {
    return {
      assignmentColumns: [
        { key: 'asset_code', label: 'Asset' },
        { key: 'employee_name', label: 'Employee' },
        { key: 'department', label: 'Department' },
        { key: 'location', label: 'Location' },
        { key: 'assigned_at', label: 'Assigned', format: 'date' },
        { key: 'status', label: 'Status' }
      ],
      employeeColumns: [
        { key: 'name', label: 'Name' },
        { key: 'email', label: 'Email' },
        { key: 'employee_number', label: 'Emp #' },
        { key: 'department', label: 'Department' },
        { key: 'location', label: 'Location' },
        { key: 'source', label: 'Source' }
      ],
      assignmentForm: {
        asset_id: null,
        employee_id: null,
        department: '',
        location: '',
        notes: ''
      },
      employeeDialog: false,
      employeeForm: {
        name: '',
        email: '',
        employee_number: '',
        department: '',
        location: ''
      }
    };
  },
  computed: {
    assetOptions() {
      return this.assets.map((asset) => ({
        title: `${asset.asset_id} · ${asset.description}`,
        value: asset.id
      }));
    },
    employeeOptions() {
      return this.employees.map((employee) => ({
        title: `${employee.name}${employee.department ? ` · ${employee.department}` : ''}`,
        value: employee.id
      }));
    }
  },
  methods: {
    applyEmployeeDefaults(id) {
      const employee = this.employees.find((item) => item.id === id);
      if (!employee) return;
      this.assignmentForm.department = employee.department || '';
      this.assignmentForm.location = employee.location || '';
    },
    saveEmployee() {
      this.$emit('add-employee', { ...this.employeeForm });
      this.employeeDialog = false;
      this.employeeForm = { name: '', email: '', employee_number: '', department: '', location: '' };
    }
  }
};
</script>
