<script>
  import { onMount } from 'svelte';
  import {
    fetchDisciplines,
    createDiscipline,
    updateDiscipline,
    deleteDiscipline,
    fetchDepartments,
    createDepartment,
    updateDepartment,
    deleteDepartment,
  } from '$lib/api/organization.js';
  import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
  import DataTable from '$lib/components/DataTable.svelte';
  import Modal from '$lib/components/Modal.svelte';
  import { Plus, Edit2, Trash2, ArrowLeft, Search, Building2, Users } from 'lucide-svelte';

  // Active tab state
  let activeTab = $state('disciplines');

  // Loading states
  let loadingDisciplines = $state(false);
  let loadingDepartments = $state(false);

  // Data states
  let disciplines = $state([]);
  let departments = $state([]);

  // Modal states - Disciplines
  let disciplineModalOpen = $state(false);
  let disciplineModalMode = $state('create');
  let disciplineFormData = $state({
    DisciplineID: null,
    DisciplineCode: '',
    DisciplineName: '',
    Parent: null,
  });
  let savingDiscipline = $state(false);
  let deleteDisciplineConfirmOpen = $state(false);
  let deleteDisciplineItem = $state(null);
  let deletingDiscipline = $state(false);

  // Modal states - Departments
  let departmentModalOpen = $state(false);
  let departmentModalMode = $state('create');
  let departmentFormData = $state({
    DepartmentID: null,
    DepartmentCode: '',
    DepartmentName: '',
    DisciplineID: null,
  });
  let savingDepartment = $state(false);
  let deleteDepartmentConfirmOpen = $state(false);
  let deleteDepartmentItem = $state(null);
  let deletingDepartment = $state(false);

  // Search states
  let disciplineSearch = $state('');
  let departmentSearch = $state('');

  // Table columns
  const disciplineColumns = [
    { key: 'DisciplineCode', label: 'Code', class: 'font-medium w-32' },
    { key: 'DisciplineName', label: 'Name' },
    { key: 'ParentName', label: 'Parent Discipline', class: 'w-48' },
    { key: 'actions', label: 'Actions', class: 'w-24 text-center' },
  ];

  const departmentColumns = [
    { key: 'DepartmentCode', label: 'Code', class: 'font-medium w-32' },
    { key: 'DepartmentName', label: 'Name' },
    { key: 'DisciplineName', label: 'Discipline', class: 'w-48' },
    { key: 'actions', label: 'Actions', class: 'w-24 text-center' },
  ];

  // Derived data with computed fields
  let disciplinesWithParentName = $derived(
    disciplines.map((d) => ({
      ...d,
      ParentName: d.Parent
        ? disciplines.find((p) => p.DisciplineID === d.Parent)?.DisciplineName || '-'
        : '-',
    }))
  );

  let departmentsWithDisciplineName = $derived(
    departments.map((d) => ({
      ...d,
      DisciplineName:
        disciplines.find((disc) => disc.DisciplineID === d.DisciplineID)?.DisciplineName || '-',
    }))
  );

  // Filtered data
  let filteredDisciplines = $derived(
    disciplineSearch.trim()
      ? disciplinesWithParentName.filter(
          (d) =>
            d.DisciplineCode?.toLowerCase().includes(disciplineSearch.toLowerCase()) ||
            d.DisciplineName?.toLowerCase().includes(disciplineSearch.toLowerCase())
        )
      : disciplinesWithParentName
  );

  let filteredDepartments = $derived(
    departmentSearch.trim()
      ? departmentsWithDisciplineName.filter(
          (d) =>
            d.DepartmentCode?.toLowerCase().includes(departmentSearch.toLowerCase()) ||
            d.DepartmentName?.toLowerCase().includes(departmentSearch.toLowerCase())
        )
      : departmentsWithDisciplineName
  );

  onMount(async () => {
    await loadDisciplines();
    await loadDepartments();
  });

  async function loadDisciplines() {
    loadingDisciplines = true;
    try {
      const response = await fetchDisciplines();
      disciplines = Array.isArray(response.data) ? response.data : [];
    } catch (err) {
      toastError(err.message || 'Failed to load disciplines');
      disciplines = [];
    } finally {
      loadingDisciplines = false;
    }
  }

  async function loadDepartments() {
    loadingDepartments = true;
    try {
      const response = await fetchDepartments();
      departments = Array.isArray(response.data) ? response.data : [];
    } catch (err) {
      toastError(err.message || 'Failed to load departments');
      departments = [];
    } finally {
      loadingDepartments = false;
    }
  }

  // Discipline handlers
  function openCreateDisciplineModal() {
    disciplineModalMode = 'create';
    disciplineFormData = {
      DisciplineID: null,
      DisciplineCode: '',
      DisciplineName: '',
      Parent: null,
    };
    disciplineModalOpen = true;
  }

  function openEditDisciplineModal(row) {
    disciplineModalMode = 'edit';
    disciplineFormData = {
      DisciplineID: row.DisciplineID,
      DisciplineCode: row.DisciplineCode,
      DisciplineName: row.DisciplineName,
      Parent: row.Parent || null,
    };
    disciplineModalOpen = true;
  }

  async function handleSaveDiscipline() {
    savingDiscipline = true;
    try {
      if (disciplineModalMode === 'create') {
        await createDiscipline(disciplineFormData);
        toastSuccess('Discipline created successfully');
      } else {
        await updateDiscipline(disciplineFormData);
        toastSuccess('Discipline updated successfully');
      }
      disciplineModalOpen = false;
      await loadDisciplines();
    } catch (err) {
      toastError(err.message || 'Failed to save discipline');
    } finally {
      savingDiscipline = false;
    }
  }

  function confirmDeleteDiscipline(row) {
    deleteDisciplineItem = row;
    deleteDisciplineConfirmOpen = true;
  }

  async function handleDeleteDiscipline() {
    deletingDiscipline = true;
    try {
      await deleteDiscipline(deleteDisciplineItem.DisciplineID);
      toastSuccess('Discipline deleted successfully');
      deleteDisciplineConfirmOpen = false;
      deleteDisciplineItem = null;
      await loadDisciplines();
    } catch (err) {
      toastError(err.message || 'Failed to delete discipline');
    } finally {
      deletingDiscipline = false;
    }
  }

  // Department handlers
  function openCreateDepartmentModal() {
    departmentModalMode = 'create';
    departmentFormData = {
      DepartmentID: null,
      DepartmentCode: '',
      DepartmentName: '',
      DisciplineID: null,
    };
    departmentModalOpen = true;
  }

  function openEditDepartmentModal(row) {
    departmentModalMode = 'edit';
    departmentFormData = {
      DepartmentID: row.DepartmentID,
      DepartmentCode: row.DepartmentCode,
      DepartmentName: row.DepartmentName,
      DisciplineID: row.DisciplineID,
    };
    departmentModalOpen = true;
  }

  async function handleSaveDepartment() {
    savingDepartment = true;
    try {
      if (departmentModalMode === 'create') {
        await createDepartment(departmentFormData);
        toastSuccess('Department created successfully');
      } else {
        await updateDepartment(departmentFormData);
        toastSuccess('Department updated successfully');
      }
      departmentModalOpen = false;
      await loadDepartments();
    } catch (err) {
      toastError(err.message || 'Failed to save department');
    } finally {
      savingDepartment = false;
    }
  }

  function confirmDeleteDepartment(row) {
    deleteDepartmentItem = row;
    deleteDepartmentConfirmOpen = true;
  }

  async function handleDeleteDepartment() {
    deletingDepartment = true;
    try {
      await deleteDepartment(deleteDepartmentItem.DepartmentID);
      toastSuccess('Department deleted successfully');
      deleteDepartmentConfirmOpen = false;
      deleteDepartmentItem = null;
      await loadDepartments();
    } catch (err) {
      toastError(err.message || 'Failed to delete department');
    } finally {
      deletingDepartment = false;
    }
  }
</script>

<div class="p-4">
  <!-- Header -->
  <div class="flex items-center gap-4 mb-6">
    <a href="/master-data" class="btn btn-ghost btn-circle">
      <ArrowLeft class="w-5 h-5" />
    </a>
    <div class="flex-1">
      <h1 class="text-xl font-bold text-gray-800">Organization Structure</h1>
      <p class="text-sm text-gray-600">Manage disciplines and departments</p>
    </div>
  </div>

  <!-- Tabs -->
  <div class="tabs tabs-boxed bg-base-200 mb-4">
    <button
      class="tab gap-2 {activeTab === 'disciplines' ? 'tab-active' : ''}"
      onclick={() => (activeTab = 'disciplines')}
    >
      <Building2 class="w-4 h-4" />
      Disciplines
      <span class="badge badge-sm">{disciplines.length}</span>
    </button>
    <button
      class="tab gap-2 {activeTab === 'departments' ? 'tab-active' : ''}"
      onclick={() => (activeTab = 'departments')}
    >
      <Users class="w-4 h-4" />
      Departments
      <span class="badge badge-sm">{departments.length}</span>
    </button>
  </div>

  <!-- Disciplines Tab -->
  {#if activeTab === 'disciplines'}
    <div class="space-y-4">
      <!-- Search and Add -->
      <div class="flex flex-col sm:flex-row gap-4">
        <div class="flex-1 relative">
          <Search class="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
          <input
            type="text"
            placeholder="Search disciplines by code or name..."
            class="input input-bordered w-full pl-10"
            bind:value={disciplineSearch}
          />
        </div>
        <button class="btn btn-primary" onclick={openCreateDisciplineModal}>
          <Plus class="w-4 h-4 mr-2" />
          Add Discipline
        </button>
      </div>

      <!-- Disciplines Table -->
      <div class="bg-base-100 rounded-lg shadow border border-base-200">
        <DataTable
          columns={disciplineColumns}
          data={filteredDisciplines}
          loading={loadingDisciplines}
          emptyMessage="No disciplines found"
          hover={true}
          bordered={false}
        >
          {#snippet cell({ column, row })}
            {#if column.key === 'actions'}
              <div class="flex justify-center gap-2">
                <button
                  class="btn btn-sm btn-ghost"
                  onclick={() => openEditDisciplineModal(row)}
                  title="Edit discipline"
                >
                  <Edit2 class="w-4 h-4" />
                </button>
                <button
                  class="btn btn-sm btn-ghost text-error"
                  onclick={() => confirmDeleteDiscipline(row)}
                  title="Delete discipline"
                >
                  <Trash2 class="w-4 h-4" />
                </button>
              </div>
            {:else}
              {row[column.key] || '-'}
            {/if}
          {/snippet}
        </DataTable>
      </div>
    </div>
  {/if}

  <!-- Departments Tab -->
  {#if activeTab === 'departments'}
    <div class="space-y-4">
      <!-- Search and Add -->
      <div class="flex flex-col sm:flex-row gap-4">
        <div class="flex-1 relative">
          <Search class="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
          <input
            type="text"
            placeholder="Search departments by code or name..."
            class="input input-bordered w-full pl-10"
            bind:value={departmentSearch}
          />
        </div>
        <button class="btn btn-primary" onclick={openCreateDepartmentModal}>
          <Plus class="w-4 h-4 mr-2" />
          Add Department
        </button>
      </div>

      <!-- Departments Table -->
      <div class="bg-base-100 rounded-lg shadow border border-base-200">
        <DataTable
          columns={departmentColumns}
          data={filteredDepartments}
          loading={loadingDepartments}
          emptyMessage="No departments found"
          hover={true}
          bordered={false}
        >
          {#snippet cell({ column, row })}
            {#if column.key === 'actions'}
              <div class="flex justify-center gap-2">
                <button
                  class="btn btn-sm btn-ghost"
                  onclick={() => openEditDepartmentModal(row)}
                  title="Edit department"
                >
                  <Edit2 class="w-4 h-4" />
                </button>
                <button
                  class="btn btn-sm btn-ghost text-error"
                  onclick={() => confirmDeleteDepartment(row)}
                  title="Delete department"
                >
                  <Trash2 class="w-4 h-4" />
                </button>
              </div>
            {:else}
              {row[column.key] || '-'}
            {/if}
          {/snippet}
        </DataTable>
      </div>
    </div>
  {/if}
</div>

<!-- Discipline Modal -->
<Modal
  bind:open={disciplineModalOpen}
  title={disciplineModalMode === 'create' ? 'Add Discipline' : 'Edit Discipline'}
  size="md"
>
  <form class="space-y-4" onsubmit={(e) => { e.preventDefault(); handleSaveDiscipline(); }}>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="form-control">
        <label class="label" for="disciplineCode">
          <span class="label-text text-sm font-medium">Discipline Code</span>
          <span class="label-text-alt text-xs text-error">*</span>
        </label>
        <input
          id="disciplineCode"
          type="text"
          class="input input-sm input-bordered w-full"
          bind:value={disciplineFormData.DisciplineCode}
          placeholder="e.g., HEM, CHEM"
          required
        />
        <span class="label-text-alt text-xs text-gray-500">Unique code for this discipline</span>
      </div>
      <div class="form-control">
        <label class="label" for="disciplineName">
          <span class="label-text text-sm font-medium">Discipline Name</span>
          <span class="label-text-alt text-xs text-error">*</span>
        </label>
        <input
          id="disciplineName"
          type="text"
          class="input input-sm input-bordered w-full"
          bind:value={disciplineFormData.DisciplineName}
          placeholder="e.g., Hematology"
          required
        />
        <span class="label-text-alt text-xs text-gray-500">Display name</span>
      </div>
    </div>
    <div class="form-control">
      <label class="label" for="parentDiscipline">
        <span class="label-text text-sm font-medium">Parent Discipline</span>
      </label>
      <select
        id="parentDiscipline"
        class="select select-sm select-bordered w-full"
        bind:value={disciplineFormData.Parent}
      >
        <option value={null}>None (Top-level discipline)</option>
        {#each disciplines.filter((d) => d.DisciplineID !== disciplineFormData.DisciplineID) as discipline}
          <option value={discipline.DisciplineID}>{discipline.DisciplineName}</option>
        {/each}
      </select>
      <span class="label-text-alt text-xs text-gray-500">Optional parent for hierarchical structure</span>
    </div>
  </form>
  {#snippet footer()}
    <button
      class="btn btn-ghost"
      onclick={() => (disciplineModalOpen = false)}
      type="button"
      disabled={savingDiscipline}
    >
      Cancel
    </button>
    <button
      class="btn btn-primary"
      onclick={handleSaveDiscipline}
      disabled={savingDiscipline}
      type="button"
    >
      {#if savingDiscipline}
        <span class="loading loading-spinner loading-sm mr-2"></span>
      {/if}
      {savingDiscipline ? 'Saving...' : 'Save'}
    </button>
  {/snippet}
</Modal>

<!-- Department Modal -->
<Modal
  bind:open={departmentModalOpen}
  title={departmentModalMode === 'create' ? 'Add Department' : 'Edit Department'}
  size="md"
>
  <form class="space-y-4" onsubmit={(e) => { e.preventDefault(); handleSaveDepartment(); }}>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="form-control">
        <label class="label" for="departmentCode">
          <span class="label-text text-sm font-medium">Department Code</span>
          <span class="label-text-alt text-xs text-error">*</span>
        </label>
        <input
          id="departmentCode"
          type="text"
          class="input input-sm input-bordered w-full"
          bind:value={departmentFormData.DepartmentCode}
          placeholder="e.g., HEM-OUT"
          required
        />
        <span class="label-text-alt text-xs text-gray-500">Unique code for this department</span>
      </div>
      <div class="form-control">
        <label class="label" for="departmentName">
          <span class="label-text text-sm font-medium">Department Name</span>
          <span class="label-text-alt text-xs text-error">*</span>
        </label>
        <input
          id="departmentName"
          type="text"
          class="input input-sm input-bordered w-full"
          bind:value={departmentFormData.DepartmentName}
          placeholder="e.g., Outpatient Hematology"
          required
        />
        <span class="label-text-alt text-xs text-gray-500">Display name</span>
      </div>
    </div>
    <div class="form-control">
      <label class="label" for="discipline">
        <span class="label-text text-sm font-medium">Discipline</span>
        <span class="label-text-alt text-xs text-error">*</span>
      </label>
      <select
        id="discipline"
        class="select select-sm select-bordered w-full"
        bind:value={departmentFormData.DisciplineID}
        required
      >
        <option value={null}>Select discipline...</option>
        {#each disciplines as discipline}
          <option value={discipline.DisciplineID}>{discipline.DisciplineName}</option>
        {/each}
      </select>
      <span class="label-text-alt text-xs text-gray-500">The discipline this department belongs to</span>
    </div>
  </form>
  {#snippet footer()}
    <button
      class="btn btn-ghost"
      onclick={() => (departmentModalOpen = false)}
      type="button"
      disabled={savingDepartment}
    >
      Cancel
    </button>
    <button
      class="btn btn-primary"
      onclick={handleSaveDepartment}
      disabled={savingDepartment}
      type="button"
    >
      {#if savingDepartment}
        <span class="loading loading-spinner loading-sm mr-2"></span>
      {/if}
      {savingDepartment ? 'Saving...' : 'Save'}
    </button>
  {/snippet}
</Modal>

<!-- Delete Discipline Confirmation -->
<Modal bind:open={deleteDisciplineConfirmOpen} title="Confirm Delete Discipline" size="sm">
  <div class="py-2">
    <p class="text-base-content/80">Are you sure you want to delete this discipline?</p>
    <div class="bg-base-200 rounded-lg p-3 mt-3">
      <p class="text-sm">
        <span class="text-gray-500">Code:</span>
        <strong class="text-base-content font-mono">{deleteDisciplineItem?.DisciplineCode}</strong>
      </p>
      <p class="text-sm mt-1">
        <span class="text-gray-500">Name:</span>
        <strong class="text-base-content">{deleteDisciplineItem?.DisciplineName}</strong>
      </p>
    </div>
    <p class="text-sm text-error mt-3 flex items-center gap-2">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
        />
      </svg>
      This action cannot be undone.
    </p>
  </div>
  {#snippet footer()}
    <button
      class="btn btn-ghost"
      onclick={() => (deleteDisciplineConfirmOpen = false)}
      type="button"
      disabled={deletingDiscipline}
    >
      Cancel
    </button>
    <button
      class="btn btn-error"
      onclick={handleDeleteDiscipline}
      disabled={deletingDiscipline}
      type="button"
    >
      {#if deletingDiscipline}
        <span class="loading loading-spinner loading-sm mr-2"></span>
      {/if}
      {deletingDiscipline ? 'Deleting...' : 'Delete'}
    </button>
  {/snippet}
</Modal>

<!-- Delete Department Confirmation -->
<Modal bind:open={deleteDepartmentConfirmOpen} title="Confirm Delete Department" size="sm">
  <div class="py-2">
    <p class="text-base-content/80">Are you sure you want to delete this department?</p>
    <div class="bg-base-200 rounded-lg p-3 mt-3">
      <p class="text-sm">
        <span class="text-gray-500">Code:</span>
        <strong class="text-base-content font-mono">{deleteDepartmentItem?.DepartmentCode}</strong>
      </p>
      <p class="text-sm mt-1">
        <span class="text-gray-500">Name:</span>
        <strong class="text-base-content">{deleteDepartmentItem?.DepartmentName}</strong>
      </p>
    </div>
    <p class="text-sm text-error mt-3 flex items-center gap-2">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
        />
      </svg>
      This action cannot be undone.
    </p>
  </div>
  {#snippet footer()}
    <button
      class="btn btn-ghost"
      onclick={() => (deleteDepartmentConfirmOpen = false)}
      type="button"
      disabled={deletingDepartment}
    >
      Cancel
    </button>
    <button
      class="btn btn-error"
      onclick={handleDeleteDepartment}
      disabled={deletingDepartment}
      type="button"
    >
      {#if deletingDepartment}
        <span class="loading loading-spinner loading-sm mr-2"></span>
      {/if}
      {deletingDepartment ? 'Deleting...' : 'Delete'}
    </button>
  {/snippet}
</Modal>
