<template>
  <AppLayout>
    <div class="links-page">
      <header class="page-header">
        <div>
          <h1>Links</h1>
          <p class="subtitle">Manage your short links</p>
        </div>
        <div class="view-toggle">
          <button :class="{ active: !showDeleted }" @click="showDeleted = false">
            Active
          </button>
          <button :class="{ active: showDeleted }" @click="toggleDeleted">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="3 6 5 6 21 6"/>
              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
            </svg>
            Trash
          </button>
        </div>
        <div class="header-actions">
          <button @click="showBulkModal = true" class="ghost">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
              <polyline points="17 8 12 3 7 8"/>
              <line x1="12" y1="3" x2="12" y2="15"/>
            </svg>
            Bulk Import
          </button>
          <button @click="showCreateModal = true" class="cta">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="12" y1="5" x2="12" y2="19"/>
              <line x1="5" y1="12" x2="19" y2="12"/>
            </svg>
            Create Link
          </button>
        </div>
      </header>

      <div class="links-list" v-if="linksStore.links.length">
        <div
          v-for="link in linksStore.links"
          :key="link.id"
          class="link-card"
        >
          <div class="link-main">
            <div class="link-info">
              <h3 class="link-title">{{ link.title || link.slug }}</h3>
              <div class="link-urls">
                <span class="short-url" @click="copyToClipboard(getShortUrl(link))">
                  {{ getShortUrl(link) }}
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                  </svg>
                </span>
                <span class="dest-url">{{ truncateUrl(link.destinationUrl) }}</span>
              </div>
            </div>
            <div class="link-stats">
              <span class="stat">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M15 15l-2 5L9 9l11 4-5 2z"/>
                </svg>
                {{ link.clickCount || 0 }}
              </span>
              <span :class="['status-badge', link.status.toLowerCase()]">
                {{ link.status }}
              </span>
            </div>
          </div>
          <div class="link-actions">
            <button @click="editLink(link)" class="action-btn" title="Edit">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
              </svg>
            </button>
            <router-link :to="`/links/${link.id}`" class="action-btn" title="Analytics">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M18 20V10"/>
                <path d="M12 20V4"/>
                <path d="M6 20v-6"/>
              </svg>
            </router-link>
            <button @click="confirmDelete(link)" class="action-btn delete" title="Delete">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="3 6 5 6 21 6"/>
                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <div v-else class="empty-state">
        <div class="empty-icon">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
          </svg>
        </div>
        <h2>No links yet</h2>
        <p>Create your first short link to get started</p>
        <button @click="showCreateModal = true" class="cta">Create Link</button>
      </div>

      <!-- Create/Edit Modal -->
      <div v-if="showCreateModal" class="modal-overlay" @click.self="closeModal">
        <div class="modal">
          <div class="modal-header">
            <h2>{{ editingLink ? 'Edit Link' : 'Create Link' }}</h2>
            <button @click="closeModal" class="close-btn">&times;</button>
          </div>

          <form @submit.prevent="saveLink" class="modal-form">
            <div class="form-group">
              <label for="destinationUrl">Destination URL *</label>
              <input
                id="destinationUrl"
                v-model="formData.destinationUrl"
                type="url"
                placeholder="https://example.com/page"
                required
              />
            </div>

            <div class="form-group">
              <label for="title">Title (optional)</label>
              <input
                id="title"
                v-model="formData.title"
                type="text"
                placeholder="My awesome link"
              />
            </div>

            <div class="form-group">
              <label for="slug">Custom slug (optional)</label>
              <input
                id="slug"
                v-model="formData.slug"
                type="text"
                placeholder="my-link"
                pattern="[a-zA-Z0-9-]+"
              />
              <p class="hint">Leave empty for auto-generated slug</p>
            </div>

            <!-- UTM Builder -->
            <div class="utm-section">
              <button type="button" class="utm-toggle" @click="showUtmBuilder = !showUtmBuilder">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M12 5v14M5 12h14"/>
                </svg>
                {{ showUtmBuilder ? 'Hide' : 'Add' }} UTM Parameters
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" :class="{ rotated: showUtmBuilder }">
                  <path d="M6 9l6 6 6-6"/>
                </svg>
              </button>

              <div v-if="showUtmBuilder" class="utm-fields">
                <div class="utm-presets">
                  <span class="utm-preset-label">Presets:</span>
                  <button type="button" @click="applyUtmPreset('google')" class="utm-preset-btn">Google Ads</button>
                  <button type="button" @click="applyUtmPreset('facebook')" class="utm-preset-btn">Facebook</button>
                  <button type="button" @click="applyUtmPreset('email')" class="utm-preset-btn">Email</button>
                  <button type="button" @click="applyUtmPreset('social')" class="utm-preset-btn">Social</button>
                </div>

                <div class="form-row">
                  <div class="form-group">
                    <label for="utm_source">Source</label>
                    <input id="utm_source" v-model="utmParams.source" type="text" placeholder="google, facebook, newsletter" />
                  </div>
                  <div class="form-group">
                    <label for="utm_medium">Medium</label>
                    <input id="utm_medium" v-model="utmParams.medium" type="text" placeholder="cpc, social, email" />
                  </div>
                </div>

                <div class="form-group">
                  <label for="utm_campaign">Campaign</label>
                  <input id="utm_campaign" v-model="utmParams.campaign" type="text" placeholder="summer_sale, product_launch" />
                </div>

                <div class="form-row">
                  <div class="form-group">
                    <label for="utm_term">Term (optional)</label>
                    <input id="utm_term" v-model="utmParams.term" type="text" placeholder="keywords" />
                  </div>
                  <div class="form-group">
                    <label for="utm_content">Content (optional)</label>
                    <input id="utm_content" v-model="utmParams.content" type="text" placeholder="banner, textlink" />
                  </div>
                </div>

                <p v-if="utmPreview" class="utm-preview">
                  <strong>Preview:</strong> {{ utmPreview }}
                </p>
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label for="expiresAt">Expires (optional)</label>
                <input
                  id="expiresAt"
                  v-model="formData.expiresAt"
                  type="datetime-local"
                />
              </div>

              <div class="form-group">
                <label for="password">Password (optional)</label>
                <input
                  id="password"
                  v-model="formData.password"
                  type="password"
                  placeholder="Password protect"
                />
              </div>
            </div>

            <div v-if="formError" class="error-message">
              {{ formError }}
            </div>

            <div class="modal-actions">
              <button type="button" @click="closeModal" class="ghost">Cancel</button>
              <button type="submit" class="cta" :disabled="saving">
                {{ saving ? 'Saving...' : (editingLink ? 'Update' : 'Create') }}
              </button>
            </div>
          </form>
        </div>
      </div>

      <!-- Delete Confirmation Modal -->
      <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
        <div class="modal modal-sm">
          <h2>Delete Link?</h2>
          <p>Are you sure you want to delete this link? This action cannot be undone.</p>
          <div class="modal-actions">
            <button @click="showDeleteModal = false" class="ghost">Cancel</button>
            <button @click="deleteLink" class="cta danger">Delete</button>
          </div>
        </div>
      </div>

      <!-- Bulk Import Modal -->
      <div v-if="showBulkModal" class="modal-overlay" @click.self="closeBulkModal">
        <div class="modal modal-lg">
          <div class="modal-header">
            <h2>Bulk Import Links</h2>
            <button @click="closeBulkModal" class="close-btn">&times;</button>
          </div>

          <div class="bulk-content">
            <p class="bulk-instructions">Paste URLs below, one per line. You can optionally add a title after the URL separated by a comma.</p>
            <p class="bulk-example">Example: https://example.com, My Link Title</p>

            <textarea
              v-model="bulkUrls"
              placeholder="https://example.com&#10;https://another-site.com, My Page&#10;https://third-url.com"
              rows="10"
              class="bulk-textarea"
            ></textarea>

            <div class="bulk-stats">
              <span>{{ parsedBulkLinks.length }} URLs detected</span>
            </div>

            <div v-if="bulkError" class="error-message">{{ bulkError }}</div>

            <div v-if="bulkResults" class="bulk-results">
              <div v-if="bulkResults.created.length" class="bulk-success">
                <strong>{{ bulkResults.created.length }}</strong> links created successfully
              </div>
              <div v-if="bulkResults.errors.length" class="bulk-errors">
                <strong>{{ bulkResults.errors.length }}</strong> errors:
                <ul>
                  <li v-for="(err, i) in bulkResults.errors.slice(0, 5)" :key="i">
                    {{ err.url }}: {{ err.error }}
                  </li>
                  <li v-if="bulkResults.errors.length > 5">
                    ...and {{ bulkResults.errors.length - 5 }} more
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="modal-actions">
            <button @click="closeBulkModal" class="ghost">{{ bulkResults ? 'Close' : 'Cancel' }}</button>
            <button
              v-if="!bulkResults"
              @click="importBulkLinks"
              class="cta"
              :disabled="bulkImporting || parsedBulkLinks.length === 0"
            >
              {{ bulkImporting ? 'Importing...' : `Import ${parsedBulkLinks.length} Links` }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import AppLayout from '../../components/layout/AppLayout.vue';
import { useWorkspaceStore } from '../../stores/workspace.js';
import { useLinksStore } from '../../stores/links.js';
import { linksApi } from '../../api/links.js';

const workspaceStore = useWorkspaceStore();
const linksStore = useLinksStore();

const showCreateModal = ref(false);
const showDeleteModal = ref(false);
const showBulkModal = ref(false);
const showUtmBuilder = ref(false);
const showDeleted = ref(false);
const editingLink = ref(null);
const deletingLink = ref(null);
const saving = ref(false);
const formError = ref('');

// Bulk import state
const bulkUrls = ref('');
const bulkImporting = ref(false);
const bulkError = ref('');
const bulkResults = ref(null);

const formData = ref({
  destinationUrl: '',
  title: '',
  slug: '',
  expiresAt: '',
  password: '',
});

const utmParams = ref({
  source: '',
  medium: '',
  campaign: '',
  term: '',
  content: '',
});

const utmPresets = {
  google: { source: 'google', medium: 'cpc', campaign: '' },
  facebook: { source: 'facebook', medium: 'social', campaign: '' },
  email: { source: 'newsletter', medium: 'email', campaign: '' },
  social: { source: 'twitter', medium: 'social', campaign: '' },
};

const applyUtmPreset = (preset) => {
  const p = utmPresets[preset];
  if (p) {
    utmParams.value = { ...utmParams.value, ...p };
  }
};

const utmPreview = computed(() => {
  const params = [];
  if (utmParams.value.source) params.push(`utm_source=${utmParams.value.source}`);
  if (utmParams.value.medium) params.push(`utm_medium=${utmParams.value.medium}`);
  if (utmParams.value.campaign) params.push(`utm_campaign=${utmParams.value.campaign}`);
  if (utmParams.value.term) params.push(`utm_term=${utmParams.value.term}`);
  if (utmParams.value.content) params.push(`utm_content=${utmParams.value.content}`);
  return params.length ? '?' + params.join('&') : '';
});

const buildUrlWithUtm = (baseUrl) => {
  if (!utmPreview.value) return baseUrl;
  const separator = baseUrl.includes('?') ? '&' : '?';
  return baseUrl + separator + utmPreview.value.substring(1);
};

const resetForm = () => {
  formData.value = {
    destinationUrl: '',
    title: '',
    slug: '',
    expiresAt: '',
    password: '',
  };
  utmParams.value = {
    source: '',
    medium: '',
    campaign: '',
    term: '',
    content: '',
  };
  showUtmBuilder.value = false;
  formError.value = '';
  editingLink.value = null;
};

const closeModal = () => {
  showCreateModal.value = false;
  resetForm();
};

const editLink = (link) => {
  editingLink.value = link;
  formData.value = {
    destinationUrl: link.destinationUrl,
    title: link.title || '',
    slug: link.slug,
    expiresAt: link.expiresAt ? new Date(link.expiresAt).toISOString().slice(0, 16) : '',
    password: '',
  };
  showCreateModal.value = true;
};

const saveLink = async () => {
  saving.value = true;
  formError.value = '';

  try {
    // Build destination URL with UTM parameters
    const finalUrl = buildUrlWithUtm(formData.value.destinationUrl);

    const data = {
      destinationUrl: finalUrl,
      title: formData.value.title || null,
      expiresAt: formData.value.expiresAt ? new Date(formData.value.expiresAt).toISOString() : null,
      password: formData.value.password || null,
    };

    if (editingLink.value) {
      await linksStore.updateLink(editingLink.value.id, data);
    } else {
      if (formData.value.slug) {
        data.slug = formData.value.slug;
      }
      await linksStore.createLink(data);
    }

    closeModal();
  } catch (err) {
    formError.value = err.message;
  } finally {
    saving.value = false;
  }
};

const confirmDelete = (link) => {
  deletingLink.value = link;
  showDeleteModal.value = true;
};

const deleteLink = async () => {
  if (deletingLink.value) {
    await linksStore.deleteLink(deletingLink.value.id);
    showDeleteModal.value = false;
    deletingLink.value = null;
  }
};

const getShortUrl = (link) => {
  return `localhost:42001/${link.slug}`;
};

const truncateUrl = (url) => {
  if (url.length > 50) {
    return url.substring(0, 50) + '...';
  }
  return url;
};

const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(`http://${text}`);
  } catch (err) {
    console.error('Failed to copy:', err);
  }
};

// Bulk import functions
const parsedBulkLinks = computed(() => {
  if (!bulkUrls.value.trim()) return [];

  return bulkUrls.value
    .split('\n')
    .map(line => line.trim())
    .filter(line => line.length > 0)
    .map(line => {
      const parts = line.split(',');
      const url = parts[0].trim();
      const title = parts.length > 1 ? parts.slice(1).join(',').trim() : null;
      return { destinationUrl: url, title };
    })
    .filter(item => {
      try {
        new URL(item.destinationUrl);
        return true;
      } catch {
        return false;
      }
    });
});

const closeBulkModal = () => {
  showBulkModal.value = false;
  bulkUrls.value = '';
  bulkError.value = '';
  bulkResults.value = null;
};

const importBulkLinks = async () => {
  if (parsedBulkLinks.value.length === 0) return;

  bulkImporting.value = true;
  bulkError.value = '';

  try {
    const result = await linksStore.bulkCreateLinks(parsedBulkLinks.value);
    bulkResults.value = result;
  } catch (err) {
    bulkError.value = err.message;
  } finally {
    bulkImporting.value = false;
  }
};

const toggleDeleted = async () => {
  showDeleted.value = true;
  await linksStore.fetchLinks({ includeDeleted: true });
};

const restoreLink = async (link) => {
  try {
    await linksStore.restoreLink(link.id);
    await linksStore.fetchLinks({ includeDeleted: showDeleted.value });
  } catch (err) {
    console.error('Failed to restore link:', err);
  }
};

onMounted(async () => {
  await linksStore.fetchLinks();
});

watch(() => workspaceStore.currentWorkspaceId, async () => {
  if (workspaceStore.currentWorkspaceId) {
    await linksStore.fetchLinks({ includeDeleted: showDeleted.value });
  }
});

watch(showDeleted, async (value) => {
  await linksStore.fetchLinks({ includeDeleted: value });
});
</script>

<style scoped>
.links-page {
  max-width: 1000px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.page-header h1 {
  font-size: 1.75rem;
  margin-bottom: 4px;
}

.subtitle {
  color: var(--muted);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.links-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.link-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.link-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 20px;
}

.link-title {
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.link-urls {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.short-url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
}

.short-url:hover {
  text-decoration: underline;
}

.dest-url {
  color: var(--muted);
  font-size: 0.85rem;
}

.link-stats {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 500;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.active {
  background: #dcfce7;
  color: #16a34a;
}

.status-badge.disabled {
  background: #fef2f2;
  color: #dc2626;
}

.status-badge.expired {
  background: #fef3c7;
  color: #d97706;
}

.link-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.action-btn:hover {
  background: var(--line);
  color: var(--ink);
}

.action-btn.delete:hover {
  background: #fef2f2;
  color: #dc2626;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: var(--surface);
  border-radius: 20px;
}

.empty-icon {
  color: var(--muted);
  margin-bottom: 16px;
}

.empty-state h2 {
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--muted);
  margin-bottom: 24px;
}

/* Modal styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: var(--surface);
  border-radius: 24px;
  padding: 32px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-sm {
  max-width: 400px;
  text-align: center;
}

.modal-sm p {
  color: var(--muted);
  margin: 16px 0 24px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg);
  border-radius: 8px;
  font-size: 1.5rem;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 500;
  font-size: 0.9rem;
}

.form-group input {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent);
}

.form-group .hint {
  font-size: 0.85rem;
  color: var(--muted);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.error-message {
  padding: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  color: #dc2626;
  font-size: 0.9rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.cta.danger {
  background: #dc2626;
}

/* UTM Builder styles */
.utm-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.utm-toggle {
  width: 100%;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.utm-toggle:hover {
  background: var(--line);
  color: var(--ink);
}

.utm-toggle svg:last-child {
  margin-left: auto;
  transition: transform 0.2s ease;
}

.utm-toggle svg.rotated {
  transform: rotate(180deg);
}

.utm-fields {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--line);
}

.utm-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.utm-preset-label {
  font-size: 0.85rem;
  color: var(--muted);
}

.utm-preset-btn {
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
}

.utm-preset-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.utm-preview {
  padding: 12px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  word-break: break-all;
}

.utm-preview strong {
  color: var(--ink);
}

/* Bulk import styles */
.header-actions {
  display: flex;
  gap: 12px;
}

.modal-lg {
  max-width: 600px;
}

.bulk-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bulk-instructions {
  color: var(--ink);
  font-size: 0.95rem;
}

.bulk-example {
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
}

.bulk-textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.9rem;
  font-family: monospace;
  resize: vertical;
  line-height: 1.6;
}

.bulk-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.bulk-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.875rem;
  color: var(--muted);
}

.bulk-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bulk-success {
  padding: 12px 16px;
  background: #dcfce7;
  border-radius: 10px;
  color: #16a34a;
  font-size: 0.9rem;
}

.bulk-errors {
  padding: 12px 16px;
  background: #fef2f2;
  border-radius: 10px;
  color: #dc2626;
  font-size: 0.9rem;
}

.bulk-errors ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.bulk-errors li {
  margin-top: 4px;
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  .link-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .link-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}
</style>
