import React, { useState, useEffect } from 'react';
import { Plus, UserCheck, RefreshCw, Trash2, Edit3, CheckCircle, Clock, CalendarDays, MoveHorizontal } from 'lucide-react';
import { ScheduleItem } from '../types';
import { SupabaseService } from '../services/supabaseService';
import { ScheduleItemModal } from '../components/ScheduleItemModal';
import { DispatchingInteractiveView } from './DispatchingInteractiveView';

export const DispatchingView: React.FC = () => {
  const [scheduleData, setScheduleData] = useState<ScheduleItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingItem, setEditingItem] = useState<ScheduleItem | null>(null);
  const [toastMessage, setToastMessage] = useState<string | null>(null);

  // View Mode Switcher: 'list' (Standard Tabelle) vs 'interactive' (Drag & Drop Timeline)
  const [viewMode, setViewMode] = useState<'list' | 'interactive'>('interactive');

  const showNotification = (msg: string) => {
    setToastMessage(msg);
    setTimeout(() => setToastMessage(null), 4000);
  };

  const loadData = async () => {
    setLoading(true);
    try {
      const items = await SupabaseService.getScheduleItems();
      setScheduleData(items);
    } catch (err) {
      console.error('Fehler beim Laden des Tagesplans:', err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadData();
  }, []);

  const handleSaveItem = async (data: Omit<ScheduleItem, 'id'> | ScheduleItem) => {
    if ('id' in data) {
      const updated = await SupabaseService.updateScheduleItem(data.id, data);
      showNotification(`Einsatz "${updated.title}" aktualisiert.`);
    } else {
      const created = await SupabaseService.createScheduleItem(data);
      showNotification(`Neuer Einsatz "${created.title}" in Supabase eingeplant.`);
    }
    await loadData();
  };

  const handleStatusToggle = async (item: ScheduleItem) => {
    let nextStatus: 'Geplant' | 'In Bearbeitung' | 'Abgeschlossen' = 'In Bearbeitung';
    if (item.status === 'In Bearbeitung') nextStatus = 'Abgeschlossen';
    else if (item.status === 'Abgeschlossen') nextStatus = 'Geplant';

    await SupabaseService.updateScheduleItem(item.id, { status: nextStatus });
    showNotification(`Status von "${item.title}" geändert auf ${nextStatus}.`);
    await loadData();
  };

  const handleDeleteItem = async (item: ScheduleItem) => {
    if (window.confirm(`Einsatz "${item.title}" aus dem Tagesplan löschen?`)) {
      await SupabaseService.deleteScheduleItem(item.id);
      showNotification(`Einsatz "${item.title}" gelöscht.`);
      await loadData();
    }
  };

  return (
    <>
      {/* Toast Notification */}
      {toastMessage && (
        <div style={{
          position: 'fixed',
          bottom: '24px',
          right: '24px',
          backgroundColor: '#0f172a',
          color: '#ffffff',
          padding: '14px 20px',
          borderRadius: '10px',
          boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.3)',
          display: 'flex',
          alignItems: 'center',
          gap: '12px',
          zIndex: 200,
          fontSize: '0.95rem',
          fontWeight: 600
        }}>
          <CheckCircle size={20} color="#10b981" />
          <span>{toastMessage}</span>
        </div>
      )}

      {/* Header Bar */}
      <header className="header-bar" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '16px' }}>
        <div>
          <h1 className="header-title">Dispatching & Auftragsdisposition</h1>
          <p style={{ color: '#64748b', fontSize: '0.9rem', marginTop: '4px' }}>
            Interaktives Timeline-Board mit Drag & Drop und Zeitraster (06:00 - 20:00 Uhr)
          </p>
        </div>

        <div style={{ display: 'flex', gap: '12px' }}>
          <button
            onClick={loadData}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              padding: '10px 16px',
              backgroundColor: '#ffffff',
              border: '1px solid #cbd5e1',
              borderRadius: '10px',
              color: '#475569',
              fontWeight: 600,
              cursor: 'pointer'
            }}
          >
            <RefreshCw size={16} className={loading ? 'spin' : ''} />
            {loading ? 'Lädt...' : 'Aktualisieren'}
          </button>

          <button 
            onClick={() => {
              setEditingItem(null);
              setIsModalOpen(true);
            }}
            style={{
              backgroundColor: '#2563eb',
              color: '#ffffff',
              border: 'none',
              padding: '10px 18px',
              borderRadius: '10px',
              fontWeight: 600,
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              cursor: 'pointer'
            }}
          >
            <Plus size={18} /> Neuer Einsatz
          </button>
        </div>
      </header>

      {/* View Switcher Tabs */}
      <div style={{
        display: 'flex',
        borderBottom: '2px solid #e2e8f0',
        marginBottom: '20px',
        gap: '24px'
      }}>
        <button
          onClick={() => setViewMode('interactive')}
          style={{
            padding: '12px 4px',
            border: 'none',
            borderBottom: viewMode === 'interactive' ? '3px solid #2563eb' : '3px solid transparent',
            backgroundColor: 'transparent',
            color: viewMode === 'interactive' ? '#2563eb' : '#64748b',
            fontWeight: 700,
            fontSize: '1rem',
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            gap: '8px'
          }}
        >
          <MoveHorizontal size={18} /> Interaktives Timeline-Board (6:00 - 20:00 Uhr)
        </button>

        <button
          onClick={() => setViewMode('list')}
          style={{
            padding: '12px 4px',
            border: 'none',
            borderBottom: viewMode === 'list' ? '3px solid #2563eb' : '3px solid transparent',
            backgroundColor: 'transparent',
            color: viewMode === 'list' ? '#2563eb' : '#64748b',
            fontWeight: 700,
            fontSize: '1rem',
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            gap: '8px'
          }}
        >
          <CalendarDays size={18} /> Tabellarische Liste (Standard)
        </button>
      </div>

      {/* Content Rendering based on selected view mode */}
      {viewMode === 'interactive' ? (
        <DispatchingInteractiveView />
      ) : (

      <section className="content-card">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px', flexWrap: 'wrap', gap: '10px' }}>
          <h2 className="card-heading" style={{ margin: 0 }}>Tagesdisposition ({scheduleData.length} Einsätze)</h2>
          <span style={{ fontSize: '0.9rem', color: '#64748b', fontWeight: 600 }}>Supabase Sync aktiv</span>
        </div>

        <div className="table-responsive">
          <table className="orders-table">
            <thead>
              <tr>
                <th>Uhrzeit</th>
                <th>Monteur</th>
                <th>Kunde & Adresse</th>
                <th>Aufgabe / Tätigkeit</th>
                <th>Status</th>
                <th style={{ textAlign: 'right' }}>Aktionen</th>
              </tr>
            </thead>
            <tbody>
              {scheduleData.map((item) => (
                <tr key={item.id}>
                  <td style={{ fontWeight: 600, color: '#2563eb', whiteSpace: 'nowrap' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                      <Clock size={16} />
                      {item.startTime} - {item.endTime}
                    </div>
                  </td>
                  <td style={{ fontWeight: 600, color: '#0f172a' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                      <UserCheck size={16} color="#64748b" />
                      {item.technicianName || 'Monteur'}
                    </div>
                  </td>
                  <td>
                    <div style={{ fontWeight: 600 }}>{item.customerName}</div>
                    {item.address && <div style={{ fontSize: '0.8rem', color: '#64748b' }}>{item.address}</div>}
                  </td>
                  <td>
                    <div style={{ fontWeight: 600, color: '#0f172a' }}>{item.title}</div>
                    {item.taskDescription && <div style={{ fontSize: '0.85rem', color: '#475569' }}>{item.taskDescription}</div>}
                  </td>
                  <td>
                    <button
                      onClick={() => handleStatusToggle(item)}
                      style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 0 }}
                      title="Klicken zum Ändern des Status"
                    >
                      <span className={`badge ${
                        item.status === 'Abgeschlossen' 
                          ? 'badge-in-progress' 
                          : item.status === 'In Bearbeitung' 
                          ? 'badge-scheduled' 
                          : ''
                      }`} style={{
                        backgroundColor: item.status === 'Abgeschlossen' ? '#dcfce7' : item.status === 'In Bearbeitung' ? '#dbeafe' : '#fef3c7',
                        color: item.status === 'Abgeschlossen' ? '#15803d' : item.status === 'In Bearbeitung' ? '#1d4ed8' : '#b45309'
                      }}>
                        {item.status || 'Geplant'} 🔄
                      </span>
                    </button>
                  </td>
                  <td style={{ textAlign: 'right' }}>
                    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
                      <button
                        onClick={() => {
                          setEditingItem(item);
                          setIsModalOpen(true);
                        }}
                        style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#64748b' }}
                        title="Einsatz bearbeiten"
                      >
                        <Edit3 size={18} />
                      </button>

                      <button
                        onClick={() => handleDeleteItem(item)}
                        style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#ef4444' }}
                        title="Einsatz löschen"
                      >
                        <Trash2 size={18} />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}

              {scheduleData.length === 0 && (
                <tr>
                  <td colSpan={6} style={{ textAlign: 'center', padding: '30px', color: '#64748b' }}>
                    Keine Einsätze für heute vorhanden.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </section>
      )}

      <ScheduleItemModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        onSave={handleSaveItem}
        initialItem={editingItem}
      />
    </>
  );
};