'use client'

import { useEffect, useState } from 'react'
import { Plus, Trash2 } from 'lucide-react'
import type { NotebookSchemaPayload, NotePropertyValues } from '@/lib/structured-views/types'
import { PropertyValueEditor, useDebouncedPropertySave } from './property-value-editor'
import { useLanguage } from '@/lib/i18n'
import { MAX_PROPERTIES_PER_NOTEBOOK } from '@/lib/structured-views/types'

type NotePropertiesSectionProps = {
  noteId: string
  schema: NotebookSchemaPayload
  initialValues?: NotePropertyValues
  onAddProperty?: () => void
  onValuesChange?: (values: NotePropertyValues) => void
  readOnly?: boolean
}

export function NotePropertiesSection({
  noteId,
  schema,
  initialValues = {},
  onAddProperty,
  onValuesChange,
  readOnly,
}: NotePropertiesSectionProps) {
  const { t } = useLanguage()
  const [values, setValues] = useState<NotePropertyValues>(initialValues)

  useEffect(() => {
    setValues(initialValues)
  }, [noteId, initialValues])

  const queueSave = useDebouncedPropertySave(noteId, (saved) => {
    setValues((v) => ({ ...v, ...saved }))
    onValuesChange?.({ ...values, ...saved })
  })

  const handleChange = (propertyId: string, value: unknown) => {
    setValues((prev) => {
      const next = { ...prev, [propertyId]: value }
      onValuesChange?.(next)
      return next
    })
    if (!readOnly) queueSave(propertyId, value)
  }

  if (schema.properties.length === 0) {
    return (
      <div className="space-y-2 pt-4 border-t border-border/30">
        <p className="text-[10px] uppercase tracking-widest font-bold text-muted-foreground">
          {t('structuredViews.propertiesSection')}
        </p>
        <p className="text-[12px] text-muted-foreground">{t('structuredViews.noPropertiesYet')}</p>
        {onAddProperty && !readOnly && (
          <button
            type="button"
            onClick={onAddProperty}
            className="inline-flex items-center gap-1 text-[11px] text-brand-accent hover:underline"
          >
            <Plus size={12} />
            {t('structuredViews.addProperty')}
          </button>
        )}
      </div>
    )
  }

  return (
    <div className="space-y-3 pt-4 border-t border-border/30">
      <div className="flex items-center justify-between">
        <p className="text-[10px] uppercase tracking-widest font-bold text-muted-foreground">
          {t('structuredViews.propertiesSection')}
        </p>
        {onAddProperty && !readOnly && schema.properties.length < MAX_PROPERTIES_PER_NOTEBOOK && (
          <button
            type="button"
            onClick={onAddProperty}
            className="inline-flex items-center gap-1 text-[10px] text-brand-accent hover:underline"
          >
            <Plus size={10} />
            {t('structuredViews.addProperty')}
          </button>
        )}
      </div>
      <div className="space-y-3">
        {schema.properties.map((prop) => (
          <div key={prop.id} className="space-y-1">
            <label className="text-[11px] font-medium text-muted-foreground">{prop.name}</label>
            {readOnly ? (
              <p className="text-[13px]">{String(values[prop.id] ?? '—')}</p>
            ) : (
              <PropertyValueEditor
                property={prop}
                value={values[prop.id]}
                onChange={(v) => handleChange(prop.id, v)}
              />
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

export function SchemaPropertyList({
  schema,
  onDeleteProperty,
}: {
  schema: NotebookSchemaPayload
  onDeleteProperty?: (id: string) => void
}) {
  const { t } = useLanguage()
  return (
    <ul className="space-y-1">
      {schema.properties.map((p) => (
        <li key={p.id} className="flex items-center justify-between text-[12px] py-1">
          <span>{p.name}</span>
          <span className="text-muted-foreground text-[10px] uppercase">{t(`structuredViews.propertyTypes.${p.type}`)}</span>
          {onDeleteProperty && (
            <button type="button" onClick={() => onDeleteProperty(p.id)} className="p-1 text-muted-foreground hover:text-red-500">
              <Trash2 size={12} />
            </button>
          )}
        </li>
      ))}
    </ul>
  )
}