import React, { useEffect, useState } from 'react'
import { transitClient } from '../api'

const WEEKDAYS = ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za', 'Zo']
const WEEKDAY_VALUES = [1, 2, 3, 4, 5, 6, 0] // 0=Sun, 1=Mon...

export default function ScheduleMaker({ token, user }) {
  const client = transitClient(token)
  const [schedules, setSchedules] = useState([])
  const [busLines, setBusLines] = useState([])
  const [buses, setBuses] = useState([])
  const [drivers, setDrivers] = useState([])
  const [selectedDriverFilter, setSelectedDriverFilter] = useState('')
  const [message, setMessage] = useState(null)
  const [isAdmin] = useState(Boolean(user?.userCode))
  const [deleteConfirm, setDeleteConfirm] = useState(null)
  const [expandedSchedule, setExpandedSchedule] = useState(null)
  const [routeStopsByLine, setRouteStopsByLine] = useState({})

  // Form state
  const [selectedLine, setSelectedLine] = useState('')
  const [selectedBus, setSelectedBus] = useState('')
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0])
  const [startTime, setStartTime] = useState('08:00')
  const [driverId, setDriverId] = useState('')
  const [selectedWeekdays, setSelectedWeekdays] = useState([])

  const loadSchedules = async () => {
    try {
      const res = await client.get('/admin/schedules')
      setSchedules(res.data.schedules || [])
    } catch (err) {
      setMessage('Error loading schedules: ' + (err.response?.data?.error || err.message))
    }
  }

  const loadBusLines = async () => {
    try {
      const res = await client.get('/admin/bus-lines')
      setBusLines(res.data.busLines || [])
    } catch (err) {
      setMessage('Error loading bus lines: ' + (err.response?.data?.error || err.message))
    }
  }

  const loadBuses = async () => {
    try {
      const res = await client.get('/admin/fleet/buses')
      setBuses(res.data.buses || [])
    } catch (err) {
      setMessage('Error loading buses: ' + (err.response?.data?.error || err.message))
    }
  }

  const loadDrivers = async () => {
    try {
      const res = await client.get('/admin/drivers')
      setDrivers(res.data.drivers || [])
    } catch (err) {
      setMessage('Error loading drivers: ' + (err.response?.data?.error || err.message))
    }
  }

  useEffect(() => {
    loadSchedules()
    loadBusLines()
    loadBuses()
    loadDrivers()
  }, [])

  const createSchedule = async (e) => {
    e.preventDefault()
    setMessage(null)

    if (!selectedLine || !selectedBus || !startTime) {
      setMessage('Lijn, voertuig en start-tijd zijn verplicht')
      return
    }

    try {
      const startDateTime = `${selectedDate}T${startTime}:00`
      const normalizedWeekdays = [...selectedWeekdays].sort((a, b) => a - b)

      const res = await client.post('/admin/schedules', {
        busLineId: Number(selectedLine),
        busId: Number(selectedBus),
        driverId: driverId ? Number(driverId) : null,
        startTime: startDateTime,
        weekdays: normalizedWeekdays,
      })

      const dayLabels = normalizedWeekdays.length > 0
        ? normalizedWeekdays.map(d => WEEKDAYS[WEEKDAY_VALUES.indexOf(d)]).join(', ')
        : 'eenmalig'
      setMessage(`Dienst aangemaakt: #${res.data.schedule.id} (${dayLabels})`)
      setSelectedLine('')
      setSelectedBus('')
      setStartTime('08:00')
      setDriverId('')
      setSelectedWeekdays([])
      await loadSchedules()
    } catch (err) {
      const errMsg = err.response?.data?.error || err.message
      setMessage('Error: ' + errMsg)
    }
  }

  const deleteSchedule = async (scheduleId, lineNumber, busName) => {
    setMessage(null)
    try {
      await client.delete(`/admin/schedules/${scheduleId}`)
      setMessage(`Dienst verwijderd: Lijn ${lineNumber}, ${busName}`)
      setDeleteConfirm(null)
      await loadSchedules()
    } catch (err) {
      const errMsg = err.response?.data?.error || err.message
      setMessage('Error: ' + errMsg)
    }
  }

  const toggleWeekday = (dayValue) => {
    setSelectedWeekdays(prev =>
      prev.includes(dayValue)
        ? prev.filter(d => d !== dayValue)
        : [...prev, dayValue]
    )
  }

  const getWeekdayLabel = (weekdayValues) => {
    if (!weekdayValues || weekdayValues.length === 0) return 'Eenmalig'
    if (weekdayValues.length === 7) return 'Dagelijks'
    const labels = weekdayValues
      .slice()
      .sort((a, b) => a - b)
      .map(w => WEEKDAYS[WEEKDAY_VALUES.indexOf(w)])
    return labels.join(', ')
  }

  const formatTime = (timeString) => {
    const date = new Date(timeString)
    return date.toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })
  }

  // Fetch route stops for a given line and cache them in state
  const loadRouteStops = async (busLineId) => {
    if (!busLineId) return
    try {
      const res = await client.get(`/admin/bus-lines/${busLineId}/stops`)
      const routeStops = res.data.routeStops || []
      setRouteStopsByLine(prev => ({ ...prev, [busLineId]: routeStops }))
    } catch (err) {
      // ignore silently, message already used elsewhere
    }
  }

  const getCandidateWindow = () => {
    const line = busLines.find(l => String(l.id) === String(selectedLine))
    if (!line || !selectedDate || !startTime) return null

    const start = new Date(`${selectedDate}T${startTime}:00`)
    const end = new Date(start)
    end.setMinutes(end.getMinutes() + (line.estimatedDurationMinutes || 60))
    return { start, end }
  }

  const hasOverlap = (candidate, existing) => {
    if (!candidate || !existing?.startTime || !existing?.endTime) return false

    const cStart = candidate.start.getTime()
    const cEnd = candidate.end.getTime()
    const eStart = new Date(existing.startTime).getTime()
    const eEnd = new Date(existing.endTime).getTime()
    const timeOverlap = cStart < eEnd && cEnd > eStart
    if (!timeOverlap) return false

    const cWeekdays = selectedWeekdays || []
    const eWeekdays = Array.isArray(existing.weekdays) ? existing.weekdays : []

    if (cWeekdays.length === 0 && eWeekdays.length === 0) {
      return candidate.start.toDateString() === new Date(existing.startTime).toDateString()
    }

    if (cWeekdays.length > 0 && eWeekdays.length > 0) {
      return cWeekdays.some(d => eWeekdays.includes(d))
    }

    if (cWeekdays.length > 0 && eWeekdays.length === 0) {
      return cWeekdays.includes(new Date(existing.startTime).getDay())
    }

    return eWeekdays.includes(candidate.start.getDay())
  }

  const candidateWindow = getCandidateWindow()
  const busyDriverIds = new Set(
    schedules
      .filter(s => s.driverId && hasOverlap(candidateWindow, s))
      .map(s => Number(s.driverId))
  )
  const busyBusIds = new Set(
    schedules
      .filter(s => s.busId && hasOverlap(candidateWindow, s))
      .map(s => Number(s.busId))
  )

  const scheduleHasDriverConflict = (schedule) => {
    if (!schedule?.driverId) return false
    return schedules.some(other =>
      other.id !== schedule.id &&
      Number(other.driverId) === Number(schedule.driverId) &&
      hasOverlap({ start: new Date(schedule.startTime), end: new Date(schedule.endTime) }, other)
    )
  }

  const scheduleHasBusConflict = (schedule) => {
    if (!schedule?.busId) return false
    return schedules.some(other =>
      other.id !== schedule.id &&
      Number(other.busId) === Number(schedule.busId) &&
      hasOverlap({ start: new Date(schedule.startTime), end: new Date(schedule.endTime) }, other)
    )
  }

  // Group schedules by date and time (apply driver filter if selected)
  const timeSlots = generateTimeSlots()
  const filteredSchedules = selectedDriverFilter
    ? schedules.filter(s => String(s.driverId) === String(selectedDriverFilter))
    : schedules
  const schedulesBySlot = groupSchedulesByTimeSlot(filteredSchedules, timeSlots)

  return (
    <section className="card">
      <div className="section-header">
        <div>
          <h2>Diensten Inplannen</h2>
          <p>Maak diensten aan met automatische eindtijd, vertrektijden per halte en herhaald rooster.</p>
        </div>
        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
          <button className="secondary" onClick={loadSchedules}>Refresh</button>
          <select
            value={selectedDriverFilter}
            onChange={e => setSelectedDriverFilter(e.target.value)}
            style={{ padding: '6px', borderRadius: '6px', border: '1px solid #ccc' }}
          >
            <option value="">Alle chauffeurs</option>
            {drivers.map(d => (
              <option key={d.id} value={d.id}>{d.name}</option>
            ))}
          </select>
        </div>
      </div>

      {isAdmin && (
        <form onSubmit={createSchedule} className="stack-form">
          <div className="form-row">
            <select value={selectedLine} onChange={e => setSelectedLine(e.target.value)}>
              <option value="">Kies lijn</option>
              {busLines.map(line => (
                <option key={line.id} value={line.id}>
                  Lijn {line.lineNumber} ({line.startStop} → {line.endStop})
                </option>
              ))}
            </select>
            <select value={selectedBus} onChange={e => setSelectedBus(e.target.value)}>
              <option value="">Kies voertuig</option>
              {buses.map(bus => (
                <option key={bus.id} value={bus.id} disabled={busyBusIds.has(Number(bus.id))}>
                  {bus.name} ({bus.licensePlate}) {busyBusIds.has(Number(bus.id)) ? '- in gebruik' : ''}
                </option>
              ))}
            </select>
          </div>

          <div className="form-row">
            <select value={driverId} onChange={e => setDriverId(e.target.value)}>
              <option value="">Bestuurder (optioneel)</option>
              {drivers.map(driver => (
                <option key={driver.id} value={driver.id} disabled={busyDriverIds.has(Number(driver.id))}>
                  {driver.name} {busyDriverIds.has(Number(driver.id)) ? '- in gebruik' : ''}
                </option>
              ))}
            </select>
            <input
              type="date"
              value={selectedDate}
              onChange={e => setSelectedDate(e.target.value)}
            />
            <input
              type="time"
              value={startTime}
              onChange={e => setStartTime(e.target.value)}
              placeholder="Start time"
            />
          </div>

          <div style={{ marginBottom: '1rem' }}>
            <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 500 }}>
              Herhaal op weekdagen (optioneel):
            </label>
            <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
              {WEEKDAYS.map((day, idx) => (
                <button
                  key={day}
                  type="button"
                  onClick={() => toggleWeekday(WEEKDAY_VALUES[idx])}
                  style={{
                    padding: '0.5rem 1rem',
                    backgroundColor: selectedWeekdays.includes(WEEKDAY_VALUES[idx]) ? '#1D4ED8' : '#e0e0e0',
                    color: selectedWeekdays.includes(WEEKDAY_VALUES[idx]) ? '#fff' : '#000',
                    border: 'none',
                    borderRadius: '4px',
                    cursor: 'pointer',
                    fontSize: '0.9rem',
                  }}
                >
                  {day}
                </button>
              ))}
            </div>
          </div>

          <div className="form-row">
            <button type="submit">Dienst Aanmaken</button>
          </div>
        </form>
      )}

      <h3 style={{ marginTop: '2rem' }}>Timetable</h3>
      <div className="timetable-container">
        <table className="timetable">
          <thead>
            <tr>
              <th>Tijdvak</th>
              <th>Lijnen en Voertuigen</th>
            </tr>
          </thead>
          <tbody>
            {timeSlots.map((slot, idx) => (
              <tr key={idx}>
                <td className="time-cell">{slot}</td>
                <td className="schedule-cell">
                  <div className="schedule-items">
                    {schedulesBySlot[slot]?.map(schedule => (
                      <article
                        key={schedule.id}
                        className="schedule-card"
                        style={{ position: 'relative' }}
                      >
                        <div className="schedule-header">
                          <strong>Lijn {schedule.lineNumber}</strong>
                          <span className="schedule-time">
                            {formatTime(schedule.startTime)} - {formatTime(schedule.endTime)}
                          </span>
                        </div>
                        <div className="schedule-details">
                          <div>{schedule.busName}</div>
                          <div className="schedule-plate">{schedule.licensePlate}</div>
                          {schedule.driverName && (
                            <div style={{ fontSize: '0.85rem', color: '#666', marginTop: '0.25rem' }}>
                              {schedule.driverName}
                            </div>
                          )}
                          {scheduleHasDriverConflict(schedule) && (
                            <div style={{ fontSize: '0.75rem', color: '#b45309', marginTop: '0.25rem', fontWeight: 600 }}>
                              Chauffeur in gebruik
                            </div>
                          )}
                          {scheduleHasBusConflict(schedule) && (
                            <div style={{ fontSize: '0.75rem', color: '#b45309', marginTop: '0.25rem', fontWeight: 600 }}>
                              Voertuig in gebruik
                            </div>
                          )}
                          {schedule.weekdays && schedule.weekdays.length > 0 && (
                            <div style={{ fontSize: '0.85rem', color: '#666', marginTop: '0.25rem' }}>
                              {getWeekdayLabel(schedule.weekdays)}
                            </div>
                          )}
                        </div>

                        {/* Expandable stops list */}
                        <button
                          type="button"
                          onClick={() => setExpandedSchedule(expandedSchedule === schedule.id ? null : schedule.id)}
                          style={{
                            marginTop: '0.5rem',
                            width: '100%',
                            padding: '0.4rem',
                            fontSize: '0.85rem',
                            backgroundColor: '#f0f0f0',
                            border: '1px solid #ddd',
                            borderRadius: '3px',
                            cursor: 'pointer',
                          }}
                        >
                          {expandedSchedule === schedule.id ? '▼' : '▶'} Haltes ({schedule.departureTimes?.length || 0})
                        </button>

                        {expandedSchedule === schedule.id && (
                          <div style={{ marginTop: '0.5rem', paddingTop: '0.5rem', borderTop: '1px solid #eee' }}>
                            {(() => {
                              const lineId = schedule.busLineId
                              const cached = routeStopsByLine[lineId]
                              if (!cached) {
                                // Load and show loading text
                                loadRouteStops(lineId)
                                return <p style={{ fontSize: '0.85rem', color: '#999' }}>Laden haltes...</p>
                              }

                              if (cached.length === 0) {
                                return <p style={{ fontSize: '0.85rem', color: '#999' }}>Geen haltes gekoppeld</p>
                              }

                              // Render editable list of stops with ETA inputs
                              return (
                                <table style={{ width: '100%', fontSize: '0.8rem' }}>
                                  <tbody>
                                    {cached.map(rs => {
                                      const departureDate = new Date(schedule.startTime)
                                      departureDate.setMinutes(departureDate.getMinutes() + (rs.estimatedArrivalMinutes || 0))
                                      return (
                                        <tr key={rs.id}>
                                          <td style={{ paddingRight: '0.5rem' }}><strong>{rs.stopOrder}.</strong></td>
                                          <td style={{ flex: 1 }}>{rs.name}</td>
                                          <td style={{ textAlign: 'right', color: '#666' }}>{formatTime(departureDate.toISOString())}</td>
                                          <td style={{ paddingLeft: '0.5rem' }}>
                                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                                              <input
                                                type="range"
                                                min="0"
                                                max="240"
                                                value={Number(rs.estimatedArrivalMinutes ?? 0)}
                                                onChange={e => {
                                                  const val = Number(e.target.value)
                                                  setRouteStopsByLine(prev => ({
                                                    ...prev,
                                                    [lineId]: prev[lineId].map(item => item.id === rs.id ? { ...item, estimatedArrivalMinutes: val } : item)
                                                  }))
                                                }}
                                                style={{ width: '8rem' }}
                                              />
                                              <input
                                                type="number"
                                                value={Number(rs.estimatedArrivalMinutes ?? 0)}
                                                onChange={e => {
                                                  const val = e.target.value === '' ? 0 : Number(e.target.value)
                                                  setRouteStopsByLine(prev => ({
                                                    ...prev,
                                                    [lineId]: prev[lineId].map(item => item.id === rs.id ? { ...item, estimatedArrivalMinutes: val } : item)
                                                  }))
                                                }}
                                                style={{ width: '4.5rem' }}
                                              />
                                            </div>
                                            <button type="button" onClick={async () => {
                                              const newVal = Number((routeStopsByLine[lineId].find(i => i.id === rs.id)?.estimatedArrivalMinutes) || 0)
                                              try {
                                                await client.post(`/admin/bus-lines/${lineId}/stops`, {
                                                  stopId: rs.stopId,
                                                  stopOrder: rs.stopOrder,
                                                  estimatedArrivalMinutes: newVal,
                                                })
                                                setMessage('ETA updated')
                                                await loadRouteStops(lineId)
                                                await loadSchedules()
                                              } catch (err) {
                                                setMessage('Error: ' + (err.response?.data?.error || err.message))
                                              }
                                            }} style={{ marginLeft: '0.5rem' }}>Save</button>
                                          </td>
                                        </tr>
                                      )
                                    })}
                                  </tbody>
                                </table>
                              )
                            })()}
                          </div>
                        )}

                        {isAdmin && (
                          <button
                            className="danger"
                            style={{ marginTop: '0.5rem', width: '100%', fontSize: '0.85rem', padding: '0.4rem' }}
                            onClick={() => setDeleteConfirm(schedule)}
                          >
                            Delete
                          </button>
                        )}
                      </article>
                    ))}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {message && <div className="message">{message}</div>}

      {deleteConfirm && (
        <div style={overlay}>
          <div style={modal}>
            <h3>Delete Service?</h3>
            <p>
              <strong>Lijn {deleteConfirm.lineNumber}</strong> - {deleteConfirm.busName} ({deleteConfirm.licensePlate})
            </p>
            <p style={{ color: '#999', fontSize: '0.9rem' }}>
              {new Date(deleteConfirm.startTime).toLocaleString()}
            </p>
            <div className="form-row" style={{ marginTop: '1rem' }}>
              <button className="secondary" onClick={() => setDeleteConfirm(null)}>Cancel</button>
              <button
                className="danger"
                onClick={() =>
                  deleteSchedule(deleteConfirm.id, deleteConfirm.lineNumber, deleteConfirm.busName)
                }
              >
                Delete
              </button>
            </div>
          </div>
        </div>
      )}
    </section>
  )
}

function generateTimeSlots() {
  const slots = []
  for (let hour = 0; hour < 24; hour++) {
    slots.push(`${String(hour).padStart(2, '0')}:00-${String((hour + 1) % 24).padStart(2, '0')}:00`)
  }
  return slots
}

function groupSchedulesByTimeSlot(schedules, slots) {
  const grouped = {}
  slots.forEach(slot => {
    grouped[slot] = []
  })

  schedules.forEach(schedule => {
    const startHour = new Date(schedule.startTime).getHours()
    const slot = `${String(startHour).padStart(2, '0')}:00-${String((startHour + 1) % 24).padStart(2, '0')}:00`
    if (grouped[slot]) {
      grouped[slot].push(schedule)
    }
  })

  return grouped
}

function formatTime(timeString) {
  const date = new Date(timeString)
  return date.toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })
}

const overlay = {
  position: 'fixed',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  backgroundColor: 'rgba(0,0,0,0.5)',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  zIndex: 1000,
}

const modal = {
  backgroundColor: '#fff',
  padding: '2rem',
  borderRadius: '8px',
  maxWidth: '400px',
  boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
}