{% extends "base_sidebar.html" %}
{% block title %}LIA – Data Uploads{% endblock %}

{% block topbar %}
<div class="flex items-center justify-between">
  <div>
    <h1 class="text-lg font-semibold text-dp-ink">Data Uploads</h1>
    <p class="text-xs text-gray-500 mt-0.5">Manage monthly snapshots and campaign offers</p>
  </div>
  <div class="flex items-center gap-2 text-xs text-gray-500">
    <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
    <span>Connected to Database</span>
  </div>
</div>
{% endblock %}

{% block content %}
<script>
function uploadsData() {
  return {
    uploadTab: 'snapshot',
    validationPreview: null,
    uploading: false,
    previewRows: [],
    totalRows: 0,
    selectedFileName: '',
    selectedFile: null,
    importError: null,
    importResult: null,
    bookMonth: new Date().toISOString().slice(0, 7),
    
    async confirmImport() {
      if (!this.selectedFile) return;
      
      this.uploading = true;
      this.importError = null;
      
      try {
        const formData = new FormData();
        formData.append('file', this.selectedFile);
        formData.append('bookMonth', this.bookMonth);
        
        const response = await fetch('/api/renewals/ingest', {
          method: 'POST',
          body: formData
        });
        
        const result = await response.json();
        
        if (!response.ok) {
          throw new Error(result.detail || 'Import failed');
        }
        
        this.importResult = result;
        this.validationPreview = 'success';
        console.log('[IMPORT] Success:', result);
        
      } catch (error) {
        console.error('[IMPORT] Error:', error);
        this.importError = error.message;
        this.validationPreview = 'error';
      } finally {
        this.uploading = false;
      }
    },
    
    parseCSV(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const text = e.target.result;
        const lines = text.split('\n').filter(line => line.trim());
        if (lines.length < 2) {
          this.previewRows = [];
          this.totalRows = 0;
          return;
        }
        
        const headers = this.parseCSVLine(lines[0]);
        const headerMap = {};
        headers.forEach((h, i) => headerMap[h.trim()] = i);
        
        const vrmIdx = headerMap['VRM'] !== undefined ? headerMap['VRM'] : -1;
        const planIdx = headerMap['FinancePlanNumber'] !== undefined ? headerMap['FinancePlanNumber'] : -1;
        const forenameIdx = headerMap['PersonForename'] !== undefined ? headerMap['PersonForename'] : -1;
        const surnameIdx = headerMap['PersonSurname'] !== undefined ? headerMap['PersonSurname'] : -1;
        const paymentIdx = headerMap['Monthly Payment'] !== undefined ? headerMap['Monthly Payment'] : -1;
        const termIdx = headerMap['Term'] !== undefined ? headerMap['Term'] : -1;
        const endDateIdx = headerMap['ContractEndDate'] !== undefined ? headerMap['ContractEndDate'] : -1;
        
        const rows = [];
        for (let i = 1; i < Math.min(lines.length, 6); i++) {
          const cols = this.parseCSVLine(lines[i]);
          const forename = forenameIdx >= 0 && cols[forenameIdx] ? cols[forenameIdx].trim() : '';
          const surname = surnameIdx >= 0 && cols[surnameIdx] ? cols[surnameIdx].trim() : '';
          
          rows.push({
            reg: vrmIdx >= 0 && cols[vrmIdx] ? cols[vrmIdx].trim() : '-',
            agreement: planIdx >= 0 && cols[planIdx] ? cols[planIdx].trim() : '-',
            customer: (forename + ' ' + surname).trim() || '-',
            payment: paymentIdx >= 0 && cols[paymentIdx] ? cols[paymentIdx].trim() : '-',
            term: termIdx >= 0 && cols[termIdx] ? cols[termIdx].trim() : '-',
            maturityDate: endDateIdx >= 0 && cols[endDateIdx] ? cols[endDateIdx].trim() : '-'
          });
        }
        
        this.previewRows = rows;
        this.totalRows = lines.length - 1;
      };
      reader.readAsText(file);
    },
    
    parseCSVLine(line) {
      const result = [];
      let current = '';
      let inQuotes = false;
      
      for (let i = 0; i < line.length; i++) {
        const char = line[i];
        if (char === '"') {
          inQuotes = !inQuotes;
        } else if (char === ',' && !inQuotes) {
          result.push(current);
          current = '';
        } else {
          current += char;
        }
      }
      result.push(current);
      return result;
    },
    
    handleFileSelect(event) {
      const file = event.target.files[0];
      if (file) {
        this.selectedFileName = file.name;
        this.selectedFile = file;
        this.validationPreview = null;
        this.previewRows = [];
        this.totalRows = 0;
      }
    },
    
    validateFile() {
      if (this.selectedFile) {
        this.parseCSV(this.selectedFile);
        this.validationPreview = 'parsed';
      }
    },
    
    formatPayment(value) {
      if (!value || value === '-') return '-';
      const num = parseFloat(value.replace(/[^0-9.-]/g, ''));
      if (isNaN(num)) return value;
      return '£' + num.toLocaleString('en-GB', {minimumFractionDigits: 2, maximumFractionDigits: 2});
    },
    
    formatDate(value) {
      if (!value || value === '-') return '-';
      const date = new Date(value);
      if (isNaN(date.getTime())) return value;
      return date.toLocaleDateString('en-GB');
    }
  }
}
</script>
<div x-data="uploadsData()">
  
  <!-- Top-Level Tabs -->
  <div class="flex gap-1 border-b border-dp-silver mb-6">
    <button
      @click="uploadTab = 'snapshot'"
      :class="uploadTab === 'snapshot' ? 'bg-white border-t-2 border-t-dp-blue text-dp-ink' : 'text-gray-500 hover:text-dp-ink'"
      class="px-5 py-3 text-sm font-medium transition"
    >
      Monthly Snapshot
    </button>
    <button
      @click="uploadTab = 'offers'"
      :class="uploadTab === 'offers' ? 'bg-white border-t-2 border-t-dp-blue text-dp-ink' : 'text-gray-500 hover:text-dp-ink'"
      class="px-5 py-3 text-sm font-medium transition"
    >
      Campaign Offers
    </button>
  </div>

  <!-- Monthly Snapshot Tab -->
  <div x-show="uploadTab === 'snapshot'" class="space-y-6">
    
    <!-- Last Snapshot Card -->
    <div class="bg-white border border-dp-silver rounded-xl shadow-card p-6">
      <div class="flex items-start justify-between mb-4">
        <div>
          <h2 class="text-sm font-semibold text-dp-ink">Last Snapshot</h2>
          <p class="text-xs text-gray-500 mt-1">Most recent monthly data import</p>
        </div>
        <span class="inline-flex items-center px-3 py-1 rounded-full text-[10px] font-semibold uppercase tracking-wide bg-emerald-100 text-emerald-700 border border-emerald-200">
          Imported
        </span>
      </div>

      <dl class="grid grid-cols-2 md:grid-cols-4 gap-6">
        <div>
          <dt class="text-[10px] uppercase tracking-wide text-gray-500">Upload Date</dt>
          <dd class="text-sm font-medium text-dp-ink mt-1">15 Nov 2025, 14:32</dd>
        </div>
        <div>
          <dt class="text-[10px] uppercase tracking-wide text-gray-500">Uploaded By</dt>
          <dd class="text-sm font-medium text-dp-ink mt-1">Sarah Jones</dd>
        </div>
        <div>
          <dt class="text-[10px] uppercase tracking-wide text-gray-500">Rows Imported</dt>
          <dd class="text-sm font-medium text-dp-ink mt-1">1,247</dd>
        </div>
        <div>
          <dt class="text-[10px] uppercase tracking-wide text-gray-500">Linked Campaigns</dt>
          <dd class="text-sm font-medium text-dp-ink mt-1">2 active</dd>
        </div>
      </dl>
    </div>

    <!-- Upload New Snapshot Card -->
    <div class="bg-white border border-dp-silver rounded-xl shadow-card p-6">
      <h2 class="text-sm font-semibold text-dp-ink mb-4">Upload New Snapshot</h2>
      
      <div class="space-y-4">
        <!-- File Upload -->
        <div>
          <label class="block text-xs font-medium text-gray-700 mb-2">Select File (CSV/XLSX)</label>
          <div class="relative">
            <input
              type="file"
              accept=".csv,.xlsx"
              @change="handleFileSelect($event)"
              class="block w-full text-sm text-gray-600 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border file:border-dp-silver file:text-xs file:font-medium file:bg-white file:text-dp-ink hover:file:bg-gray-50 cursor-pointer border border-dp-silver rounded-lg"
            />
          </div>
          <p class="mt-1.5 text-xs text-gray-500">Supported formats: VWFS monthly export (CSV), Internal CRM export (XLSX)</p>
        </div>

        <!-- Snapshot Type -->
        <div>
          <label class="block text-xs font-medium text-gray-700 mb-2">Snapshot Type</label>
          <select class="w-full px-4 py-2 text-sm border border-dp-silver rounded-lg focus:border-dp-blue focus:outline-none">
            <option>VWFS Monthly Snapshot</option>
            <option>Internal CRM Export</option>
            <option>Custom Data Feed</option>
          </select>
        </div>

        <!-- Book Month -->
        <div>
          <label class="block text-xs font-medium text-gray-700 mb-2">Book Month</label>
          <input
            type="month"
            x-model="bookMonth"
            class="w-full px-4 py-2 text-sm border border-dp-silver rounded-lg focus:border-dp-blue focus:outline-none"
          />
        </div>

        <!-- Validate Button -->
        <div class="flex gap-3">
          <button
            @click="validateFile()"
            :disabled="uploading || !selectedFile"
            class="px-6 py-2.5 text-sm font-medium text-white bg-dp-blue hover:bg-dp-blue/90 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Validate File
          </button>
        </div>

        <!-- Validation Preview -->
        <div x-show="validationPreview === 'parsed' && previewRows.length > 0" x-transition class="mt-6 p-4 bg-dp-cloud border border-dp-silver rounded-lg">
          <div class="flex items-center justify-between mb-4">
            <div>
              <h3 class="text-sm font-semibold text-dp-ink">Validation Preview</h3>
              <p class="text-xs text-gray-500 mt-0.5">First 5 rows from uploaded file</p>
            </div>
            <span class="inline-flex items-center px-3 py-1 rounded-full text-[10px] font-semibold uppercase tracking-wide bg-emerald-100 text-emerald-700 border border-emerald-200">
              ✓ Valid
            </span>
          </div>

          <!-- Dynamic Preview Table -->
          <div class="overflow-x-auto">
            <table class="w-full text-xs">
              <thead class="bg-gray-100 border-b border-dp-silver">
                <tr>
                  <th class="px-3 py-2 text-left text-[10px] uppercase tracking-wide text-gray-600">Reg</th>
                  <th class="px-3 py-2 text-left text-[10px] uppercase tracking-wide text-gray-600">Agreement</th>
                  <th class="px-3 py-2 text-left text-[10px] uppercase tracking-wide text-gray-600">Customer</th>
                  <th class="px-3 py-2 text-left text-[10px] uppercase tracking-wide text-gray-600">Payment</th>
                  <th class="px-3 py-2 text-left text-[10px] uppercase tracking-wide text-gray-600">Term (mths)</th>
                  <th class="px-3 py-2 text-left text-[10px] uppercase tracking-wide text-gray-600">Maturity Date</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-dp-silver">
                <template x-for="(row, index) in previewRows" :key="index">
                  <tr class="hover:bg-gray-50">
                    <td class="px-3 py-2 text-gray-700 font-medium" x-text="row.reg"></td>
                    <td class="px-3 py-2 text-gray-600 font-mono" x-text="row.agreement"></td>
                    <td class="px-3 py-2 text-gray-700" x-text="row.customer"></td>
                    <td class="px-3 py-2 text-gray-700" x-text="formatPayment(row.payment)"></td>
                    <td class="px-3 py-2 text-gray-600" x-text="row.term"></td>
                    <td class="px-3 py-2 text-gray-600" x-text="formatDate(row.maturityDate)"></td>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>

          <!-- Confirm Import Button -->
          <div class="mt-4 flex items-center justify-between">
            <p class="text-xs text-gray-600">
              <span class="font-semibold text-emerald-600" x-text="totalRows.toLocaleString() + ' rows'"></span> ready to import
            </p>
            <button
              @click="confirmImport()"
              :disabled="uploading"
              class="px-6 py-2.5 text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
            >
              <template x-if="!uploading">
                <span>Confirm & Import</span>
              </template>
              <template x-if="uploading">
                <span>Importing...</span>
              </template>
            </button>
          </div>
        </div>

        <!-- Success Message -->
        <div x-show="validationPreview === 'success'" x-transition class="mt-4 p-4 bg-emerald-50 border border-emerald-200 rounded-lg">
          <div class="flex items-start gap-3">
            <svg class="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <div class="flex-1">
              <p class="text-sm font-semibold text-emerald-900">Import Successful!</p>
              <p class="text-xs text-emerald-700 mt-1">
                <span x-text="importResult ? importResult.inserted.toLocaleString() : totalRows.toLocaleString()"></span> customer records have been imported to staging table.
                <template x-if="importResult && importResult.errors > 0">
                  <span class="text-amber-600"> (<span x-text="importResult.errors"></span> rows had errors)</span>
                </template>
              </p>
            </div>
          </div>
        </div>

        <!-- Error Message -->
        <div x-show="validationPreview === 'error'" x-transition class="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
          <div class="flex items-start gap-3">
            <svg class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <div class="flex-1">
              <p class="text-sm font-semibold text-red-900">Import Failed</p>
              <p class="text-xs text-red-700 mt-1" x-text="importError"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Campaign Offers Tab -->
  <div x-show="uploadTab === 'offers'" class="space-y-6">
    
    <!-- Current Campaign Card -->
    <div class="bg-white border border-dp-silver rounded-xl shadow-card p-6">
      <h2 class="text-sm font-semibold text-dp-ink mb-4">Current Campaign</h2>
      
      <dl class="grid grid-cols-2 md:grid-cols-4 gap-6">
        <div>
          <dt class="text-[10px] uppercase tracking-wide text-gray-500">Campaign Name</dt>
          <dd class="text-sm font-medium text-dp-ink mt-1">EOT Q1 2025</dd>
        </div>
        <div>
          <dt class="text-[10px] uppercase tracking-wide text-gray-500">Start Date</dt>
          <dd class="text-sm font-medium text-dp-ink mt-1">01 Nov 2025</dd>
        </div>
        <div>
          <dt class="text-[10px] uppercase tracking-wide text-gray-500">End Date</dt>
          <dd class="text-sm font-medium text-dp-ink mt-1">31 Mar 2026</dd>
        </div>
        <div>
          <dt class="text-[10px] uppercase tracking-wide text-gray-500">Customer Count</dt>
          <dd class="text-sm font-medium text-dp-ink mt-1">1,247 active</dd>
        </div>
      </dl>
    </div>

    <!-- Upload Offer File Card -->
    <div class="bg-white border border-dp-silver rounded-xl shadow-card p-6">
      <h2 class="text-sm font-semibold text-dp-ink mb-4">Upload Offer File</h2>
      
      <div class="space-y-4">
        <!-- File Upload -->
        <div>
          <label class="block text-xs font-medium text-gray-700 mb-2">Select Offer File (CSV/XLSX)</label>
          <input
            type="file"
            accept=".csv,.xlsx"
            class="block w-full text-sm text-gray-600 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border file:border-dp-silver file:text-xs file:font-medium file:bg-white file:text-dp-ink hover:file:bg-gray-50 cursor-pointer border border-dp-silver rounded-lg"
          />
        </div>

        <!-- Campaign Selection -->
        <div>
          <label class="block text-xs font-medium text-gray-700 mb-2">Attach to Campaign</label>
          <select class="w-full px-4 py-2 text-sm border border-dp-silver rounded-lg focus:border-dp-blue focus:outline-none">
            <option>EOT Q1 2025 (Current)</option>
            <option>Create New Campaign</option>
            <option>Archive - Q4 2024</option>
          </select>
        </div>

        <!-- Action Buttons -->
        <div class="flex gap-3">
          <button
            class="px-6 py-2.5 text-sm font-medium text-white bg-dp-blue hover:bg-dp-blue/90 rounded-lg transition"
          >
            Validate File
          </button>
          <button
            class="px-6 py-2.5 text-sm font-medium text-dp-blue bg-dp-blue/10 hover:bg-dp-blue/20 rounded-lg transition"
          >
            Preview Sample
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}