import { useState, useEffect } from 'react'
import { useAuth } from '../contexts/AuthContext'
import { getUserEntries, type JournalEntry } from '../lib/api'
import { decryptEntry } from '../lib/crypto'
import { formatIST, getISTDateComponents } from '../lib/timezone'
import BottomNav from '../components/BottomNav'
import { useOnboardingTour, hasPendingTourStep, clearPendingTourStep } from '../hooks/useOnboardingTour'

interface DecryptedEntry extends JournalEntry {
  decryptedTitle?: string
  decryptedContent?: string
  decryptError?: string
}

export default function HistoryPage() {
  const { user, userId, secretKey, loading } = useAuth()
  const [currentMonth, setCurrentMonth] = useState(new Date())
  const [selectedDate, setSelectedDate] = useState(new Date())
  const [entries, setEntries] = useState<DecryptedEntry[]>([])
  const [loadingEntries, setLoadingEntries] = useState(false)
  const [selectedEntry, setSelectedEntry] = useState<DecryptedEntry | null>(null)

  const { continueTourOnHistory } = useOnboardingTour()

  // Continue onboarding tour if navigated here from the home page tour
  useEffect(() => {
    if (hasPendingTourStep() === 'history') {
      clearPendingTourStep()
      continueTourOnHistory()
    }
  }, [])

  // Fetch entries on mount and when userId changes
  useEffect(() => {
    if (!user || !userId) return

    const fetchEntries = async () => {
      setLoadingEntries(true)
      try {
        const token = await user.getIdToken()
        const response = await getUserEntries(userId, token, 100, 0)
        
        // Decrypt entries if they are encrypted
        const decryptedEntries: DecryptedEntry[] = await Promise.all(
          response.entries.map(async (entry) => {
            if (entry.encryption?.encrypted && entry.encryption?.ciphertext && entry.encryption?.nonce) {
              // Entry is encrypted, try to decrypt
              if (!secretKey) {
                return {
                  ...entry,
                  decryptError: 'Encryption key not available',
                  decryptedTitle: '[Encrypted]',
                }
              }

              try {
                const decrypted = await decryptEntry(
                  entry.encryption.ciphertext,
                  entry.encryption.nonce,
                  secretKey
                )

                // Split decrypted content: first line is title, rest is content
                const lines = decrypted.split('\n\n')
                const decryptedTitle = lines[0]
                const decryptedContent = lines.slice(1).join('\n\n')

                return {
                  ...entry,
                  decryptedTitle,
                  decryptedContent,
                }
              } catch (error) {
                console.error(`Failed to decrypt entry ${entry.id}:`, error)
                return {
                  ...entry,
                  decryptError: 'Failed to decrypt entry',
                  decryptedTitle: '[Decryption Failed]',
                }
              }
            } else {
              // Entry is not encrypted, use plaintext
              return {
                ...entry,
                decryptedTitle: entry.title || '[Untitled]',
                decryptedContent: entry.content || '',
              }
            }
          })
        )

        setEntries(decryptedEntries)
      } catch (error) {
        console.error('Error fetching entries:', error)
      } finally {
        setLoadingEntries(false)
      }
    }

    fetchEntries()
  }, [user, userId, secretKey])

  const getDaysInMonth = (date: Date) => {
    const year = date.getFullYear()
    const month = date.getMonth()
    const firstDay = new Date(year, month, 1)
    const lastDay = new Date(year, month + 1, 0)
    const daysInMonth = lastDay.getDate()
    const startingDayOfWeek = firstDay.getDay()

    return { daysInMonth, startingDayOfWeek }
  }

  const hasEntryOnDate = (day: number) => {
    return entries.some((entry) => {
      const components = getISTDateComponents(entry.createdAt)
      return (
        components.date === day &&
        components.month === currentMonth.getMonth() &&
        components.year === currentMonth.getFullYear()
      )
    })
  }

  const isToday = (day: number) => {
    const today = new Date()
    return (
      day === today.getDate() &&
      currentMonth.getMonth() === today.getMonth() &&
      currentMonth.getFullYear() === today.getFullYear()
    )
  }

  const formatDate = (date: string) => {
    return formatIST(date, 'date')
  }

  const formatTime = (date: string) => {
    return formatIST(date, 'time')
  }

  const { daysInMonth, startingDayOfWeek } = getDaysInMonth(currentMonth)
  const monthName = currentMonth.toLocaleDateString('en-US', {
    month: 'long',
    year: 'numeric',
  })

  const previousMonth = () => {
    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1))
  }

  const nextMonth = () => {
    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1))
  }

  // Get entries for selected date (in IST)
  const selectedDateEntries = entries.filter((entry) => {
    const components = getISTDateComponents(entry.createdAt)
    return (
      components.date === selectedDate.getDate() &&
      components.month === selectedDate.getMonth() &&
      components.year === selectedDate.getFullYear()
    )
  })

  const isDateSelected = (day: number) => {
    return (
      day === selectedDate.getDate() &&
      currentMonth.getMonth() === selectedDate.getMonth() &&
      currentMonth.getFullYear() === selectedDate.getFullYear()
    )
  }

  const handleDateClick = (day: number) => {
    setSelectedDate(new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day))
  }

  if (loading) {
    return (
      <div className="history-page" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <p style={{ color: '#9ca3af' }}>Loading…</p>
        <BottomNav />
      </div>
    )
  }

  return (
    <div className="history-page">
      <header className="history-header">
        <div className="history-header-text">
          <h1>History</h1>
          <p className="history-subtitle">Your past reflections</p>
        </div>
        {/* <button type="button" className="history-search-btn" title="Search entries">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.35-4.35"></path>
          </svg>
        </button> */}
      </header>

      <main className="history-container">
        <div id="tour-calendar" className="calendar-card">
          <div className="calendar-header">
            <h2 className="calendar-month">{monthName}</h2>
            <div className="calendar-nav">
              <button type="button" onClick={previousMonth} className="calendar-nav-btn" title="Previous month">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="15 18 9 12 15 6"></polyline>
                </svg>
              </button>
              <button type="button" onClick={nextMonth} className="calendar-nav-btn" title="Next month">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
              </button>
            </div>
          </div>

          <div className="calendar-grid">
            <div className="calendar-weekday">S</div>
            <div className="calendar-weekday">M</div>
            <div className="calendar-weekday">T</div>
            <div className="calendar-weekday">W</div>
            <div className="calendar-weekday">T</div>
            <div className="calendar-weekday">F</div>
            <div className="calendar-weekday">S</div>

            {Array.from({ length: startingDayOfWeek }).map((_, i) => (
              <div key={`empty-${i}`} className="calendar-day calendar-day-empty"></div>
            ))}

            {Array.from({ length: daysInMonth }).map((_, i) => {
              const day = i + 1
              const hasEntry = hasEntryOnDate(day)
              const isTodayDate = isToday(day)
              const isSelected = isDateSelected(day)

              return (
                <button
                  key={day}
                  type="button"
                  className={`calendar-day ${hasEntry ? 'calendar-day-has-entry' : ''} ${isTodayDate ? 'calendar-day-today' : ''} ${isSelected ? 'calendar-day-selected' : ''}`}
                  onClick={() => handleDateClick(day)}
                >
                  {day}
                </button>
              )
            })}
          </div>
        </div>

        <section id="tour-entries-list" className="recent-entries">
          <h3 className="recent-entries-title">
            {selectedDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).toUpperCase()}
          </h3>

          {loadingEntries ? (
            <p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: '"Sniglet", system-ui' }}>
              Loading entries…
            </p>
          ) : (
            <div className="entries-list">
              {selectedDateEntries.length === 0 ? (
                <p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: '"Sniglet", system-ui' }}>
                  No entries for this day yet. Start writing!
                </p>
              ) : (
                selectedDateEntries.map((entry) => (
                  <button
                    key={entry.id}
                    type="button"
                    className="entry-card"
                    onClick={() => setSelectedEntry(entry)}
                  >
                    <div className="entry-header">
                      <span className="entry-date">{formatDate(entry.createdAt)}</span>
                      <span className="entry-time">{formatTime(entry.createdAt)}</span>
                    </div>
                    <h4 className="entry-title">{entry.decryptedTitle || entry.title || '[Untitled]'}</h4>
                    {entry.decryptedContent && (
                      <p className="entry-preview">{entry.decryptedContent}</p>
                    )}
                  </button>
                ))
              )}
            </div>
          )}
        </section>
      </main>

      {/* Entry Detail Modal */}
      {selectedEntry && (
        <div
          className="entry-modal-overlay"
          onClick={(e) => {
            if (e.target === e.currentTarget) setSelectedEntry(null)
          }}
        >
          <div className="entry-modal">
            <div className="entry-modal-header">
              <div className="entry-modal-meta">
                <span className="entry-modal-date">{formatDate(selectedEntry.createdAt)}</span>
                <span className="entry-modal-time">{formatTime(selectedEntry.createdAt)}</span>
              </div>
              <button
                type="button"
                className="entry-modal-close"
                onClick={() => setSelectedEntry(null)}
                title="Close"
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="18" y1="6" x2="6" y2="18" />
                  <line x1="6" y1="6" x2="18" y2="18" />
                </svg>
              </button>
            </div>

            <h2 className="entry-modal-title">
              {selectedEntry.decryptedTitle || selectedEntry.title || '[Untitled]'}
            </h2>

            {selectedEntry.decryptError ? (
              <div className="entry-modal-error">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                  <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                </svg>
                {selectedEntry.decryptError}
              </div>
            ) : (
              <div className="entry-modal-content">
                {selectedEntry.decryptedContent
                  ? selectedEntry.decryptedContent.split('\n').map((line, i) => (
                      <p key={i}>{line || '\u00A0'}</p>
                    ))
                  : <p className="entry-modal-empty">No content</p>
                }
              </div>
            )}

            {selectedEntry.encryption?.encrypted && (
              <div className="entry-modal-badge">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                  <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                </svg>
                End-to-end encrypted
              </div>
            )}
          </div>
        </div>
      )}

      <BottomNav />
    </div>
  )
}