import { useState, useEffect } from 'react'
import { useNavigate, useLocation, Routes, Route } from 'react-router-dom'
import { Dropdown } from 'react-bootstrap'
import axios from 'axios'
import { useAuth } from './contexts/AuthContext'
import ConversationList from './components/ConversationList'
import MessageThread from './components/MessageThread'
import Activity from './components/Activity'
import Calls from './components/Calls'
import DateFilter from './components/DateFilter'
import Upload from './components/Upload'
import Search from './components/Search'
import ChangePasswordModal from './components/ChangePasswordModal'
import './App.css'

const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'

function App() {
  const navigate = useNavigate()
  const location = useLocation()
  const { user, logout } = useAuth()
  const [conversations, setConversations] = useState([])
  const [conversationsLoading, setConversationsLoading] = useState(false)
  const [selectedConversation, setSelectedConversation] = useState(null)
  const [startDate, setStartDate] = useState(null)
  const [endDate, setEndDate] = useState(null)
  const [dateRange, setDateRange] = useState({ min: null, max: null })
  const [showUpload, setShowUpload] = useState(false)
  const [showPasswordModal, setShowPasswordModal] = useState(false)
  const [searchFilter, setSearchFilter] = useState('')

  // Search state (persisted across tab switches)
  const [searchQuery, setSearchQuery] = useState('')
  const [searchResults, setSearchResults] = useState([])
  const [searchLoading, setSearchLoading] = useState(false)
  const [searchExecuted, setSearchExecuted] = useState(false)
  const [searchScrollPosition, setSearchScrollPosition] = useState(0)

  // Derive activeView from URL
  const activeView = location.pathname.startsWith('/activity')
    ? 'activity'
    : location.pathname.startsWith('/calls')
    ? 'calls'
    : location.pathname.startsWith('/search')
    ? 'search'
    : 'conversations'

  useEffect(() => {
    fetchDateRange()
    fetchConversations()
  }, [])

  useEffect(() => {
    fetchConversations()
  }, [startDate, endDate])

  // Sync selected conversation from URL
  useEffect(() => {
    const match = location.pathname.match(/^\/conversation\/(.+)$/)
    if (match) {
      const address = decodeURIComponent(match[1])
      // Find conversation by address
      const conversation = conversations.find(c => c.address === address)
      if (conversation) {
        setSelectedConversation(conversation)
      } else if (conversations.length > 0) {
        // If conversation not found in list, create a minimal conversation object
        setSelectedConversation({ address, contact_name: address, type: 'message' })
      }
    } else if (location.pathname === '/' || location.pathname === '/conversations') {
      setSelectedConversation(null)
    }
  }, [location.pathname, conversations])

  const fetchDateRange = async () => {
    try {
      const response = await axios.get(`${API_BASE}/daterange`)
      setDateRange({
        min: new Date(response.data.min_date),
        max: new Date(response.data.max_date)
      })
    } catch (error) {
      console.error('Error fetching date range:', error)
    }
  }

  const fetchConversations = async () => {
    setConversationsLoading(true)
    try {
      const params = {}
      if (startDate) params.start = startDate.toISOString()
      if (endDate) params.end = endDate.toISOString()

      const response = await axios.get(`${API_BASE}/conversations`, { params })
      setConversations(response.data || [])
    } catch (error) {
      console.error('Error fetching conversations:', error)
    } finally {
      setConversationsLoading(false)
    }
  }

  const handleUploadSuccess = () => {
    setShowUpload(false)
    fetchDateRange()
    fetchConversations()
  }

  const handleSelectConversation = (conversation) => {
    if (conversation) {
      navigate(`/conversation/${encodeURIComponent(conversation.address)}`)
    }
  }

  const handleViewChange = (view) => {
    if (view === 'activity') {
      navigate('/activity')
    } else if (view === 'calls') {
      navigate('/calls')
    } else if (view === 'search') {
      navigate('/search')
    } else {
      navigate('/')
    }
  }

  // Filter conversations based on search text
  const filteredConversations = conversations.filter(conv => {
    if (!searchFilter) return true

    const searchLower = searchFilter.toLowerCase()
    const nameMatch = conv.contact_name && conv.contact_name.toLowerCase().includes(searchLower)
    const addressMatch = conv.address && conv.address.toLowerCase().includes(searchLower)

    return nameMatch || addressMatch
  })

  return (
    <div className="vh-100 d-flex flex-column bg-light">
      {/* Header */}
      <header className="bg-primary bg-gradient text-white p-2 shadow-lg">
        <div className="d-flex justify-content-between align-items-center">
          <div className="d-flex align-items-center gap-3">
            <svg style={{width: '2.5rem', height: '2.5rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
            </svg>
            <div>
              <h1 className="h2 mb-1 fw-bold">SMS Backup Viewer</h1>
              <p className="mb-0 small opacity-75">View and browse your message history</p>
            </div>
          </div>
          <div className="d-flex align-items-center gap-3">
            <div className="text-end">
              <div className="small opacity-75">Logged in as</div>
              <div className="fw-bold">{user?.username}</div>
            </div>
            <button
              onClick={() => setShowUpload(true)}
              className="btn btn-light btn-lg shadow d-flex align-items-center gap-2"
            >
              <svg style={{width: '1.25rem', height: '1.25rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
              </svg>
              Upload Backup
            </button>
            <Dropdown align="end">
              <Dropdown.Toggle
                variant="outline-light"
                className="d-flex align-items-center gap-2"
                style={{ backgroundColor: 'transparent', borderColor: 'rgba(255, 255, 255, 0.5)' }}
              >
                <svg style={{width: '1.5rem', height: '1.5rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
              </Dropdown.Toggle>
              <Dropdown.Menu>
                <Dropdown.ItemText className="small text-muted">
                  Version {__APP_VERSION__}
                </Dropdown.ItemText>
                <Dropdown.Divider />
                <Dropdown.Item onClick={() => setShowPasswordModal(true)}>
                  <svg style={{width: '1rem', height: '1rem'}} className="me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                  </svg>
                  Change Password
                </Dropdown.Item>
                <Dropdown.Divider />
                <Dropdown.Item onClick={logout}>
                  <svg style={{width: '1rem', height: '1rem'}} className="me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                  </svg>
                  Logout
                </Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
          </div>
        </div>
      </header>

      {/* View Switcher */}
      <div className="bg-white border-bottom shadow-sm">
        <div className="container-fluid">
          <ul className="nav nav-tabs border-0">
            <li className="nav-item">
              <button
                className={`nav-link ${activeView === 'conversations' ? 'active' : ''}`}
                onClick={() => handleViewChange('conversations')}
              >
                <svg style={{width: '1rem', height: '1rem'}} className="me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                </svg>
                Conversations
              </button>
            </li>
            <li className="nav-item">
              <button
                className={`nav-link ${activeView === 'calls' ? 'active' : ''}`}
                onClick={() => handleViewChange('calls')}
              >
                <svg style={{width: '1rem', height: '1rem'}} className="me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                Calls
              </button>
            </li>
            <li className="nav-item">
              <button
                className={`nav-link ${activeView === 'search' ? 'active' : ''}`}
                onClick={() => handleViewChange('search')}
              >
                <svg style={{width: '1rem', height: '1rem'}} className="me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                Search
              </button>
            </li>
            <li className="nav-item">
              <button
                className={`nav-link ${activeView === 'activity' ? 'active' : ''}`}
                onClick={() => handleViewChange('activity')}
              >
                <svg style={{width: '1rem', height: '1rem'}} className="me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Activity
              </button>
            </li>
          </ul>
        </div>
      </div>

      {/* Date Filter */}
      <div className="bg-white border-bottom shadow-sm">
        <DateFilter
          startDate={startDate}
          endDate={endDate}
          minDate={dateRange.min}
          maxDate={dateRange.max}
          onStartDateChange={setStartDate}
          onEndDateChange={setEndDate}
        />
      </div>

      {/* Main Content */}
      <div className="flex-fill d-flex overflow-hidden gap-2 p-2">
        {activeView === 'conversations' ? (
          <>
            {/* Conversation List */}
            <div style={{width: '380px', minWidth: '380px', maxWidth: '380px', flexShrink: 0}} className="bg-white rounded-3 shadow overflow-hidden border">
              <div className="bg-light border-bottom p-2">
                <h2 className="h5 mb-2 d-flex align-items-center gap-2">
                  <svg style={{width: '1.25rem', height: '1.25rem'}} className="text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                  </svg>
                  Conversations
                </h2>
                <div className="position-relative">
                  <svg style={{width: '1rem', height: '1rem', position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)'}} className="text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                  </svg>
                  <input
                    type="text"
                    className="form-control form-control-sm ps-5"
                    placeholder="Search by name or number..."
                    value={searchFilter}
                    onChange={(e) => setSearchFilter(e.target.value)}
                  />
                </div>
              </div>
              <div className="overflow-auto" style={{height: 'calc(100% - 7rem)'}}>
                <ConversationList
                  conversations={filteredConversations}
                  selectedConversation={selectedConversation}
                  onSelectConversation={handleSelectConversation}
                  loading={conversationsLoading}
                />
              </div>
            </div>

            {/* Message Thread */}
            <div className="flex-fill bg-white rounded-3 shadow overflow-hidden border" style={{minWidth: 0}}>
              <MessageThread
                conversation={selectedConversation}
                startDate={startDate}
                endDate={endDate}
              />
            </div>
          </>
        ) : activeView === 'search' ? (
          /* Search View */
          <div className="flex-fill bg-white rounded-3 shadow overflow-hidden border" style={{minWidth: 0}}>
            <Search
              searchQuery={searchQuery}
              setSearchQuery={setSearchQuery}
              results={searchResults}
              setResults={setSearchResults}
              loading={searchLoading}
              setLoading={setSearchLoading}
              searched={searchExecuted}
              setSearched={setSearchExecuted}
              scrollPosition={searchScrollPosition}
              setScrollPosition={setSearchScrollPosition}
            />
          </div>
        ) : activeView === 'calls' ? (
          /* Calls View */
          <div className="flex-fill bg-white rounded-3 shadow overflow-hidden border" style={{minWidth: 0}}>
            <Calls
              startDate={startDate}
              endDate={endDate}
            />
          </div>
        ) : (
          /* Activity View */
          <div className="flex-fill bg-white rounded-3 shadow overflow-hidden border" style={{minWidth: 0}}>
            <Activity
              startDate={startDate}
              endDate={endDate}
            />
          </div>
        )}
      </div>

      {/* Upload Modal */}
      {showUpload && (
        <Upload
          onClose={() => setShowUpload(false)}
          onSuccess={handleUploadSuccess}
        />
      )}

      {/* Change Password Modal */}
      {showPasswordModal && (
        <ChangePasswordModal
          onClose={() => setShowPasswordModal(false)}
          onSuccess={() => {
            // Password changed successfully
            console.log('Password changed successfully')
          }}
        />
      )}
    </div>
  )
}

export default App