import { useState } from 'react';
import {
  Box,
  Typography,
  Button,
  Chip,
  Switch,
  Alert,
  Skeleton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  IconButton,
  Tab,
  Tabs,
  TextField,
  Select,
  MenuItem,
  FormControl,
  FormLabel,
  CircularProgress,
  Divider,
} from '@mui/material';
import { Add as AddIcon, Edit as EditIcon, Delete as DeleteIcon, Send as SendIcon } from '@mui/icons-material';
import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { usePermissionContext } from '../contexts/PermissionContext';
import { useNotification } from '../contexts/NotificationContext';
import { scheduledMessagesApi } from '../services/scheduledMessages';
import type { MessageType, ScheduledMessageRule } from '../types/scheduledMessages.types';

const MESSAGE_TYPE_LABELS: Record<MessageType, string> = {
  event_summary: 'Terminübersicht',
  birthday_list: 'Geburtstagsliste',
  dienstjubilaeen: 'Dienstjubiläen',
  fahrzeug_status: 'Fahrzeugstatus',
  fahrzeug_event: 'Fahrzeug außer Dienst',
  bestellungen: 'Offene Bestellungen',
};

const TRIGGER_LABELS: Record<string, string> = {
  day_of_week: 'Wochentag',
  days_before_month_start: 'Vor Monatsbeginn',
  event: 'Ereignis',
};

const WEEKDAY_LABELS = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];

function triggerSummary(rule: ScheduledMessageRule): string {
  if (rule.trigger_mode === 'event') return 'Bei Ereignis';
  if (rule.trigger_mode === 'day_of_week') {
    const day = rule.day_of_week != null ? WEEKDAY_LABELS[rule.day_of_week] : '?';
    const time = rule.send_time ?? '';
    return `${day} ${time}`.trim();
  }
  if (rule.trigger_mode === 'days_before_month_start') {
    return `${rule.days_before_month_start ?? '?'} Tage vor Monatsbeginn`;
  }
  return TRIGGER_LABELS[rule.trigger_mode] ?? rule.trigger_mode;
}

function formatSendAt(iso: string): string {
  return new Date(iso).toLocaleString('de-DE', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  });
}

function EinzelNachrichtenTab() {
  const queryClient = useQueryClient();
  const { showSuccess, showError } = useNotification();

  const { data: messagesData, isLoading: messagesLoading, isError: messagesError } = useQuery({
    queryKey: ['scheduled-one-time-messages'],
    queryFn: scheduledMessagesApi.getOneTimeMessages,
  });

  const { data: roomsData, isLoading: roomsLoading } = useQuery({
    queryKey: ['scheduled-messages-rooms'],
    queryFn: scheduledMessagesApi.getRooms,
  });

  const [message, setMessage] = useState('');
  const [roomToken, setRoomToken] = useState('');
  const [sendAt, setSendAt] = useState('');

  const rooms = roomsData?.data ?? [];
  const roomsConfigured = roomsData?.configured ?? false;
  const roomsErr = roomsData?.error;

  const createMutation = useMutation({
    mutationFn: () => {
      const room = rooms.find(r => r.token === roomToken);
      return scheduledMessagesApi.createOneTimeMessage({
        message,
        target_room_token: roomToken,
        target_room_name: room?.displayName,
        send_at: new Date(sendAt).toISOString(),
      });
    },
    onSuccess: () => {
      showSuccess('Einzelnachricht geplant');
      setMessage('');
      setRoomToken('');
      setSendAt('');
      queryClient.invalidateQueries({ queryKey: ['scheduled-one-time-messages'] });
    },
    onError: () => showError('Fehler beim Speichern'),
  });

  const deleteMutation = useMutation({
    mutationFn: (id: string) => scheduledMessagesApi.deleteOneTimeMessage(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['scheduled-one-time-messages'] });
    },
    onError: () => showError('Fehler beim Löschen'),
  });

  const canCreate = !!message.trim() && !!roomToken && !!sendAt;

  return (
    <Box>
      <Paper sx={{ p: 3, mb: 3 }}>
        <Typography variant="subtitle1" gutterBottom fontWeight={500}>Neue Einzelnachricht</Typography>
        <Divider sx={{ mb: 2 }} />

        {/* Room picker */}
        <Box sx={{ mb: 2 }}>
          <FormControl fullWidth size="small">
            <FormLabel sx={{ mb: 0.5 }}>Zielraum</FormLabel>
            {roomsLoading ? (
              <CircularProgress size={20} />
            ) : !roomsConfigured ? (
              <Alert severity="warning" sx={{ mt: 1 }}>
                Bot-Konto nicht konfiguriert. Bitte in den Admin-Einstellungen unter Nextcloud konfigurieren.
              </Alert>
            ) : roomsErr ? (
              <Alert severity="error" sx={{ mt: 1 }}>
                Nextcloud nicht erreichbar — Raumliste kann nicht geladen werden.
              </Alert>
            ) : (
              <Select
                value={roomToken}
                onChange={(e) => setRoomToken(e.target.value)}
                displayEmpty
              >
                <MenuItem value="" disabled>Raum auswählen...</MenuItem>
                {rooms.map((room) => (
                  <MenuItem key={room.token} value={room.token}>
                    {room.displayName}
                  </MenuItem>
                ))}
              </Select>
            )}
          </FormControl>
        </Box>

        {/* Send time */}
        <Box sx={{ mb: 2 }}>
          <TextField
            label="Sendezeitpunkt"
            type="datetime-local"
            value={sendAt}
            onChange={(e) => setSendAt(e.target.value)}
            size="small"
            InputLabelProps={{ shrink: true }}
          />
        </Box>

        {/* Message */}
        <Box sx={{ mb: 2 }}>
          <TextField
            label="Nachricht"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            multiline
            minRows={3}
            maxRows={8}
            fullWidth
            size="small"
          />
        </Box>

        <Button
          variant="contained"
          startIcon={createMutation.isPending ? <CircularProgress size={16} /> : <SendIcon />}
          onClick={() => createMutation.mutate()}
          disabled={!canCreate || createMutation.isPending || !roomsConfigured}
        >
          Planen
        </Button>
      </Paper>

      {/* Pending messages list */}
      <Typography variant="subtitle1" gutterBottom fontWeight={500}>Ausstehende Einzelnachrichten</Typography>

      {messagesError && (
        <Alert severity="error" sx={{ mb: 2 }}>Fehler beim Laden der Nachrichten.</Alert>
      )}

      {messagesLoading ? (
        <TableContainer component={Paper}>
          <Table size="small">
            <TableBody>
              {[1, 2].map((i) => (
                <TableRow key={i}>
                  {[1, 2, 3, 4].map((j) => <TableCell key={j}><Skeleton /></TableCell>)}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      ) : !messagesData?.data?.length ? (
        <Typography color="text.secondary" sx={{ py: 2 }}>
          Keine ausstehenden Einzelnachrichten.
        </Typography>
      ) : (
        <TableContainer component={Paper}>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>Nachricht</TableCell>
                <TableCell>Zielraum</TableCell>
                <TableCell>Sendezeitpunkt</TableCell>
                <TableCell />
              </TableRow>
            </TableHead>
            <TableBody>
              {messagesData.data.map((msg) => (
                <TableRow key={msg.id}>
                  <TableCell sx={{ maxWidth: 300, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    {msg.message}
                  </TableCell>
                  <TableCell>{msg.target_room_name ?? msg.target_room_token}</TableCell>
                  <TableCell>{formatSendAt(msg.send_at)}</TableCell>
                  <TableCell padding="checkbox">
                    <IconButton
                      size="small"
                      color="error"
                      onClick={() => deleteMutation.mutate(msg.id)}
                      disabled={deleteMutation.isPending}
                    >
                      <DeleteIcon fontSize="small" />
                    </IconButton>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}
    </Box>
  );
}

export default function GeplanteMachrichten() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { hasPermission } = usePermissionContext();
  const canEdit = hasPermission('scheduled_messages:edit');

  const [tab, setTab] = useState(0);

  const { data, isLoading, isError } = useQuery({
    queryKey: ['scheduled-messages'],
    queryFn: scheduledMessagesApi.getAll,
  });

  const rules = data?.data ?? [];

  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);

  const handleToggleActive = async (rule: ScheduledMessageRule) => {
    await scheduledMessagesApi.update(rule.id, { active: !rule.active });
    queryClient.invalidateQueries({ queryKey: ['scheduled-messages'] });
  };

  const handleDelete = async (id: string) => {
    await scheduledMessagesApi.delete(id);
    setDeleteConfirmId(null);
    queryClient.invalidateQueries({ queryKey: ['scheduled-messages'] });
  };

  return (
    <DashboardLayout>
      <Box sx={{ p: 3 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
          <Typography variant="h5">Geplante Nachrichten</Typography>
          {canEdit && tab === 0 && (
            <Button
              variant="contained"
              startIcon={<AddIcon />}
              onClick={() => navigate('/geplante-nachrichten/neu')}
            >
              Neue Regel
            </Button>
          )}
        </Box>

        <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 2 }}>
          <Tab label="Regeln" />
          {canEdit && <Tab label="Einzelnachrichten" />}
        </Tabs>

        {tab === 0 && (
          <>
            {isError && (
              <Alert severity="error" sx={{ mb: 2 }}>
                Fehler beim Laden der Regeln.
              </Alert>
            )}

            {isLoading ? (
              <TableContainer component={Paper}>
                <Table>
                  <TableHead>
                    <TableRow>
                      <TableCell>Name</TableCell>
                      <TableCell>Typ</TableCell>
                      <TableCell>Trigger</TableCell>
                      <TableCell>Zielraum</TableCell>
                      <TableCell>Abonnierbar</TableCell>
                      <TableCell>Aktiv</TableCell>
                      <TableCell />
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {[1, 2, 3].map((i) => (
                      <TableRow key={i}>
                        {[1, 2, 3, 4, 5, 6, 7].map((j) => (
                          <TableCell key={j}><Skeleton /></TableCell>
                        ))}
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </TableContainer>
            ) : rules.length === 0 ? (
              <Typography sx={{ textAlign: 'center', py: 4 }} color="text.secondary">
                Keine Regeln konfiguriert
              </Typography>
            ) : (
              <TableContainer component={Paper}>
                <Table>
                  <TableHead>
                    <TableRow>
                      <TableCell>Name</TableCell>
                      <TableCell>Typ</TableCell>
                      <TableCell>Trigger</TableCell>
                      <TableCell>Zielraum</TableCell>
                      <TableCell>Abonnierbar</TableCell>
                      <TableCell>Aktiv</TableCell>
                      <TableCell />
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {rules.map((rule) => (
                      <TableRow
                        key={rule.id}
                        hover
                        sx={{ cursor: 'pointer' }}
                        onClick={() => navigate(`/geplante-nachrichten/${rule.id}`)}
                      >
                        <TableCell>{rule.name}</TableCell>
                        <TableCell>
                          <Chip
                            label={MESSAGE_TYPE_LABELS[rule.message_type] ?? rule.message_type}
                            size="small"
                            variant="outlined"
                          />
                        </TableCell>
                        <TableCell>{triggerSummary(rule)}</TableCell>
                        <TableCell>{rule.target_room_name ?? rule.target_room_token}</TableCell>
                        <TableCell>{rule.subscribable ? 'Ja' : 'Nein'}</TableCell>
                        <TableCell>
                          <Switch
                            checked={rule.active}
                            onClick={(e) => e.stopPropagation()}
                            onChange={() => handleToggleActive(rule)}
                            size="small"
                            disabled={!canEdit}
                          />
                        </TableCell>
                        <TableCell>
                          <Box sx={{ display: 'flex', gap: 0.5 }} onClick={(e) => e.stopPropagation()}>
                            {canEdit && (
                              <IconButton
                                size="small"
                                onClick={() => navigate(`/geplante-nachrichten/${rule.id}/bearbeiten`)}
                              >
                                <EditIcon fontSize="small" />
                              </IconButton>
                            )}
                            {canEdit && (
                              deleteConfirmId === rule.id ? (
                                <Button
                                  size="small"
                                  color="error"
                                  variant="contained"
                                  onClick={() => handleDelete(rule.id)}
                                >
                                  Löschen?
                                </Button>
                              ) : (
                                <Button
                                  size="small"
                                  color="error"
                                  onClick={() => setDeleteConfirmId(rule.id)}
                                >
                                  Löschen
                                </Button>
                              )
                            )}
                          </Box>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </TableContainer>
            )}
          </>
        )}

        {tab === 1 && canEdit && <EinzelNachrichtenTab />}
      </Box>
    </DashboardLayout>
  );
}
