import React from 'react'
import TagPicker from '../tags/TagPicker'
import Checkbox from '../../Components/ui/Checkbox'
import SchedulePublishPicker from './SchedulePublishPicker'
import UploadDescriptionEditor from './UploadDescriptionEditor'

export default function UploadSidebar({
  title = 'Artwork details',
  description = 'Complete metadata before publishing',
  showHeader = true,
  metadata,
  suggestedTags = [],
  errors = {},
  publishMode,
  scheduledAt,
  timezone,
  onPublishModeChange,
  onScheduleAt,
  onChangeTitle,
  onChangeTags,
  onChangeDescription,
  onToggleRights,
}) {
  return (
    <div className="space-y-5">
      {showHeader && (
        <div className="mb-5 rounded-xl border border-white/8 bg-white/[0.04] p-4">
          <h3 className="text-lg font-semibold text-white">{title}</h3>
          <p className="mt-1 text-sm text-white/65">{description}</p>
        </div>
      )}

      <div className="space-y-5">
        <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
          <div className="mb-3">
            <h4 className="text-sm font-semibold text-white">Basics</h4>
            <p className="mt-1 text-xs text-white/60">Add a clear title and short description.</p>
          </div>

          <div className="space-y-4">
            <label className="block">
              <span className="text-sm font-medium text-white/90">Title <span className="text-red-300">*</span></span>
              <input
                id="upload-sidebar-title"
                value={metadata.title}
                onChange={(event) => onChangeTitle?.(event.target.value)}
                className={`mt-2 w-full rounded-xl border bg-white/10 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 ${errors.title ? 'border-red-300/60 focus:ring-red-300/70' : 'border-white/15 focus:ring-sky-300/70'}`}
                placeholder="Give your artwork a clear title"
              />
              {errors.title && <p className="mt-1 text-xs text-red-200">{errors.title}</p>}
            </label>

            <label className="block">
              <span className="text-sm font-medium text-white/90">Description <span className="text-red-300">*</span></span>
              <div className="mt-2">
                <UploadDescriptionEditor
                  id="upload-sidebar-description"
                  value={metadata.description}
                  onChange={onChangeDescription}
                  placeholder="Describe your artwork, tools, inspiration..."
                  error={Array.isArray(errors.description) ? errors.description[0] : errors.description}
                  rows={9}
                />
              </div>
              <p className="mt-2 text-xs text-white/50">This upload editor only allows safe formatting and emoji. Images, embeds, and raw HTML are blocked.</p>
              {errors.description && <p className="mt-1 text-xs text-red-200">{Array.isArray(errors.description) ? errors.description[0] : errors.description}</p>}
            </label>
          </div>
        </section>

        <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
          <div className="mb-3">
            <h4 className="text-sm font-semibold text-white">Tags</h4>
            <p className="mt-1 text-xs text-white/60">Use keywords people would search for. Press Enter, comma, or Tab to add a tag.</p>
          </div>
          <TagPicker
            value={metadata.tags}
            onChange={(nextTags) => onChangeTags?.(nextTags)}
            suggestedTags={suggestedTags}
            searchEndpoint="/api/tags/search"
            popularEndpoint="/api/tags/popular"
            error={errors.tags}
          />
        </section>

        {typeof publishMode === 'string' && typeof onPublishModeChange === 'function' && (
          <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
            <div className="mb-3">
              <h4 className="text-sm font-semibold text-white">Publish settings</h4>
              <p className="mt-1 text-xs text-white/60">Choose whether this artwork should publish immediately or on a schedule.</p>
            </div>

            <SchedulePublishPicker
              mode={publishMode}
              scheduledAt={scheduledAt}
              timezone={timezone}
              onModeChange={onPublishModeChange}
              onScheduleAt={onScheduleAt}
              disabled={false}
            />
          </section>
        )}

        <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
          <Checkbox
            id="upload-sidebar-rights"
            checked={Boolean(metadata.rightsAccepted)}
            onChange={(event) => onToggleRights?.(event.target.checked)}
            variant="emerald"
            size={20}
            label="I confirm I own the rights to this content."
            hint="Required before publishing."
            error={errors.rights}
            required
          />
        </section>
      </div>
    </div>
  )
}