import React, { useState, useEffect, useCallback } from 'react'
import { createPortal } from 'react-dom'
import { useAuth } from './auth/AuthContext'
import LoadingError from './LoadingError'
import Toast from './Toast'
import './TaskDetail.css'

function ShoppingItemDetail({ itemId, onClose, onRefresh, onItemCompleted, onNavigate }) {
  const { authFetch } = useAuth()
  const [item, setItem] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [volumeRemaining, setVolumeRemaining] = useState('')
  const [volumePurchased, setVolumePurchased] = useState('')
  const [isCompleting, setIsCompleting] = useState(false)
  const [toastMessage, setToastMessage] = useState(null)

  const fetchItem = useCallback(async () => {
    try {
      setLoading(true)
      setError(null)
      const response = await authFetch(`/api/shopping/items/${itemId}`)
      if (!response.ok) {
        throw new Error('Ошибка загрузки товара')
      }
      const data = await response.json()
      setItem(data)
    } catch (err) {
      setError(err.message)
    } finally {
      setLoading(false)
    }
  }, [itemId, authFetch])

  useEffect(() => {
    if (itemId) {
      fetchItem()
    } else {
      setItem(null)
      setLoading(true)
      setError(null)
      setVolumeRemaining('')
      setVolumePurchased('')
    }
  }, [itemId, fetchItem])

  const handleComplete = async () => {
    if (!item) return

    setIsCompleting(true)
    try {
      const payload = {}
      if (volumeRemaining.trim()) {
        payload.volume_remaining = parseFloat(volumeRemaining)
        if (isNaN(payload.volume_remaining)) {
          throw new Error('Неверное значение остатка')
        }
      } else {
        payload.volume_remaining = item.estimated_remaining ?? 0
      }
      if (volumePurchased.trim()) {
        payload.volume_purchased = parseFloat(volumePurchased)
        if (isNaN(payload.volume_purchased)) {
          throw new Error('Неверное значение докупки')
        }
      } else {
        payload.volume_purchased = item.median_purchased ?? item.volume_base ?? 1
      }

      const response = await authFetch(`/api/shopping/items/${itemId}/complete`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      })

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}))
        throw new Error(errorData.error || 'Ошибка при выполнении')
      }

      onItemCompleted?.()
      onRefresh?.()
      onClose?.()
    } catch (err) {
      setToastMessage({ text: err.message || 'Ошибка', type: 'error' })
    } finally {
      setIsCompleting(false)
    }
  }

  if (!itemId) return null

  const modalContent = (
    <div className="task-detail-modal-overlay" onClick={() => onClose?.()}>
      <div className="task-detail-modal" onClick={(e) => e.stopPropagation()}>
        <div className="task-detail-modal-header">
          <h2
            className="task-detail-title"
            onClick={item ? () => {
              onClose?.(true)
              onNavigate?.('shopping-item-form', { itemId: itemId, boardId: item.board_id })
            } : undefined}
            style={{ cursor: item ? 'pointer' : 'default' }}
          >
            {loading ? 'Загрузка...' : error ? 'Ошибка' : item ? (
              <>
                {item.name}
                <svg
                  className="task-detail-edit-icon"
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                </svg>
              </>
            ) : 'Товар'}
          </h2>
          <button onClick={() => onClose?.()} className="task-detail-close-button">
            ✕
          </button>
        </div>

        <div className="task-detail-modal-content">
          {loading && (
            <div className="loading">Загрузка...</div>
          )}

          {error && !loading && (
            <LoadingError onRetry={fetchItem} />
          )}

          {!loading && !error && item && (
            <>
              <div className="shopping-item-description-card">
                <div className="shopping-item-description">
                  {item.description ? (
                    item.description.split(/(https?:\/\/[^\s<>"'`,;!)\]]+)/gi).map((part, i) => {
                      if (/^https?:\/\//i.test(part)) {
                        let host
                        try {
                          host = new URL(part).host.replace(/^www\./, '')
                        } catch {
                          host = 'Открыть ссылку'
                        }
                        return (
                          <a key={i} href={part} target="_blank" rel="noopener noreferrer" className="shopping-item-description-link">
                            {host}
                          </a>
                        )
                      }
                      return <span key={i}>{part}</span>
                    })
                  ) : (
                    <span style={{ color: '#9ca3af' }}>Описание отсутствует</span>
                  )}
                </div>
                <button
                  type="button"
                  className="shopping-item-history-button"
                  onClick={() => {
                    onClose?.(true)
                    onNavigate?.('shopping-item-history', { itemId: itemId })
                  }}
                  title="История"
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                    <line x1="16" y1="13" x2="8" y2="13"></line>
                    <line x1="16" y1="17" x2="8" y2="17"></line>
                    <polyline points="10 9 9 9 8 9"></polyline>
                  </svg>
                </button>
              </div>

              <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'flex-end', marginBottom: '0.75rem' }}>
                <div style={{ flex: 1 }}>
                  <label className="progression-label">Остаток</label>
                  <div className="progression-input-wrapper">
                    <input
                      type="number"
                      step="any"
                      value={volumeRemaining}
                      onChange={(e) => setVolumeRemaining(e.target.value)}
                      placeholder={item.estimated_remaining != null ? Math.round(item.estimated_remaining * 10) / 10 + '' : '0'}
                      className="progression-input"
                    />
                    {volumeRemaining && (
                      <button
                        type="button"
                        onClick={() => setVolumeRemaining('')}
                        style={{
                          position: 'absolute',
                          right: '8px',
                          top: '50%',
                          transform: 'translateY(-50%)',
                          background: 'none',
                          border: 'none',
                          color: '#9ca3af',
                          cursor: 'pointer',
                          fontSize: '1.1rem',
                          padding: '4px',
                          lineHeight: 1,
                        }}
                      >
                        ✕
                      </button>
                    )}
                  </div>
                </div>
                <div style={{ flex: 1 }}>
                  <label className="progression-label">Докуплено</label>
                  <div className="progression-input-wrapper">
                    <input
                      type="number"
                      step="any"
                      value={volumePurchased}
                      onChange={(e) => setVolumePurchased(e.target.value)}
                      placeholder={(item.median_purchased ?? item.volume_base ?? 1).toString()}
                      className="progression-input"
                    />
                    <div className="progression-controls-capsule">
                      <button
                        type="button"
                        className="progression-control-btn progression-control-minus"
                        onClick={() => {
                          const base = item.median_purchased ?? item.volume_base ?? 1
                          const current = volumePurchased.trim() ? parseFloat(volumePurchased) : base
                          const step = item.volume_base || 1
                          setVolumePurchased(Math.max(0, current - step).toString())
                        }}
                      >
                        −
                      </button>
                      <button
                        type="button"
                        className="progression-control-btn progression-control-plus"
                        onClick={() => {
                          const base = item.median_purchased ?? item.volume_base ?? 1
                          const current = volumePurchased.trim() ? parseFloat(volumePurchased) : base
                          const step = item.volume_base || 1
                          setVolumePurchased((current + step).toString())
                        }}
                      >
                        +
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div className="task-action-left">
                <button
                  onClick={handleComplete}
                  disabled={isCompleting}
                  className="action-button action-button-check"
                >
                  {isCompleting ? (
                    <div className="shopping-item-complete-spinner"></div>
                  ) : (
                    'Выполнить'
                  )}
                </button>
              </div>
            </>
          )}
        </div>
        {toastMessage && (
          <Toast
            message={toastMessage.text}
            type={toastMessage.type}
            onClose={() => setToastMessage(null)}
          />
        )}
      </div>
    </div>
  )

  return typeof document !== 'undefined'
    ? createPortal(modalContent, document.body)
    : modalContent
}

export default ShoppingItemDetail
