import { useState } from 'react'
import { format } from 'date-fns'
import { FaAngleDown, FaSpinner } from 'react-icons/fa6'
import { useWorkorders } from '../hooks/useWorkorders'
import { useCustomers } from '../hooks/useCustomers'
import TicketRow from '../components/TicketRow'
import CreateTicketModal from '../components/CreateTicketModal'
import QuickOverviewModal from '../components/QuickOverviewModal'

export default function TicketsPage() {
  const [limit, setLimit] = useState(10)
  // Aktive Filter (werden für API-Calls verwendet)
  const [filters, setFilters] = useState({
    status: ['Open', 'Occupied', 'Assigned', 'Awaiting', 'Added Info'],
    type: [],
    priority: [],
    limit: 10
  })
  // Lokale Filter-Eingaben (werden nur beim Apply angewendet)
  const [localFilters, setLocalFilters] = useState({
    woid: '',
    customer: '',
    userTopic: '',
    createdDate: '',
    type: '',
    system: '',
    priority: ''
  })
  
  const { workorders, loading, error, refresh, updateWorkorder, createWorkorder } = useWorkorders(filters)
  const { customers } = useCustomers()
  
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [showOverviewModal, setShowOverviewModal] = useState(false)
  const [showAdvancedFilters, setShowAdvancedFilters] = useState(false)

  const handleApplyFilters = () => {
    // Wende lokale Filter auf aktive Filter an
    setFilters(prev => ({
      ...prev,
      woid: localFilters.woid || undefined,
      customer: localFilters.customer || undefined,
      userTopic: localFilters.userTopic || undefined,
      createdDate: localFilters.createdDate || undefined,
      type: localFilters.type ? [localFilters.type] : [],
      system: localFilters.system ? [localFilters.system] : [],
      priority: localFilters.priority ? [parseInt(localFilters.priority)] : [],
      limit: limit
    }))
  }

  const handleLimitChange = (e) => {
    const newLimit = parseInt(e.target.value)
    setLimit(newLimit)
    // Limit-Änderung wird sofort angewendet (kein Apply nötig)
    setFilters(prev => ({ ...prev, limit: newLimit }))
  }

  const handleUpdate = async (id, data) => {
    await updateWorkorder(id, data)
  }

  const handleCreate = async (data) => {
    const result = await createWorkorder(data)
    if (result.success) {
      setShowCreateModal(false)
    }
    return result
  }

  const handleLoadMore = () => {
    setLimit(prev => prev + 10)
    setFilters(prev => ({ ...prev, limit: prev.limit + 10 }))
  }

  return (
    <div className="main-content">
      {/* Sticky Header Container */}
      <div style={{
        position: 'sticky',
        top: 0,
        zIndex: 100,
        marginBottom: '24px'
      }}>
        {/* Compact Control Panel */}
        <div style={{
          background: 'rgba(26, 32, 44, 0.4)',
          backdropFilter: 'blur(25px) saturate(180%)',
          WebkitBackdropFilter: 'blur(25px) saturate(180%)',
          borderRadius: '12px',
          border: '1px solid rgba(16, 185, 129, 0.3)',
          overflow: 'hidden',
          padding: '16px',
          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4)',
          marginBottom: '16px'
        }}>
          {/* Title Row */}
          <div style={{ 
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            marginBottom: '16px',
            flexWrap: 'wrap',
            gap: '12px'
          }}>
            <h2 style={{ 
              color: 'var(--dark-text)', 
              fontSize: '24px',
              fontWeight: 'bold',
              margin: 0
            }}>
              Tickets
            </h2>
            <div style={{ display: 'flex', gap: '8px' }}>
              <button 
                className="btn btn-dark"
                onClick={() => setShowCreateModal(true)}
                style={{ whiteSpace: 'nowrap' }}
              >
                CREATE NEW TICKET
              </button>
              <button 
                className="btn btn-dark"
                onClick={() => setShowOverviewModal(true)}
                style={{ whiteSpace: 'nowrap' }}
              >
                QUICK OVERVIEW
              </button>
              <button 
                className="btn btn-green"
                onClick={() => setShowAdvancedFilters(!showAdvancedFilters)}
                style={{ whiteSpace: 'nowrap' }}
              >
                {showAdvancedFilters ? '▲ Hide Filters' : '▼ Show Filters'}
              </button>
            </div>
          </div>

          {/* Main Search Bar */}
          <div style={{ 
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
            gap: '12px',
            alignItems: 'center'
          }}>
            <input
              type="text"
              placeholder="WOID"
              className="form-control"
              style={{ margin: 0 }}
              value={localFilters.woid || ''}
              onChange={(e) => setLocalFilters({ ...localFilters, woid: e.target.value })}
            />
            <input
              type="text"
              placeholder="Customer"
              className="form-control"
              style={{ margin: 0 }}
              value={localFilters.customer || ''}
              onChange={(e) => setLocalFilters({ ...localFilters, customer: e.target.value })}
            />
            <input
              type="text"
              placeholder="User"
              className="form-control"
              style={{ margin: 0 }}
              value={localFilters.userTopic || ''}
              onChange={(e) => setLocalFilters({ ...localFilters, userTopic: e.target.value })}
            />
            <button 
              className="btn btn-green" 
              onClick={handleApplyFilters}
              style={{ margin: 0 }}
            >
              Apply!
            </button>
          </div>

          {/* Advanced Filters - Collapsible */}
          {showAdvancedFilters && (
            <div style={{ 
              marginTop: '16px',
              paddingTop: '16px',
              borderTop: '1px solid rgba(16, 185, 129, 0.2)'
            }}>
              <div style={{ 
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
                gap: '12px',
                alignItems: 'center',
                marginBottom: '16px'
              }}>
                <input
                  type="text"
                  placeholder="Created Date"
                  className="form-control"
                  style={{ margin: 0 }}
                  value={localFilters.createdDate || ''}
                  onChange={(e) => setLocalFilters({ ...localFilters, createdDate: e.target.value })}
                />
                <select
                  className="form-control"
                  style={{ margin: 0 }}
                  value={localFilters.type || ''}
                  onChange={(e) => setLocalFilters({ ...localFilters, type: e.target.value })}
                >
                  <option value="">Type / Location</option>
                  <option>Home Office</option>
                  <option>Holidays</option>
                  <option>Trip</option>
                  <option>Supportrequest</option>
                  <option>Change Request</option>
                  <option>Maintenance</option>
                  <option>Project</option>
                  <option>Procurement</option>
                  <option>Emergency Call</option>
                </select>
                <select
                  className="form-control"
                  style={{ margin: 0 }}
                  value={localFilters.system || ''}
                  onChange={(e) => setLocalFilters({ ...localFilters, system: e.target.value })}
                >
                  <option value="">System</option>
                  <option>Client</option>
                  <option>Server</option>
                  <option>Network</option>
                  <option>EDI</option>
                  <option>TOS</option>
                  <option>Reports</option>
                  <option>n/a</option>
                </select>
                <select
                  className="form-control"
                  style={{ margin: 0 }}
                  value={localFilters.priority || ''}
                  onChange={(e) => setLocalFilters({ ...localFilters, priority: e.target.value })}
                >
                  <option value="">Priority</option>
                  <option value="0">None</option>
                  <option value="1">Low</option>
                  <option value="2">Medium</option>
                  <option value="3">High</option>
                  <option value="4">Critical</option>
                </select>
              </div>

              {/* Quick Selection Buttons */}
              <div style={{ 
                display: 'flex',
                gap: '8px',
                justifyContent: 'center',
                alignItems: 'center',
                flexWrap: 'wrap',
                marginBottom: '16px'
              }}>
                <button 
                  className="btn btn-green"
                  onClick={() => { 
                    setLocalFilters(prev => ({ ...prev, type: 'Procurement' }))
                    setFilters(prev => ({ ...prev, type: ['Procurement'] }))
                    setTimeout(() => refresh(), 0)
                  }}
                >
                  Procurements
                </button>
                <button 
                  className="btn btn-green"
                  onClick={() => { 
                    setLocalFilters(prev => ({ ...prev, priority: '4' }))
                    setFilters(prev => ({ ...prev, priority: [4] }))
                    setTimeout(() => refresh(), 0)
                  }}
                >
                  Criticals
                </button>
                <button 
                  className="btn btn-green"
                  onClick={() => { 
                    setLocalFilters(prev => ({ ...prev, priority: '3' }))
                    setFilters(prev => ({ ...prev, priority: [3] }))
                    setTimeout(() => refresh(), 0)
                  }}
                >
                  Highs
                </button>
                <div style={{ 
                  width: '1px',
                  height: '32px',
                  background: 'rgba(16, 185, 129, 0.3)',
                  margin: '0 8px'
                }}></div>
                <button 
                  className="btn btn-green"
                  onClick={() => { 
                    setLimit(10)
                    setFilters(prev => ({ ...prev, limit: 10 }))
                    setTimeout(() => refresh(), 0)
                  }}
                >
                  10
                </button>
                <button 
                  className="btn btn-green"
                  onClick={() => { 
                    setLimit(25)
                    setFilters(prev => ({ ...prev, limit: 25 }))
                    setTimeout(() => refresh(), 0)
                  }}
                >
                  25
                </button>
              </div>

              {/* Slider */}
              <div style={{ 
                display: 'flex',
                gap: '16px',
                alignItems: 'center'
              }}>
                <span style={{ color: 'var(--dark-text)', minWidth: '120px' }}>
                  Load Limit: {limit}
                </span>
                <div style={{ flex: '1' }}>
                  <input
                    type="range"
                    min="5"
                    max="50"
                    value={limit}
                    className="slider"
                    onChange={handleLimitChange}
                  />
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      <table className="table table-hover">
        <tbody>
          {loading ? (
            <tr>
              <td colSpan={10} className="text-center p-2">
                <FaSpinner className="spinner" size={32} />
                <p>Loading...</p>
              </td>
            </tr>
          ) : error ? (
            <tr>
              <td colSpan={10} className="text-center p-2 text-red">
                Error: {error}
              </td>
            </tr>
          ) : workorders.length === 0 ? (
            <tr>
              <td colSpan={10} className="text-center p-2">
                No tickets found matching your filters.
              </td>
            </tr>
          ) : (
            workorders.map(ticket => (
              <TicketRow 
                key={ticket.$id}
                ticket={ticket}
                onUpdate={handleUpdate}
              />
            ))
          )}
        </tbody>
      </table>

      {workorders.length > 0 && workorders.length >= limit && (
        <div style={{ textAlign: 'center', marginTop: '24px' }}>
          <button 
            className="btn btn-green"
            style={{ 
              padding: '16px 32px',
              fontSize: '16px',
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              margin: '0 auto'
            }}
            onClick={handleLoadMore}
          >
            Load More <FaAngleDown size={20} />
          </button>
        </div>
      )}

      <div style={{
        background: 'rgba(45, 55, 72, 0.95)',
        borderRadius: '12px',
        border: '1px solid rgba(16, 185, 129, 0.2)',
        padding: '16px',
        marginTop: '24px',
        textAlign: 'center',
        color: '#a0aec0'
      }}>
        <p style={{ margin: 0 }}>
          Summary: Listed a total of <span style={{ 
            color: 'var(--green-primary)', 
            fontWeight: 'bold' 
          }}>{workorders.length}</span> Workorders.
          <br />EOL =)
        </p>
      </div>

      <CreateTicketModal
        isOpen={showCreateModal}
        onClose={() => setShowCreateModal(false)}
        onCreate={handleCreate}
        customers={customers}
      />

      <QuickOverviewModal
        isOpen={showOverviewModal}
        onClose={() => setShowOverviewModal(false)}
        workorders={workorders}
      />
    </div>
  )
}
