<template>
  <div class="project-management">
    <CrudDataTable
      ref="tableRef"
      title="Projekte"
      entity-name="Projekt"
      entity-name-article="ein"
      :columns="projectColumns"
      data-source="/api/projects"
      storage-key="projectTableColumns"
      :show-view-button="canView"
      :show-create-button="canCreate"
      :show-edit-button="canEdit"
      :show-delete-button="canDelete"
      :show-export-button="canExport"
      @view="viewProject"
      @create="openNewProjectDialog"
      @edit="editProject"
      @delete="confirmDelete"
      @data-loaded="onDataLoaded"
    >
      <!-- Custom Filter Buttons -->
      <template #filter-buttons="{ loadData }">
        <div class="flex gap-2 mb-4">
          <Button
            label="Alle"
            :outlined="typeFilter !== 'all'"
            @click="filterByType('all', loadData)"
            size="small"
          />
          <Button
            label="Beruflich"
            :outlined="typeFilter !== 'business'"
            @click="filterByType('business', loadData)"
            size="small"
          />
          <Button
            label="Privat"
            :outlined="typeFilter !== 'private'"
            @click="filterByType('private', loadData)"
            size="small"
          />
        </div>
      </template>

      <!-- Custom Column Templates -->
      <template #body-name="{ data }">
        <div class="font-semibold">{{ data.name }}</div>
      </template>

      <template #body-projectNumber="{ data }">
        {{ data.projectNumber }}
      </template>

      <template #body-customer="{ data }">
        <div v-if="data.customer">{{ data.customer.companyName }}</div>
        <span v-else class="text-500">Kein Kunde zugewiesen</span>
      </template>

      <template #body-status="{ data }">
        <Tag v-if="data.status" :value="data.status.name" :style="{ backgroundColor: data.status.color }" />
        <span v-else class="text-500">Kein Status</span>
      </template>

      <template #body-orderNumber="{ data }">
        {{ data.orderNumber }}
      </template>

      <template #body-orderDate="{ data }">
        {{ formatDate(data.orderDate) }}
      </template>

      <template #body-startDate="{ data }">
        {{ formatDate(data.startDate) }}
      </template>

      <template #body-endDate="{ data }">
        {{ formatDate(data.endDate) }}
      </template>

      <template #body-budget="{ data }">
        <div v-if="data.budget" class="text-right">{{ formatCurrency(data.budget) }}</div>
      </template>

      <template #body-hourContingent="{ data }">
        <div v-if="data.hourContingent" class="text-right">{{ data.hourContingent }} h</div>
      </template>

      <template #body-type="{ data }">
        <Tag :value="data.isPrivate ? 'Privat' : 'Beruflich'" :severity="data.isPrivate ? 'info' : 'success'" />
      </template>

      <template #body-createdAt="{ data }">
        {{ formatDate(data.createdAt) }}
      </template>

      <template #body-updatedAt="{ data }">
        {{ formatDate(data.updatedAt) }}
      </template>
    </CrudDataTable>

    <!-- Project Dialog -->
    <Dialog
      v-model:visible="projectDialog"
      :header="editingProject?.id ? 'Projekt bearbeiten' : 'Neues Projekt'"
      :modal="true"
      :style="{ width: '900px' }"
      :closable="!saving"
    >
      <div class="flex flex-col gap-4">
        <!-- Basic Information -->
        <div class="font-semibold text-lg">Grunddaten</div>
        <div class="grid grid-cols-2 gap-4">
          <div class="flex flex-col gap-2 col-span-2">
            <label for="name">Projektname *</label>
            <InputText
              id="name"
              v-model="editingProject.name"
              :class="{ 'p-invalid': submitted && !editingProject.name }"
              :disabled="saving"
            />
            <small v-if="submitted && !editingProject.name" class="p-error">Projektname ist erforderlich</small>
          </div>

          <div class="flex flex-col gap-2 col-span-2">
            <label for="description">Beschreibung</label>
            <Textarea
              id="description"
              v-model="editingProject.description"
              rows="3"
              :disabled="saving"
            />
          </div>

          <div class="flex flex-col gap-2">
            <label for="customer">Kunde</label>
            <Select
              id="customer"
              v-model="editingProject.customer"
              :options="customers"
              option-label="companyName"
              placeholder="Kunde auswählen"
              filter
              :disabled="saving"
              show-clear
            />
          </div>

          <div class="flex flex-col gap-2">
            <label for="status">Status</label>
            <Select
              id="status"
              v-model="editingProject.status"
              :options="statuses"
              option-label="name"
              placeholder="Status auswählen"
              :disabled="saving"
              show-clear
            >
              <template #option="slotProps">
                <div class="flex align-items-center gap-2">
                  <span
                    class="inline-block w-3 h-3 border-round"
                    :style="{ backgroundColor: slotProps.option.color }"
                  ></span>
                  <span>{{ slotProps.option.name }}</span>
                </div>
              </template>
            </Select>
          </div>

          <div class="flex flex-col gap-2">
            <label for="isPrivate">Typ</label>
            <div class="flex align-items-center gap-3 mt-2">
              <div class="flex align-items-center">
                <RadioButton
                  id="business"
                  v-model="editingProject.isPrivate"
                  :value="false"
                  :disabled="saving"
                />
                <label for="business" class="ml-2">Beruflich</label>
              </div>
              <div class="flex align-items-center">
                <RadioButton
                  id="private"
                  v-model="editingProject.isPrivate"
                  :value="true"
                  :disabled="saving"
                />
                <label for="private" class="ml-2">Privat</label>
              </div>
            </div>
          </div>
        </div>

        <!-- Project Numbers & Dates -->
        <div class="font-semibold text-lg mt-4">Nummern & Daten</div>
        <div class="grid grid-cols-3 gap-4">
          <div class="flex flex-col gap-2">
            <label for="projectNumber">Projektnummer</label>
            <InputText
              id="projectNumber"
              v-model="editingProject.projectNumber"
              :disabled="saving"
            />
          </div>

          <div class="flex flex-col gap-2">
            <label for="orderNumber">Bestellnummer</label>
            <InputText
              id="orderNumber"
              v-model="editingProject.orderNumber"
              :disabled="saving"
            />
          </div>

          <div class="flex flex-col gap-2">
            <label for="orderDate">Bestelldatum</label>
            <DatePicker
              id="orderDate"
              v-model="editingProject.orderDate"
              date-format="dd.mm.yy"
              :disabled="saving"
              show-icon
            />
          </div>

          <div class="flex flex-col gap-2">
            <label for="startDate">Startdatum</label>
            <DatePicker
              id="startDate"
              v-model="editingProject.startDate"
              date-format="dd.mm.yy"
              :disabled="saving"
              show-icon
            />
          </div>

          <div class="flex flex-col gap-2">
            <label for="endDate">Enddatum</label>
            <DatePicker
              id="endDate"
              v-model="editingProject.endDate"
              date-format="dd.mm.yy"
              :disabled="saving"
              show-icon
            />
          </div>
        </div>

        <!-- Budget & Hours -->
        <div class="font-semibold text-lg mt-4">Budget & Kontingent</div>
        <div class="grid grid-cols-2 gap-4">
          <div class="flex flex-col gap-2">
            <label for="budget">Budget (€)</label>
            <InputNumber
              id="budget"
              v-model="editingProject.budget"
              mode="currency"
              currency="EUR"
              locale="de-DE"
              :min="0"
              :disabled="saving"
            />
          </div>

          <div class="flex flex-col gap-2">
            <label for="hourContingent">Stundenkontingent</label>
            <InputNumber
              id="hourContingent"
              v-model="editingProject.hourContingent"
              suffix=" h"
              :min-fraction-digits="0"
              :max-fraction-digits="2"
              :min="0"
              :disabled="saving"
            />
          </div>
        </div>

        <!-- Team & Access Management -->
        <div class="font-semibold text-lg mt-4">Team & Zugriff</div>
        <div class="grid grid-cols-2 gap-4">
          <div class="flex flex-col gap-2">
            <label for="owner">Eigentümer *</label>
            <Select
              id="owner"
              v-model="editingProject.owner"
              :options="users"
              option-label="email"
              placeholder="Eigentümer auswählen"
              filter
              :disabled="saving"
              :class="{ 'p-invalid': submitted && !editingProject.owner }"
            >
              <template #option="slotProps">
                <div class="flex flex-col">
                  <span class="font-medium">{{ slotProps.option.email }}</span>
                  <span v-if="slotProps.option.firstName || slotProps.option.lastName" class="text-sm text-500">
                    {{ slotProps.option.firstName }} {{ slotProps.option.lastName }}
                  </span>
                </div>
              </template>
            </Select>
            <small v-if="submitted && !editingProject.owner" class="p-error">Eigentümer ist erforderlich</small>
          </div>

          <div class="flex flex-col gap-2">
            <label for="teamMembers">Team-Mitglieder</label>
            <MultiSelect
              id="teamMembers"
              v-model="editingProject.teamMembers"
              :options="users"
              option-label="email"
              placeholder="Team-Mitglieder auswählen"
              filter
              display="chip"
              :disabled="saving"
              :max-selected-labels="3"
            >
              <template #option="slotProps">
                <div class="flex flex-col">
                  <span class="font-medium">{{ slotProps.option.email }}</span>
                  <span v-if="slotProps.option.firstName || slotProps.option.lastName" class="text-sm text-500">
                    {{ slotProps.option.firstName }} {{ slotProps.option.lastName }}
                  </span>
                </div>
              </template>
            </MultiSelect>
            <small class="text-500">Team-Mitglieder können das Projekt ansehen und bearbeiten</small>
          </div>
        </div>

        <!-- Documents Section (only for existing projects) -->
        <div v-if="editingProject.id" class="mt-4">
          <div class="font-semibold text-lg mb-3">Dokumente</div>
          <DocumentUpload
            entity-type="project"
            :entity-id="editingProject.id"
            :can-upload="true"
            :can-delete="true"
          />
        </div>

        <!-- Git Repositories Section (only for existing projects) -->
        <div v-if="editingProject.id" class="mt-4">
          <div class="font-semibold text-lg mb-3">Git Repositories</div>
          
          <!-- Repository List -->
          <DataTable
            v-if="editGitRepositories.length > 0"
            :value="editGitRepositories"
            class="mb-3"
            striped-rows
          >
            <Column field="name" header="Name" style="width: 25%">
              <template #body="{ data }">
                <div class="font-medium">{{ data.name }}</div>
              </template>
            </Column>
            
            <Column field="url" header="URL" style="width: 35%">
              <template #body="{ data }">
                <a :href="data.url" target="_blank" class="text-primary hover:underline text-sm">
                  {{ data.url }}
                </a>
              </template>
            </Column>
            
            <Column field="provider" header="Provider" style="width: 15%">
              <template #body="{ data }">
                <Tag :value="data.provider || 'local'" severity="info" />
              </template>
            </Column>
            
            <Column field="branch" header="Branch" style="width: 15%">
              <template #body="{ data }">
                <code class="text-sm">{{ data.branch || 'main' }}</code>
              </template>
            </Column>
            
            <Column style="width: 10%">
              <template #body="{ data }">
                <div class="flex gap-2 justify-end">
                  <Button
                    icon="pi pi-pencil"
                    size="small"
                    text
                    @click="editGitRepo(data)"
                  />
                  <Button
                    icon="pi pi-trash"
                    size="small"
                    text
                    severity="danger"
                    @click="confirmDeleteGitRepo(data)"
                  />
                </div>
              </template>
            </Column>
          </DataTable>

          <div v-else class="p-4 border-round border-1 surface-border text-center text-500 mb-3">
            <i class="pi pi-github text-3xl mb-2"></i>
            <p>Keine Git-Repositories verknüpft</p>
          </div>

          <!-- Add Repository Button -->
          <Button
            label="Repository hinzufügen"
            icon="pi pi-plus"
            size="small"
            @click="openAddGitRepoDialog"
          />
        </div>
      </div>

      <template #footer>
        <Button label="Abbrechen" @click="projectDialog = false" text :disabled="saving" />
        <Button label="Speichern" @click="saveProject" :loading="saving" />
      </template>
    </Dialog>

    <!-- Git Repository Dialog -->
    <Dialog
      v-model:visible="gitRepoDialog"
      :header="editingGitRepo?.id ? 'Repository bearbeiten' : 'Repository hinzufügen'"
      :modal="true"
      :style="{ width: '600px' }"
    >
      <div class="flex flex-col gap-4">
        <div class="flex flex-col gap-2">
          <label for="gitRepoName">Name *</label>
          <InputText
            id="gitRepoName"
            v-model="editingGitRepo.name"
            :class="{ 'p-invalid': gitRepoSubmitted && !editingGitRepo.name }"
            placeholder="z.B. Main Repository"
          />
          <small v-if="gitRepoSubmitted && !editingGitRepo.name" class="p-error">Name ist erforderlich</small>
        </div>

        <div class="flex flex-col gap-2">
          <label for="gitRepoUrl">URL *</label>
          <InputText
            id="gitRepoUrl"
            v-model="editingGitRepo.url"
            :class="{ 'p-invalid': gitRepoSubmitted && !editingGitRepo.url }"
            placeholder="https://github.com/user/repo"
          />
          <small v-if="gitRepoSubmitted && !editingGitRepo.url" class="p-error">URL ist erforderlich</small>
        </div>

        <div class="flex flex-col gap-2">
          <label for="gitRepoProvider">Provider</label>
          <Select
            id="gitRepoProvider"
            v-model="editingGitRepo.provider"
            :options="gitProviders"
            option-label="label"
            option-value="value"
            placeholder="Provider auswählen"
          />
          <small class="text-500">Leer lassen für lokale Repositories</small>
        </div>

        <div class="flex flex-col gap-2">
          <label for="gitRepoBranch">Branch</label>
          <InputText
            id="gitRepoBranch"
            v-model="editingGitRepo.branch"
            placeholder="main"
          />
        </div>

        <!-- Test Connection Section -->
        <div v-if="editingGitRepo.url && editingGitRepo.provider" class="p-3 border-round border-1 surface-border">
          <div class="flex justify-between align-items-center mb-2">
            <span class="font-medium text-sm">Verbindung testen</span>
            <Button
              label="Testen"
              icon="pi pi-check-circle"
              size="small"
              outlined
              :loading="testingConnection"
              @click="testRepositoryConnection"
            />
          </div>
          
          <div v-if="connectionTestResult" class="mt-2">
            <div v-if="connectionTestResult.success" class="flex align-items-start gap-2 p-2 border-round surface-ground border-1 border-green-500">
              <i class="pi pi-check-circle text-green-600 mt-1"></i>
              <div class="flex-1">
                <div class="font-semibold text-sm text-green-700 dark:text-green-400">Verbindung erfolgreich</div>
                <div class="text-xs mt-1">{{ connectionTestResult.message }}</div>
                <div v-if="connectionTestResult.details" class="text-xs mt-1 text-600">
                  <div v-if="connectionTestResult.details.defaultBranch">
                    Standard-Branch: <code>{{ connectionTestResult.details.defaultBranch }}</code>
                  </div>
                  <div v-if="connectionTestResult.details.commitCount">
                    Commits gefunden: {{ connectionTestResult.details.commitCount }}
                  </div>
                </div>
              </div>
            </div>
            
            <div v-else class="flex align-items-start gap-2 p-2 border-round surface-ground border-1 border-red-500">
              <i class="pi pi-times-circle text-red-600 mt-1"></i>
              <div class="flex-1">
                <div class="font-semibold text-sm text-red-700 dark:text-red-400">Verbindung fehlgeschlagen</div>
                <div class="text-xs mt-1">{{ connectionTestResult.message }}</div>
                <div v-if="connectionTestResult.error" class="text-xs mt-1 text-600 font-mono">
                  {{ connectionTestResult.error }}
                </div>
                <div v-if="connectionTestResult.details" class="text-xs mt-2 text-600">
                  <div v-if="connectionTestResult.details.hint" class="font-semibold">
                    💡 {{ connectionTestResult.details.hint }}
                  </div>
                  <div v-if="connectionTestResult.details.owner">
                    Owner: {{ connectionTestResult.details.owner }}
                  </div>
                  <div v-if="connectionTestResult.details.repo">
                    Repo: {{ connectionTestResult.details.repo }}
                  </div>
                  <div v-if="connectionTestResult.details.branch">
                    Branch: {{ connectionTestResult.details.branch }}
                  </div>
                  <div v-if="connectionTestResult.details.defaultBranch">
                    Standard-Branch: {{ connectionTestResult.details.defaultBranch }}
                  </div>
                </div>
                <div v-if="connectionTestResult.trace" class="text-xs mt-2 p-2 surface-100 dark:surface-800 border-round overflow-auto max-h-10rem font-mono">
                  {{ connectionTestResult.trace }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="flex flex-col gap-2">
          <label for="gitRepoLocalPath">Lokaler Pfad (optional)</label>
          <InputText
            id="gitRepoLocalPath"
            v-model="editingGitRepo.localPath"
            placeholder="/pfad/zum/repository"
          />
          <small class="text-500">Nur für lokale Git-Repositories erforderlich</small>
        </div>

        <div v-if="editingGitRepo.provider && editingGitRepo.provider !== 'local'" class="flex flex-col gap-2">
          <label for="gitRepoToken">Access Token (optional)</label>
          <InputText
            id="gitRepoToken"
            v-model="editingGitRepo.accessToken"
            type="password"
            placeholder="Token für private Repositories"
          />
          <small class="text-500">Für private Repositories oder höhere Rate Limits</small>
        </div>

        <div class="flex flex-col gap-2">
          <label for="gitRepoDescription">Beschreibung</label>
          <Textarea
            id="gitRepoDescription"
            v-model="editingGitRepo.description"
            rows="2"
            placeholder="Optional: Beschreibung des Repositories"
          />
        </div>
      </div>

      <template #footer>
        <Button label="Abbrechen" @click="gitRepoDialog = false" text :disabled="savingGitRepo" />
        <Button label="Speichern" @click="saveGitRepo" :loading="savingGitRepo" />
      </template>
    </Dialog>

    <!-- Delete Git Repo Confirmation Dialog -->
    <Dialog
      v-model:visible="deleteGitRepoDialog"
      header="Repository entfernen"
      :modal="true"
      :style="{ width: '450px' }"
    >
      <div class="flex align-items-center gap-3">
        <i class="pi pi-exclamation-triangle text-4xl text-orange-500" />
        <span>Möchten Sie das Repository <b>{{ gitRepoToDelete?.name }}</b> wirklich entfernen?</span>
      </div>
      <template #footer>
        <Button label="Abbrechen" @click="deleteGitRepoDialog = false" text :disabled="deletingGitRepo" />
        <Button label="Entfernen" @click="deleteGitRepo" severity="danger" :loading="deletingGitRepo" />
      </template>
    </Dialog>

    <!-- Delete Confirmation Dialog -->
    <Dialog
      v-model:visible="deleteDialog"
      header="Projekt löschen"
      :modal="true"
      :style="{ width: '450px' }"
    >
      <div class="flex align-items-center gap-3">
        <i class="pi pi-exclamation-triangle text-4xl text-red-500" />
        <span>Möchten Sie das Projekt <b>{{ projectToDelete?.name }}</b> wirklich löschen?</span>
      </div>
      <template #footer>
        <Button label="Abbrechen" @click="deleteDialog = false" text :disabled="deleting" />
        <Button label="Löschen" @click="deleteProject" severity="danger" :loading="deleting" />
      </template>
    </Dialog>

    <!-- View Project Dialog -->
    <Dialog
      v-model:visible="viewDialog"
      header="Projekt anzeigen"
      :modal="true"
      :style="{ width: '1400px' }"
    >
      <Tabs value="0">
        <TabList>
          <Tab value="0">Projektdaten</Tab>
          <Tab value="1">Tätigkeiten</Tab>
          <Tab value="2">Git Repositories</Tab>
        </TabList>
        <TabPanels>
          <!-- Project Data Tab -->
          <TabPanel value="0">
            <div class="flex flex-col gap-4">
              <!-- Basic Information -->
              <div class="p-4 border-round border-1 surface-border">
                <div class="font-semibold text-lg mb-3">Grunddaten</div>
              <div class="grid grid-cols-2 gap-4">
                <div class="flex flex-col gap-2">
                  <label class="font-medium text-sm text-500">Projektname</label>
                  <div class="text-900">{{ viewingProject.name || '-' }}</div>
                </div>

                <div class="flex flex-col gap-2">
                  <label class="font-medium text-sm text-500">Projektnummer</label>
                  <div class="text-900">{{ viewingProject.projectNumber || '-' }}</div>
                </div>

                <div class="flex flex-col gap-2 col-span-2">
                  <label class="font-medium text-sm text-500">Beschreibung</label>
                  <div class="text-900 whitespace-pre-wrap">{{ viewingProject.description || '-' }}</div>
                </div>

                <div class="flex flex-col gap-2">
                  <label class="font-medium text-sm text-500">Kunde</label>
                  <div class="text-900">{{ viewingProject.customer?.companyName || '-' }}</div>
                </div>

                <div class="flex flex-col gap-2">
                  <label class="font-medium text-sm text-500">Status</label>
                  <Tag v-if="viewingProject.status" :value="viewingProject.status.name" :style="{ backgroundColor: viewingProject.status.color }" />
                  <div v-else class="text-900">-</div>
                </div>

                <div class="flex flex-col gap-2">
                  <label class="font-medium text-sm text-500">Typ</label>
                  <Tag :value="viewingProject.isPrivate ? 'Privat' : 'Beruflich'" :severity="viewingProject.isPrivate ? 'info' : 'success'" />
                </div>
              </div>
            </div>

            <!-- Project Numbers & Dates -->
            <div class="p-4 border-round border-1 surface-border">
              <div class="font-semibold text-lg mb-3">Nummern & Daten</div>
              <div class="grid grid-cols-3 gap-4">
                <div class="flex flex-col gap-2">
                  <label class="font-medium text-sm text-500">Bestellnummer</label>
                  <div class="text-900">{{ viewingProject.orderNumber || '-' }}</div>
                </div>

                <div class="flex flex-col gap-2">
                  <label class="font-medium text-sm text-500">Bestelldatum</label>
                  <div class="text-900">{{ formatDate(viewingProject.orderDate) || '-' }}</div>
                </div>

                <div class="flex flex-col gap-2">
                  <label class="font-medium text-sm text-500">Startdatum</label>
                  <div class="text-900">{{ formatDate(viewingProject.startDate) || '-' }}</div>
                </div>

                <div class="flex flex-col gap-2">
                  <label class="font-medium text-sm text-500">Enddatum</label>
                  <div class="text-900">{{ formatDate(viewingProject.endDate) || '-' }}</div>
                </div>
              </div>
            </div>

            <!-- Budget & Hours -->
            <div class="p-4 border-round border-1 surface-border">
              <div class="font-semibold text-lg mb-3">Budget & Kontingent</div>
              <div class="grid grid-cols-2 gap-4">
                <div class="flex flex-col gap-2">
                  <label class="font-medium text-sm text-500">Budget</label>
                  <div class="text-900">{{ viewingProject.budget ? formatCurrency(viewingProject.budget) : '-' }}</div>
                </div>

                <div class="flex flex-col gap-2">
                  <label class="font-medium text-sm text-500">Stundenkontingent</label>
                  <div class="text-900">{{ viewingProject.hourContingent ? `${viewingProject.hourContingent} h` : '-' }}</div>
                </div>
              </div>
            </div>

            <!-- Team & Access -->
            <div class="p-4 border-round border-1 surface-border">
              <div class="font-semibold text-lg mb-3">Team & Zugriff</div>
              <div class="grid grid-cols-2 gap-4">
                <div class="flex flex-col gap-2">
                  <label class="font-medium text-sm text-500">Eigentümer</label>
                  <div v-if="viewingProject.owner" class="flex align-items-center gap-2">
                    <i class="pi pi-user text-primary"></i>
                    <div>
                      <div class="font-medium">{{ viewingProject.owner.email }}</div>
                      <div v-if="viewingProject.owner.firstName || viewingProject.owner.lastName" class="text-sm text-500">
                        {{ viewingProject.owner.firstName }} {{ viewingProject.owner.lastName }}
                      </div>
                    </div>
                  </div>
                  <div v-else class="text-900">-</div>
                </div>

                <div class="flex flex-col gap-2">
                  <label class="font-medium text-sm text-500">Team-Mitglieder</label>
                  <div v-if="viewingProject.teamMembers && viewingProject.teamMembers.length > 0" class="flex flex-col gap-2">
                    <div v-for="member in viewingProject.teamMembers" :key="member.id" class="flex align-items-center gap-2">
                      <i class="pi pi-users text-500"></i>
                      <div>
                        <div class="font-medium">{{ member.email }}</div>
                        <div v-if="member.firstName || member.lastName" class="text-sm text-500">
                          {{ member.firstName }} {{ member.lastName }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-else class="text-500">Keine Team-Mitglieder</div>
                </div>
              </div>
            </div>

            <!-- Documents Section -->
            <div class="p-4 border-round border-1 surface-border">
              <div class="font-semibold text-lg mb-3">Dokumente</div>
              <DocumentUpload
                v-if="viewingProject.id"
                entity-type="project"
                :entity-id="viewingProject.id"
                :can-upload="false"
                :can-delete="false"
              />
            </div>

            <!-- Timestamps -->
            <div class="p-4 border-round border-1 surface-border">
              <div class="font-semibold text-lg mb-3">Metadaten</div>
              <div class="grid grid-cols-2 gap-4">
                <div class="flex flex-col gap-2">
                  <label class="font-medium text-sm text-500">Erstellt am</label>
                  <div class="text-900">{{ formatDate(viewingProject.createdAt) || '-' }}</div>
                </div>

                <div class="flex flex-col gap-2">
                  <label class="font-medium text-sm text-500">Zuletzt geändert</label>
                  <div class="text-900">{{ formatDate(viewingProject.updatedAt) || '-' }}</div>
                </div>
              </div>
            </div>
          </div>
        </TabPanel>

        <!-- Tasks Tab -->
        <TabPanel value="1">
          <div v-if="projectTasks.length === 0" class="text-center py-8 text-500">
            <i class="pi pi-briefcase text-6xl mb-3"></i>
            <p>Keine Tätigkeiten vorhanden</p>
            <p class="text-sm">Füge Tätigkeiten hinzu, um Budget und Stunden zu tracken.</p>
          </div>

          <div v-else>
            <!-- Tasks Summary -->
            <div class="grid grid-cols-3 gap-4 mb-4">
              <div class="p-4 border-round border-1 surface-border bg-blue-50 dark:bg-blue-900/20">
                <div class="text-sm text-500 mb-1">Gesamt-Budget</div>
                <div class="text-2xl font-semibold text-blue-600">{{ formatCurrency(tasksSummary.totalBudget) }}</div>
              </div>
              <div class="p-4 border-round border-1 surface-border bg-green-50 dark:bg-green-900/20">
                <div class="text-sm text-500 mb-1">Gesamt-Stunden</div>
                <div class="text-2xl font-semibold text-green-600">{{ tasksSummary.totalHours }} h</div>
              </div>
              <div class="p-4 border-round border-1 surface-border bg-purple-50 dark:bg-purple-900/20">
                <div class="text-sm text-500 mb-1">Gesamt-Preis</div>
                <div class="text-2xl font-semibold text-purple-600">{{ formatCurrency(tasksSummary.totalPrice) }}</div>
              </div>
            </div>

            <!-- Tasks Table -->
            <DataTable
              :value="projectTasks"
              striped-rows
              paginator
              :rows="10"
            >
              <Column field="name" header="Name" style="width: 30%">
                <template #body="{ data }">
                  <div class="font-medium">{{ data.name }}</div>
                  <div v-if="data.description" class="text-sm text-500 mt-1">{{ data.description }}</div>
                </template>
              </Column>

              <Column field="budget" header="Budget" style="width: 15%">
                <template #body="{ data }">
                  <div v-if="data.budget">{{ formatCurrency(data.budget) }}</div>
                  <span v-else class="text-500">-</span>
                </template>
              </Column>

              <Column field="hourContingent" header="Stunden" style="width: 15%">
                <template #body="{ data }">
                  <div v-if="data.hourContingent">{{ data.hourContingent }} h</div>
                  <span v-else class="text-500">-</span>
                </template>
              </Column>

              <Column field="hourlyRate" header="Stundensatz" style="width: 15%">
                <template #body="{ data }">
                  <div v-if="data.hourlyRate">{{ formatCurrency(data.hourlyRate) }}/h</div>
                  <span v-else class="text-500">-</span>
                </template>
              </Column>

              <Column field="totalPrice" header="Gesamtpreis" style="width: 15%">
                <template #body="{ data }">
                  <div v-if="data.totalPrice" class="font-semibold">{{ formatCurrency(data.totalPrice) }}</div>
                  <span v-else class="text-500">-</span>
                </template>
              </Column>

              <Column header="Abrechnungsart" style="width: 10%">
                <template #body="{ data }">
                  <Tag v-if="data.hourlyRate && data.totalPrice" value="Beide" severity="info" size="small" />
                  <Tag v-else-if="data.hourlyRate" value="Stundensatz" severity="success" size="small" />
                  <Tag v-else-if="data.totalPrice" value="Festpreis" severity="warning" size="small" />
                  <span v-else class="text-500">-</span>
                </template>
              </Column>
            </DataTable>
          </div>
        </TabPanel>

        <!-- Git Repository Tab -->
        <TabPanel value="2">
          <div v-if="gitRepositories.length === 0" class="text-center py-8 text-500">
            <i class="pi pi-github text-6xl mb-3"></i>
            <p>Keine Git-Repositories verknüpft</p>
            <p class="text-sm">Füge ein Git-Repository hinzu, um Commits und Contributions zu analysieren.</p>
          </div>

          <div v-else class="flex flex-col gap-4">
            <!-- Repository Selector -->
            <div class="flex gap-3 align-items-center flex-wrap">
              <label class="font-medium">Repository:</label>
              <Select
                v-model="selectedRepository"
                :options="gitRepositories"
                option-label="name"
                placeholder="Repository auswählen"
                class="flex-1"
              />
              <label v-if="selectedRepository" class="font-medium">Branch:</label>
              <InputText
                v-if="selectedRepository"
                v-model="selectedBranch"
                placeholder="Branch (z.B. main)"
                class="w-15rem"
              />
              <label v-if="selectedRepository" class="font-medium">Jahr:</label>
              <InputNumber
                v-if="selectedRepository"
                v-model="selectedYear"
                :min="2000"
                :max="2100"
                :use-grouping="false"
                class="w-10rem"
              />
              <Button
                v-if="selectedRepository"
                icon="pi pi-refresh"
                label="Cache aktualisieren"
                size="small"
                outlined
                :loading="refreshingCache"
                @click="refreshRepositoryCache"
              />
            </div>

            <!-- Contribution Chart -->
            <div v-if="selectedRepository" class="p-4 border-round border-1 surface-border">
              <GitContributionChart
                :repository-id="selectedRepository.id"
                :branch="selectedBranch"
                :year="selectedYear"
              />
            </div>

            <!-- Commit List -->
            <div v-if="selectedRepository" class="p-4 border-round border-1 surface-border">
              <div class="font-semibold text-lg mb-3">Commit-Historie</div>
              <GitCommitList
                :repository-id="selectedRepository.id"
                :branch="selectedBranch"
                :limit="50"
              />
            </div>
          </div>
        </TabPanel>
      </TabPanels>
      </Tabs>

      <template #footer>
        <Button label="Schließen" @click="viewDialog = false" />
        <Button v-if="canEdit" label="Bearbeiten" @click="editFromView" icon="pi pi-pencil" />
      </template>
    </Dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useToast } from 'primevue/usetoast'
import { usePermissionStore } from '../stores/permissions'
import CrudDataTable from '../components/CrudDataTable.vue'
import Dialog from 'primevue/dialog'
import Button from 'primevue/button'
import InputText from 'primevue/inputtext'
import Textarea from 'primevue/textarea'
import Select from 'primevue/select'
import MultiSelect from 'primevue/multiselect'
import DatePicker from 'primevue/datepicker'
import InputNumber from 'primevue/inputnumber'
import RadioButton from 'primevue/radiobutton'
import Tag from 'primevue/tag'
import Tabs from 'primevue/tabs'
import TabList from 'primevue/tablist'
import Tab from 'primevue/tab'
import TabPanels from 'primevue/tabpanels'
import TabPanel from 'primevue/tabpanel'
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import GitCommitList from '../components/GitCommitList.vue'
import GitContributionChart from '../components/GitContributionChart.vue'
import DocumentUpload from '../components/DocumentUpload.vue'

const toast = useToast()
const permissionStore = usePermissionStore()
const tableRef = ref(null)
const projectDialog = ref(false)
const viewDialog = ref(false)
const deleteDialog = ref(false)
const editingProject = ref({})
const viewingProject = ref({})
const projectToDelete = ref(null)
const submitted = ref(false)
const saving = ref(false)
const deleting = ref(false)
const typeFilter = ref('all')
const customers = ref([])
const statuses = ref([])
const users = ref([])
const currentUser = ref(null)
const gitRepositories = ref([])
const selectedRepository = ref(null)
const selectedBranch = ref('main')
const selectedYear = ref(new Date().getFullYear())
const refreshingCache = ref(false)

// Git Repository Management
const editGitRepositories = ref([])
const gitRepoDialog = ref(false)
const editingGitRepo = ref({})
const gitRepoSubmitted = ref(false)
const savingGitRepo = ref(false)
const deleteGitRepoDialog = ref(false)
const gitRepoToDelete = ref(null)
const deletingGitRepo = ref(false)
const testingConnection = ref(false)
const connectionTestResult = ref(null)

// Project Tasks
const projectTasks = ref([])
const tasksSummary = computed(() => {
  const totalBudget = projectTasks.value.reduce((sum, task) => {
    return sum + (task.budget ? parseFloat(task.budget) : 0)
  }, 0)

  const totalHours = projectTasks.value.reduce((sum, task) => {
    return sum + (task.hourContingent ? parseFloat(task.hourContingent) : 0)
  }, 0)

  const totalPrice = projectTasks.value.reduce((sum, task) => {
    return sum + (task.totalPrice ? parseFloat(task.totalPrice) : 0)
  }, 0)

  return {
    totalBudget,
    totalHours,
    totalPrice
  }
})

const gitProviders = [
  { label: 'GitHub', value: 'github' },
  { label: 'Gitea', value: 'gitea' },
  { label: 'Lokal', value: 'local' }
]

// Permission checks
const canView = computed(() => permissionStore.canView('projects'))
const canCreate = computed(() => permissionStore.canCreate('projects'))
const canEdit = computed(() => permissionStore.canEdit('projects'))
const canDelete = computed(() => permissionStore.canDelete('projects'))
const canExport = computed(() => permissionStore.canExport('projects'))

// Column definitions
const projectColumns = ref([
  { key: 'name', label: 'Projektname', field: 'name', sortable: true, visible: true },
  { key: 'projectNumber', label: 'Projektnummer', field: 'projectNumber', sortable: true, visible: true },
  { key: 'customer', label: 'Kunde', field: 'customer', sortable: false, visible: true },
  { key: 'status', label: 'Status', field: 'status', sortable: false, visible: true },
  { key: 'orderNumber', label: 'Bestellnummer', field: 'orderNumber', sortable: true, visible: false },
  { key: 'orderDate', label: 'Bestelldatum', field: 'orderDate', sortable: true, visible: false },
  { key: 'startDate', label: 'Start', field: 'startDate', sortable: true, visible: true },
  { key: 'endDate', label: 'Ende', field: 'endDate', sortable: true, visible: true },
  { key: 'budget', label: 'Budget', field: 'budget', sortable: true, visible: true },
  { key: 'hourContingent', label: 'Stunden', field: 'hourContingent', sortable: true, visible: false },
  { key: 'type', label: 'Typ', field: 'type', sortable: false, visible: true },
  { key: 'createdAt', label: 'Erstellt am', field: 'createdAt', sortable: true, visible: false },
  { key: 'updatedAt', label: 'Geändert am', field: 'updatedAt', sortable: true, visible: false }
])

onMounted(async () => {
  await Promise.all([loadCustomers(), loadStatuses(), loadUsers()])
  // Set current user to first user as fallback (until /api/me endpoint is implemented)
  if (users.value.length > 0) {
    currentUser.value = users.value[0]
  }
})

async function loadCustomers() {
  try {
    const response = await fetch('/api/contacts?pagination=false')
    if (!response.ok) throw new Error('Fehler beim Laden der Kunden')
    
    const data = await response.json()
    const customersList = data['hydra:member'] || data.member || data
    
    // Ensure it's an array
    customers.value = Array.isArray(customersList) ? customersList : []
  } catch (error) {
    console.error('Error loading customers:', error)
    customers.value = []
    toast.add({
      severity: 'error',
      summary: 'Fehler',
      detail: 'Kunden konnten nicht geladen werden',
      life: 3000
    })
  }
}

async function loadStatuses() {
  try {
    const response = await fetch('/api/project_statuses?pagination=false&isActive=true')
    if (!response.ok) throw new Error('Fehler beim Laden der Status')
    
    const data = await response.json()
    const statusesList = data['hydra:member'] || data.member || data
    
    // Ensure it's an array
    statuses.value = Array.isArray(statusesList) ? statusesList : []
  } catch (error) {
    console.error('Error loading statuses:', error)
    statuses.value = []
    toast.add({
      severity: 'error',
      summary: 'Fehler',
      detail: 'Status konnten nicht geladen werden',
      life: 3000
    })
  }
}

async function loadUsers() {
  try {
    const response = await fetch('/api/users?pagination=false')
    if (!response.ok) throw new Error('Fehler beim Laden der Benutzer')
    
    const data = await response.json()
    const usersList = data['hydra:member'] || data.member || data
    
    users.value = Array.isArray(usersList) ? usersList : []
  } catch (error) {
    console.error('Error loading users:', error)
    users.value = []
    toast.add({
      severity: 'error',
      summary: 'Fehler',
      detail: 'Benutzer konnten nicht geladen werden',
      life: 3000
    })
  }
}

async function loadCurrentUser() {
  // TODO: Implement proper /api/me endpoint
  // For now, use the first user from the users list as a fallback
  // This will be set after loadUsers() completes
  currentUser.value = null
}

function filterByType(type, loadData) {
  typeFilter.value = type
  
  let filters = {}
  if (type === 'business') {
    filters.isPrivate = false
  } else if (type === 'private') {
    filters.isPrivate = true
  }
  
  loadData(filters)
}

function onDataLoaded(data) {
  console.log('Projects loaded:', data.length)
}

async function viewProject(project) {
  viewingProject.value = { ...project }
  viewDialog.value = true

  // Load Git repositories and tasks for this project
  await Promise.all([
    loadGitRepositories(project.id),
    loadProjectTasks(project.id)
  ])
}

async function loadGitRepositories(projectId) {
  try {
    const response = await fetch(`/api/git_repositories?project=${projectId}`)
    if (!response.ok) throw new Error('Fehler beim Laden der Git-Repositories')
    
    const data = await response.json()
    gitRepositories.value = data['hydra:member'] || data.member || data || []
    
    // Select first repository by default
    if (gitRepositories.value.length > 0) {
      selectedRepository.value = gitRepositories.value[0]
      selectedBranch.value = gitRepositories.value[0].branch || 'main'
    } else {
      selectedRepository.value = null
      selectedBranch.value = 'main'
    }
  } catch (error) {
    console.error('Error loading git repositories:', error)
    gitRepositories.value = []
    selectedRepository.value = null
  }
}

async function loadProjectTasks(projectId) {
  try {
    const response = await fetch(`/api/project_tasks?project=${projectId}`)
    if (!response.ok) throw new Error('Fehler beim Laden der Tätigkeiten')

    const data = await response.json()
    projectTasks.value = data['hydra:member'] || data.member || data || []
  } catch (error) {
    console.error('Error loading project tasks:', error)
    projectTasks.value = []
    toast.add({
      severity: 'error',
      summary: 'Fehler',
      detail: 'Tätigkeiten konnten nicht geladen werden',
      life: 3000
    })
  }
}

function editFromView() {
  viewDialog.value = false
  editProject(viewingProject.value)
}

function openNewProjectDialog() {
  // Find default status
  const defaultStatus = statuses.value.find(s => s.isDefault) || statuses.value[0] || null
  
  editingProject.value = {
    name: '',
    description: '',
    customer: null,
    status: defaultStatus,
    projectNumber: '',
    orderNumber: '',
    orderDate: null,
    startDate: null,
    endDate: null,
    budget: null,
    hourContingent: null,
    isPrivate: false,
    owner: currentUser.value,
    teamMembers: []
  }
  submitted.value = false
  projectDialog.value = true
}

function editProject(project) {
  // Find owner object from users array
  let ownerObject = null
  if (project.owner) {
    if (typeof project.owner === 'object' && project.owner.id) {
      ownerObject = users.value.find(u => u.id === project.owner.id) || project.owner
    } else if (typeof project.owner === 'string') {
      // Extract ID from IRI like "/api/users/1"
      const ownerId = parseInt(project.owner.split('/').pop())
      ownerObject = users.value.find(u => u.id === ownerId)
    }
  }
  
  // Find team member objects from users array
  let teamMembersArray = []
  if (Array.isArray(project.teamMembers)) {
    teamMembersArray = project.teamMembers.map(member => {
      if (typeof member === 'object' && member.id) {
        return users.value.find(u => u.id === member.id) || member
      } else if (typeof member === 'string') {
        // Extract ID from IRI like "/api/users/1"
        const memberId = parseInt(member.split('/').pop())
        return users.value.find(u => u.id === memberId)
      }
      return null
    }).filter(m => m !== null)
  }
  
  // Convert date strings to Date objects for Calendar component
  editingProject.value = {
    ...project,
    orderDate: project.orderDate ? new Date(project.orderDate) : null,
    startDate: project.startDate ? new Date(project.startDate) : null,
    endDate: project.endDate ? new Date(project.endDate) : null,
    budget: project.budget ? parseFloat(project.budget) : null,
    hourContingent: project.hourContingent ? parseFloat(project.hourContingent) : null,
    owner: ownerObject,
    teamMembers: teamMembersArray
  }
  submitted.value = false
  projectDialog.value = true
  
  // Load git repositories for editing if project exists
  if (project.id) {
    loadGitRepositoriesForEdit(project.id)
  }
}

async function loadGitRepositoriesForEdit(projectId) {
  try {
    const response = await fetch(`/api/git_repositories?project=${projectId}`)
    if (!response.ok) throw new Error('Fehler beim Laden der Git-Repositories')
    
    const data = await response.json()
    editGitRepositories.value = data['hydra:member'] || data.member || data || []
  } catch (error) {
    console.error('Error loading git repositories for edit:', error)
    editGitRepositories.value = []
  }
}

// Git Repository Management Functions
function openAddGitRepoDialog() {
  editingGitRepo.value = {
    name: '',
    url: '',
    provider: null,
    branch: 'main',
    localPath: '',
    accessToken: '',
    description: ''
  }
  gitRepoSubmitted.value = false
  connectionTestResult.value = null
  gitRepoDialog.value = true
}

function editGitRepo(repo) {
  editingGitRepo.value = { ...repo }
  gitRepoSubmitted.value = false
  connectionTestResult.value = null
  gitRepoDialog.value = true
}

async function testRepositoryConnection() {
  if (!editingGitRepo.value.url || !editingGitRepo.value.provider) {
    toast.add({
      severity: 'warn',
      summary: 'Hinweis',
      detail: 'Bitte URL und Provider angeben',
      life: 3000
    })
    return
  }

  testingConnection.value = true
  connectionTestResult.value = null

  try {
    // Create a temporary repository object for testing
    const testData = {
      url: editingGitRepo.value.url,
      provider: editingGitRepo.value.provider,
      branch: editingGitRepo.value.branch || 'main',
      accessToken: editingGitRepo.value.accessToken || null,
      localPath: editingGitRepo.value.localPath || null
    }

    const response = await fetch('/api/git-repos/test', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      credentials: 'same-origin',
      body: JSON.stringify(testData)
    })

    const result = await response.json()
    
    console.log('Test response:', response.status, result)

    if (response.ok && result.success) {
      connectionTestResult.value = {
        success: true,
        message: result.message || 'Repository ist erreichbar und korrekt konfiguriert',
        details: result.details || {}
      }

      // Auto-fill branch if detected
      if (result.details?.defaultBranch && !editingGitRepo.value.branch) {
        editingGitRepo.value.branch = result.details.defaultBranch
      }

      toast.add({
        severity: 'success',
        summary: 'Erfolg',
        detail: 'Repository-Verbindung erfolgreich getestet',
        life: 3000
      })
    } else {
      connectionTestResult.value = {
        success: false,
        message: result.message || 'Verbindung zum Repository fehlgeschlagen',
        error: result.error || ''
      }

      toast.add({
        severity: 'error',
        summary: 'Fehler',
        detail: result.message || 'Verbindung fehlgeschlagen',
        life: 5000
      })
    }
  } catch (error) {
    console.error('Error testing repository connection:', error)
    connectionTestResult.value = {
      success: false,
      message: 'Netzwerkfehler beim Testen der Verbindung',
      error: error.message
    }

    toast.add({
      severity: 'error',
      summary: 'Fehler',
      detail: 'Verbindung konnte nicht getestet werden',
      life: 3000
    })
  } finally {
    testingConnection.value = false
  }
}

async function saveGitRepo() {
  gitRepoSubmitted.value = true
  
  if (!editingGitRepo.value.name || !editingGitRepo.value.url) {
    return
  }
  
  savingGitRepo.value = true
  
  try {
    const repoData = {
      name: editingGitRepo.value.name,
      url: editingGitRepo.value.url,
      provider: editingGitRepo.value.provider || null,
      branch: editingGitRepo.value.branch || 'main',
      localPath: editingGitRepo.value.localPath || null,
      accessToken: editingGitRepo.value.accessToken || null,
      description: editingGitRepo.value.description || null,
      project: `/api/projects/${editingProject.value.id}`
    }
    
    const isNew = !editingGitRepo.value.id
    const url = isNew ? '/api/git_repositories' : `/api/git_repositories/${editingGitRepo.value.id}`
    const method = isNew ? 'POST' : 'PUT'
    
    const response = await fetch(url, {
      method,
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(repoData)
    })
    
    if (!response.ok) {
      const errorData = await response.json()
      throw new Error(errorData.message || 'Fehler beim Speichern des Repositories')
    }
    
    toast.add({
      severity: 'success',
      summary: 'Erfolg',
      detail: isNew ? 'Repository hinzugefügt' : 'Repository aktualisiert',
      life: 3000
    })
    
    gitRepoDialog.value = false
    
    // Reload git repositories
    await loadGitRepositoriesForEdit(editingProject.value.id)
  } catch (error) {
    console.error('Error saving git repository:', error)
    toast.add({
      severity: 'error',
      summary: 'Fehler',
      detail: error.message || 'Repository konnte nicht gespeichert werden',
      life: 3000
    })
  } finally {
    savingGitRepo.value = false
  }
}

function confirmDeleteGitRepo(repo) {
  gitRepoToDelete.value = repo
  deleteGitRepoDialog.value = true
}

async function deleteGitRepo() {
  if (!gitRepoToDelete.value) return
  
  deletingGitRepo.value = true
  
  try {
    const response = await fetch(`/api/git_repositories/${gitRepoToDelete.value.id}`, {
      method: 'DELETE'
    })
    
    if (!response.ok) {
      throw new Error('Fehler beim Löschen des Repositories')
    }
    
    toast.add({
      severity: 'success',
      summary: 'Erfolg',
      detail: 'Repository entfernt',
      life: 3000
    })
    
    deleteGitRepoDialog.value = false
    
    // Reload git repositories
    await loadGitRepositoriesForEdit(editingProject.value.id)
  } catch (error) {
    console.error('Error deleting git repository:', error)
    toast.add({
      severity: 'error',
      summary: 'Fehler',
      detail: 'Repository konnte nicht entfernt werden',
      life: 3000
    })
  } finally {
    deletingGitRepo.value = false
  }
}

async function saveProject() {
  submitted.value = true
  
  if (!editingProject.value.name || !editingProject.value.owner) {
    return
  }
  
  saving.value = true
  
  try {
    // Prepare data for API
    const projectData = {
      name: editingProject.value.name,
      description: editingProject.value.description || null,
      customer: editingProject.value.customer ? `/api/contacts/${editingProject.value.customer.id}` : null,
      status: editingProject.value.status ? `/api/project_statuses/${editingProject.value.status.id}` : null,
      projectNumber: editingProject.value.projectNumber || null,
      orderNumber: editingProject.value.orderNumber || null,
      orderDate: editingProject.value.orderDate ? formatDateForAPI(editingProject.value.orderDate) : null,
      startDate: editingProject.value.startDate ? formatDateForAPI(editingProject.value.startDate) : null,
      endDate: editingProject.value.endDate ? formatDateForAPI(editingProject.value.endDate) : null,
      budget: editingProject.value.budget ? editingProject.value.budget.toString() : null,
      hourContingent: editingProject.value.hourContingent ? editingProject.value.hourContingent.toString() : null,
      isPrivate: editingProject.value.isPrivate,
      owner: `/api/users/${editingProject.value.owner.id}`,
      teamMembers: Array.isArray(editingProject.value.teamMembers) 
        ? editingProject.value.teamMembers.map(member => `/api/users/${member.id}`) 
        : []
    }
    
    const isNew = !editingProject.value.id
    const url = isNew ? '/api/projects' : `/api/projects/${editingProject.value.id}`
    const method = isNew ? 'POST' : 'PUT'
    
    const response = await fetch(url, {
      method,
      headers: {
        'Content-Type': 'application/ld+json',
        'Accept': 'application/ld+json'
      },
      body: JSON.stringify(projectData)
    })
    
    if (!response.ok) {
      const error = await response.json()
      throw new Error(error['hydra:description'] || 'Fehler beim Speichern')
    }
    
    toast.add({
      severity: 'success',
      summary: 'Erfolg',
      detail: `Projekt wurde ${isNew ? 'erstellt' : 'aktualisiert'}`,
      life: 3000
    })
    
    projectDialog.value = false
    tableRef.value?.loadData()
  } catch (error) {
    console.error('Error saving project:', error)
    toast.add({
      severity: 'error',
      summary: 'Fehler',
      detail: error.message || 'Projekt konnte nicht gespeichert werden',
      life: 3000
    })
  } finally {
    saving.value = false
  }
}

function confirmDelete(project) {
  projectToDelete.value = project
  deleteDialog.value = true
}

async function deleteProject() {
  deleting.value = true
  
  try {
    const response = await fetch(`/api/projects/${projectToDelete.value.id}`, {
      method: 'DELETE'
    })
    
    if (!response.ok) {
      throw new Error('Fehler beim Löschen')
    }
    
    toast.add({
      severity: 'success',
      summary: 'Erfolg',
      detail: 'Projekt wurde gelöscht',
      life: 3000
    })
    
    deleteDialog.value = false
    projectToDelete.value = null
    tableRef.value?.loadData()
  } catch (error) {
    console.error('Error deleting project:', error)
    toast.add({
      severity: 'error',
      summary: 'Fehler',
      detail: 'Projekt konnte nicht gelöscht werden',
      life: 3000
    })
  } finally {
    deleting.value = false
  }
}

async function refreshRepositoryCache() {
  if (!selectedRepository.value) return
  
  refreshingCache.value = true
  
  try {
    const response = await fetch(`/api/git-repos/${selectedRepository.value.id}/refresh-cache`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    
    if (!response.ok) {
      const errorData = await response.json()
      throw new Error(errorData.error || 'Cache konnte nicht aktualisiert werden')
    }
    
    const result = await response.json()
    
    toast.add({
      severity: 'success',
      summary: 'Erfolg',
      detail: result.message || 'Cache wurde aktualisiert',
      life: 3000
    })
    
    // Reload git data
    await loadGitRepositories(viewingProject.value.id)
  } catch (error) {
    console.error('Error refreshing cache:', error)
    toast.add({
      severity: 'error',
      summary: 'Fehler',
      detail: error.message || 'Cache konnte nicht aktualisiert werden',
      life: 3000
    })
  } finally {
    refreshingCache.value = false
  }
}

function formatDate(dateString) {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('de-DE', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric'
  })
}

function formatDateForAPI(date) {
  if (!date) return null
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

function formatCurrency(value) {
  if (!value) return ''
  return new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR'
  }).format(value)
}
</script>

<style scoped>
.project-management {
  height: 100%;
}
</style>
