---
import AppLayout from '../../../layouts/AppLayout.astro';
import { getContributionById, updateContribution } from '../../../lib/db';
import { withinMinutes } from '../../../lib/markdown';

const user = Astro.locals.user;
const id = Number(Astro.params.id);

const contribution = getContributionById(id);

if (
  !contribution ||
  contribution.user_id !== user.id ||
  contribution.hidden_at ||
  !withinMinutes(contribution.created_at, 10)
) {
  return Astro.redirect('/contribute');
}

let error: string | null = null;

if (Astro.request.method === 'POST') {
  const data = await Astro.request.formData();
  const body = String(data.get('body') ?? '').trim();

  if (body.length < 10) {
    error = 'Contribution must be at least 10 characters.';
  } else if (body.length > 2000) {
    error = 'Keep it under 2000 characters.';
  } else {
    updateContribution(id, body);
    return Astro.redirect(`/contribute#c-${id}`);
  }
}
---
<AppLayout title="Edit contribution" user={user}>
  <div class="page">
    <nav class="breadcrumb" aria-label="Breadcrumb">
      <a href="/contribute" class="crumb label-sm">Contribute</a>
      <span class="crumb-sep" aria-hidden="true">›</span>
      <span class="crumb label-sm crumb-current">Edit</span>
    </nav>

    <div class="content">
      <h1 class="headline-md title">Edit contribution</h1>
      <p class="body-md subtitle">
        You have 10 minutes from the time of posting to edit. After that, it locks.
      </p>

      {error && (
        <p class="form-error body-sm" role="alert">{error}</p>
      )}

      <form method="POST" class="edit-form" novalidate>
        <div class="field">
          <label for="body" class="label-sm field-label">Content</label>
          <textarea
            id="body"
            name="body"
            class="textarea body-md"
            rows="6"
            required
            maxlength="2000"
          >{contribution.body_md}</textarea>
        </div>
        <div class="form-actions">
          <a href="/contribute" class="cancel-link body-sm">Cancel</a>
          <button type="submit" class="btn-primary body-md">Save</button>
        </div>
      </form>
    </div>
  </div>
</AppLayout>

<style>
  .page {
    padding: var(--space-10) var(--space-20) var(--space-16);
    max-width: var(--content-max);
    margin: 0 auto;
  }

  .breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
  }
  .crumb {
    color: var(--on-surface-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }
  a.crumb:hover { color: var(--on-surface-variant); border-bottom: none; }
  .crumb-sep { color: var(--on-surface-muted); }
  .crumb-current { color: var(--on-surface-variant); }

  .content {
    max-width: 36rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .title {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: var(--tracking-snug);
    margin: 0;
  }

  .subtitle {
    color: var(--on-surface-variant);
    margin: 0;
  }

  .form-error {
    padding: var(--space-3) var(--space-4);
    background: rgba(185, 107, 88, 0.08);
    border-radius: var(--radius-sm);
    color: var(--pigment-terracotta);
    margin: 0;
  }

  .edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .field-label {
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--on-surface-variant);
  }

  .textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-container-lowest);
    border: var(--ghost-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-body-md);
    color: var(--on-surface);
    outline: none;
    resize: vertical;
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
    box-sizing: border-box;
    line-height: var(--leading-relaxed);
  }
  .textarea:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(120, 95, 83, 0.12);
  }

  .form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-4);
  }

  .cancel-link {
    color: var(--on-surface-muted);
    text-decoration: none;
    border-bottom: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }
  .cancel-link:hover { color: var(--on-surface-variant); border-bottom: none; }

  .btn-primary {
    padding: var(--space-3) var(--space-6);
    background: linear-gradient(180deg, var(--secondary) 0%, var(--secondary-dim) 100%);
    color: var(--on-secondary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-body-md);
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-standard);
  }
  .btn-primary:hover { opacity: 0.9; }

  @media (max-width: 767px) {
    .page { padding: var(--space-8) var(--space-5) var(--space-12); }
  }
</style>
