---
interface Props {
  displayName?: string
  description?: string
  avatar?: string
  banner?: string
  submitLabel?: string
  action?: string
}

const {
  displayName = '',
  description = '',
  avatar = '',
  banner = '',
  submitLabel = 'Create Profile',
  action = '/api/profile/create'
} = Astro.props
---

<form
  method="POST"
  action={action}
  enctype="multipart/form-data"
  class="space-y-4"
>
  <div class="form-control">
    <label class="label">
      <span class="label-text">Display Name</span>
      <span class="label-text-alt">Max 64 characters</span>
    </label>
    <input
      type="text"
      name="displayName"
      placeholder="Enter your display name"
      class="input input-bordered w-full"
      value={displayName}
      maxlength="64"
      required
    />
  </div>

  <div class="form-control">
    <label class="label">
      <span class="label-text">Description</span>
      <span class="label-text-alt">Max 256 characters</span>
    </label>
    <textarea
      name="description"
      placeholder="Tell us about yourself"
      class="textarea textarea-bordered h-24"
      maxlength="256"
    >{description}</textarea>
  </div>

  <div class="form-control">
    <label class="label">
      <span class="label-text">Avatar</span>
      <span class="label-text-alt">PNG or JPEG, max 1MB</span>
    </label>
    {avatar && (
      <div class="avatar mb-2">
        <div class="w-24 rounded-full">
          <img src={avatar} alt="Current avatar" />
        </div>
      </div>
    )}
    <input
      type="file"
      name="avatar"
      accept="image/png,image/jpeg"
      class="file-input file-input-bordered w-full"
    />
  </div>

  <div class="form-control">
    <label class="label">
      <span class="label-text">Banner</span>
      <span class="label-text-alt">PNG or JPEG, max 1MB</span>
    </label>
    {banner && (
      <div class="mb-2">
        <img src={banner} alt="Current banner" class="w-full h-32 object-cover rounded-lg" />
      </div>
    )}
    <input
      type="file"
      name="banner"
      accept="image/png,image/jpeg"
      class="file-input file-input-bordered w-full"
    />
  </div>

  <div class="form-control mt-6">
    <button type="submit" class="btn btn-primary w-full">
      {submitLabel}
    </button>
  </div>
</form>

<script>
  // Client-side validation for file sizes
  const form = document.querySelector('form')
  if (form) {
    form.addEventListener('submit', (e) => {
      const avatarInput = form.querySelector('input[name="avatar"]') as HTMLInputElement
      const bannerInput = form.querySelector('input[name="banner"]') as HTMLInputElement

      const maxSize = 1000000 // 1MB

      if (avatarInput?.files?.[0] && avatarInput.files[0].size > maxSize) {
        e.preventDefault()
        alert('Avatar file size must be less than 1MB')
        return
      }

      if (bannerInput?.files?.[0] && bannerInput.files[0].size > maxSize) {
        e.preventDefault()
        alert('Banner file size must be less than 1MB')
        return
      }
    })
  }
</script>