field.file()

import { useState } from 'react'
import { field, useFormBridge, type FileValue } from '@runilib/react-formbridge'

const schema = {
  avatar: field.file('Avatar')
    .accept(['image/jpeg', 'image/png', 'image/webp'])
    .maxSize(5 * 1024 * 1024)
    .preview(140)
    .required('Please upload a photo.'),
  attachments: field.file('Attachments')
    .multiple(3)
    .accept(['image/png', 'image/jpeg', 'application/pdf'])
    .maxSize(2 * 1024 * 1024)
    .dragLabel('Drop up to 3 files here (PNG, JPG, PDF · 2 MB each)'),
}

function formatSize(bytes: number): string {
  if (bytes < 1024) return bytes + ' B'
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
  return (bytes / (1024 * 1024)).toFixed(2) + ' MB'
}

function summarize(value: FileValue | FileValue[] | null): string {
  if (!value) return 'empty'
  const list = Array.isArray(value) ? value : [value]
  if (list.length === 0) return 'empty'
  return list
    .map((file) => `${file.name} · ${file.type} · ${formatSize(file.size)}`)
    .join('\n')
}

function toFileValue(file: File): FileValue {
  return {
    uri: URL.createObjectURL(file),
    name: file.name,
    type: file.type || 'application/octet-stream',
    size: file.size,
  }
}

function FileField({
  form,
  name,
  accept,
  multiple = false,
  preview = false,
}) {
  const file = form.fieldController(name)
  const selected = Array.isArray(file.value)
    ? file.value
    : file.value
      ? [file.value]
      : []

  if (!file.visible) return null

  return (
    <label
      style={{
        display: 'grid',
        gap: 8,
        padding: 16,
        border: `1px dashed ${file.error ? '#dc2626' : '#9ca3af'}`,
        borderRadius: 12,
        background: '#fff',
      }}
    >
      <strong>{file.label}{file.required ? ' *' : ''}</strong>
      <span>Drop files here or choose them from your device.</span>
      <input
        type="file"
        accept={accept}
        multiple={multiple}
        disabled={file.disabled}
        onChange={(event) => {
          const values = Array.from(event.target.files ?? []).map(toFileValue)
          file.onChange(multiple ? values : (values[0] ?? null))
        }}
        onBlur={file.onBlur}
      />
      {preview
        ? selected.map((value) =>
            value.type.startsWith('image/') ? (
              <img
                key={value.uri}
                src={value.uri}
                alt={value.name}
                style={{ width: 96, height: 96, objectFit: 'cover', borderRadius: 8 }}
              />
            ) : null,
          )
        : null}
      {selected.map((value) => (
        <span key={value.uri}>{value.name} · {formatSize(value.size)}</span>
      ))}
      {file.error ? <span role="alert" style={{ color: '#dc2626' }}>{file.error}</span> : null}
    </label>
  )
}

export function FilePlaygroundWeb() {
  const [submitted, setSubmitted] = useState<Record<string, unknown> | null>(null)
  const form = useFormBridge(schema, {
    validateOn: 'onBlur',
    revalidateOn: 'onChange',
  })
  const { Form, fieldController, state } = form

  return (
    <div
      style={{
        fontFamily: 'sans-serif',
        padding: 20,
        background: '#f5f7fb',
        display: 'grid',
        gap: 16,
      }}
    >
      <div>
        <h3 style={{ margin: '0 0 8px' }}>Interactive file uploads</h3>
        <p style={{ margin: 0, color: '#4b5563' }}>
          Pick an avatar and a few attachments, then submit to inspect the
          platform-agnostic <code>FileValue</code> payload FormBridge exposes.
        </p>
      </div>

      <Form onSubmit={async (values) => setSubmitted(values)}>
        <div style={{ display: 'grid', gap: 16 }}>
          <FileField
            form={form}
            name="avatar"
            accept="image/jpeg,image/png,image/webp"
            preview
          />
          <FileField
            form={form}
            name="attachments"
            accept="image/png,image/jpeg,application/pdf"
            multiple
          />
          <button type="submit" disabled={!state.isValid}>Upload</button>
        </div>
      </Form>

      <div style={{ display: 'grid', gap: 12 }}>
        <div
          style={{
            border: '1px solid #d6d9e0',
            borderRadius: 12,
            padding: 12,
            background: '#fff',
          }}
        >
          <strong>Live summary</strong>
          <pre style={{ marginBottom: 0, whiteSpace: 'pre-wrap' }}>
{`avatar:
${summarize(state.values.avatar)}

attachments:
${summarize(state.values.attachments)}`}
          </pre>
        </div>

        <div
          style={{
            border: '1px solid #d6d9e0',
            borderRadius: 12,
            padding: 12,
            background: '#fff',
          }}
        >
          <strong>Last submit (raw FileValue payload)</strong>
          <pre style={{ marginBottom: 0, whiteSpace: 'pre-wrap' }}>
            {JSON.stringify(
              submitted,
              (key, value) =>
                key === 'base64' && typeof value === 'string'
                  ? `<${value.length} chars>`
                  : value,
              2,
            )}
          </pre>
        </div>
      </div>
    </div>
  )
}

export default FilePlaygroundWeb