'use client'

import { useField } from '@payloadcms/ui'
import { ImageUploadSlot } from './ImageUploadSlot'
import { InlineEditable } from './InlineEditable'
import { PriceEditable } from './PriceEditable'
import { SettingsDrawer } from './SettingsDrawer'
import './panel.css'

export default function ProductPreviewEditor() {
  const { value: displayName } = useField<string>({ path: 'productDisplayName' })

  return (
    <div className="rebours-admin-panel">
      <div className="rebours-admin-panel__hint">
        Cliquez sur un texte ou sur l&apos;image pour modifier. Les changements sont enregistrés automatiquement.
      </div>

      <div className="rebours-admin-panel__grid">
        <div className="rebours-admin-panel__img-col">
          <ImageUploadSlot displayName={displayName} />
        </div>

        <div className="rebours-admin-panel__info-col">
          <p className="panel-index">
            <InlineEditable path="index" placeholder="PROJET_001" />
          </p>
          <h2>
            <InlineEditable path="productDisplayName" as="span" placeholder="Nom du produit" />
          </h2>
          <hr />

          <div className="panel-meta">
            <div className="panel-meta-row">
              <span className="meta-key">TYPE</span>
              <span>
                <InlineEditable path="type" placeholder="LAMPE DE TABLE" />
              </span>
            </div>
            <div className="panel-meta-row">
              <span className="meta-key">MATÉRIAUX</span>
              <span>
                <InlineEditable path="materials" placeholder="Matériaux" />
              </span>
            </div>
            <div className="panel-meta-row">
              <span className="meta-key">ANNÉE</span>
              <span>
                <InlineEditable path="year" placeholder="2026" />
              </span>
            </div>
            <div className="panel-meta-row">
              <span className="meta-key">STATUS</span>
              <span className="red">
                <InlineEditable path="status" placeholder="PROTOTYPE [80%]" />
              </span>
            </div>
          </div>
          <hr />

          <p className="panel-desc">
            <InlineEditable
              path="description"
              multiline
              placeholder="Description du produit…"
            />
          </p>
          <hr />

          <details className="accordion" open>
            <summary>
              SPÉCIFICATIONS TECHNIQUES <span>↓</span>
            </summary>
            <div className="accordion-body">
              <InlineEditable
                path="specs"
                as="div"
                multiline
                placeholder="Spécifications techniques…"
              />
            </div>
          </details>

          <details className="accordion" open>
            <summary>
              NOTES DE CONCEPTION <span>↓</span>
            </summary>
            <div className="accordion-body">
              <InlineEditable
                path="notes"
                as="div"
                multiline
                placeholder="Notes de conception…"
              />
            </div>
          </details>

          <div>
            <div className="checkout-price-line">
              <PriceEditable />
              <span className="checkout-edition">ÉDITION UNIQUE — 1/1</span>
            </div>
            <div className="checkout-btn">[ COMMANDER CETTE PIÈCE ]</div>
          </div>

          <div className="panel-footer">■ COLLECTION_001 — W.I.P</div>
        </div>
      </div>

      <SettingsDrawer />
    </div>
  )
}
