"use client";

import { useState, useEffect } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";

interface Device {
  id: string;
  name: string;
  color: string;
}

interface PreviewRow {
  datum: string;
  uhrzeit: string;
  latitude: string;
  longitude: string;
  adresse: string;
  distanz: string;
  geschwindigkeit: string;
  geraet: string;
}

export default function ExportPage() {
  const { data: session, status } = useSession();
  const router = useRouter();

  const [devices, setDevices] = useState<Device[]>([]);
  const [selectedDevice, setSelectedDevice] = useState<string>("all");
  const [startTime, setStartTime] = useState<string>("");
  const [endTime, setEndTime] = useState<string>("");
  const [previewData, setPreviewData] = useState<PreviewRow[]>([]);
  const [totalPoints, setTotalPoints] = useState<number>(0);
  const [loading, setLoading] = useState(false);
  const [exporting, setExporting] = useState(false);
  const [exportProgress, setExportProgress] = useState<string>("");

  // Redirect if not authenticated
  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/login");
    }
  }, [status, router]);

  // Fetch devices
  useEffect(() => {
    const fetchDevices = async () => {
      try {
        const response = await fetch("/api/devices/public");
        if (response.ok) {
          const data = await response.json();
          setDevices(data.devices || []);
        }
      } catch (err) {
        console.error("Failed to fetch devices:", err);
      }
    };

    if (status === "authenticated") {
      fetchDevices();
    }
  }, [status]);

  // Set default time range (last 7 days)
  useEffect(() => {
    const now = new Date();
    const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);

    // Format for datetime-local input (YYYY-MM-DDTHH:mm)
    setEndTime(now.toISOString().slice(0, 16));
    setStartTime(sevenDaysAgo.toISOString().slice(0, 16));
  }, []);

  // Generate preview
  const handlePreview = async () => {
    setLoading(true);
    setPreviewData([]);
    setTotalPoints(0);

    try {
      const params = new URLSearchParams();
      if (selectedDevice !== "all") {
        params.set("username", selectedDevice);
      }
      if (startTime) {
        params.set("startTime", new Date(startTime).toISOString());
      }
      if (endTime) {
        params.set("endTime", new Date(endTime).toISOString());
      }
      params.set("limit", "50"); // Preview only first 50

      const response = await fetch(`/api/locations?${params.toString()}`);
      if (!response.ok) throw new Error("Failed to fetch preview");

      const data = await response.json();
      const locations = data.history || [];
      setTotalPoints(locations.length);

      // Sort chronologically
      locations.sort((a: any, b: any) =>
        new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
      );

      // Build preview rows (without geocoding)
      const rows: PreviewRow[] = [];
      for (let i = 0; i < Math.min(locations.length, 50); i++) {
        const loc = locations[i];
        const lat = Number(loc.latitude);
        const lon = Number(loc.longitude);

        // Calculate distance
        let distance = 0;
        if (i > 0) {
          const prevLoc = locations[i - 1];
          distance = calculateDistance(
            Number(prevLoc.latitude),
            Number(prevLoc.longitude),
            lat,
            lon
          );
        }

        const date = new Date(loc.timestamp);
        rows.push({
          datum: date.toLocaleDateString('de-DE'),
          uhrzeit: date.toLocaleTimeString('de-DE'),
          latitude: lat.toFixed(6),
          longitude: lon.toFixed(6),
          adresse: `${lat.toFixed(6)}, ${lon.toFixed(6)}`,
          distanz: distance.toFixed(3),
          geschwindigkeit: loc.speed != null ? Number(loc.speed).toFixed(1) : '-',
          geraet: loc.username || 'Unbekannt',
        });
      }

      setPreviewData(rows);
    } catch (error) {
      console.error("Preview error:", error);
      alert("Fehler beim Laden der Vorschau");
    } finally {
      setLoading(false);
    }
  };

  // Export CSV with geocoding
  const handleExport = async () => {
    if (previewData.length === 0) {
      alert("Bitte zuerst Vorschau laden");
      return;
    }

    const confirmed = confirm(
      `${totalPoints} GPS-Punkte werden exportiert.\n\n` +
      `ACHTUNG: Adressauflösung (Geocoding) kann bei vielen Punkten sehr lange dauern (ca. 1 Punkt pro Sekunde).\n\n` +
      `Geschätzte Dauer: ca. ${Math.ceil(totalPoints / 60)} Minuten.\n\n` +
      `Möchten Sie fortfahren?`
    );

    if (!confirmed) return;

    setExporting(true);
    setExportProgress(`Starte Export von ${totalPoints} Punkten...`);

    try {
      const params = new URLSearchParams();
      if (selectedDevice !== "all") {
        params.set("username", selectedDevice);
      }
      if (startTime) {
        params.set("startTime", new Date(startTime).toISOString());
      }
      if (endTime) {
        params.set("endTime", new Date(endTime).toISOString());
      }
      params.set("includeGeocoding", "true");

      setExportProgress("Lade Daten und löse Adressen auf...");

      const response = await fetch(`/api/export/csv?${params.toString()}`);
      if (!response.ok) throw new Error("Export failed");

      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `fahrtenbuch_${startTime ? new Date(startTime).toISOString().split('T')[0] : 'alle'}_${endTime ? new Date(endTime).toISOString().split('T')[0] : 'alle'}.csv`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);

      setExportProgress("Export erfolgreich abgeschlossen!");
      setTimeout(() => setExportProgress(""), 3000);
    } catch (error) {
      console.error("Export error:", error);
      alert("Fehler beim Exportieren");
      setExportProgress("");
    } finally {
      setExporting(false);
    }
  };

  // Export CSV without geocoding (faster)
  const handleQuickExport = async () => {
    if (previewData.length === 0) {
      alert("Bitte zuerst Vorschau laden");
      return;
    }

    setExporting(true);
    setExportProgress("Exportiere ohne Adressauflösung...");

    try {
      const params = new URLSearchParams();
      if (selectedDevice !== "all") {
        params.set("username", selectedDevice);
      }
      if (startTime) {
        params.set("startTime", new Date(startTime).toISOString());
      }
      if (endTime) {
        params.set("endTime", new Date(endTime).toISOString());
      }
      params.set("includeGeocoding", "false");

      const response = await fetch(`/api/export/csv?${params.toString()}`);
      if (!response.ok) throw new Error("Export failed");

      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `fahrtenbuch_schnell_${startTime ? new Date(startTime).toISOString().split('T')[0] : 'alle'}_${endTime ? new Date(endTime).toISOString().split('T')[0] : 'alle'}.csv`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);

      setExportProgress("Export erfolgreich abgeschlossen!");
      setTimeout(() => setExportProgress(""), 3000);
    } catch (error) {
      console.error("Export error:", error);
      alert("Fehler beim Exportieren");
      setExportProgress("");
    } finally {
      setExporting(false);
    }
  };

  if (status === "loading") {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <p>Laden...</p>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-7xl mx-auto">
        <div className="bg-white rounded-lg shadow p-6 mb-6">
          <h1 className="text-3xl font-bold mb-2">CSV-Export für Fahrtenbuch</h1>
          <p className="text-gray-600 mb-6">
            Exportieren Sie Ihre GPS-Tracking-Daten für Lexware oder andere Fahrtenbuch-Software
          </p>

          {/* Filters */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div>
              <label className="block text-sm font-medium mb-2">Gerät</label>
              <select
                value={selectedDevice}
                onChange={(e) => setSelectedDevice(e.target.value)}
                className="w-full border border-gray-300 rounded px-3 py-2"
              >
                <option value="all">Alle Geräte</option>
                {devices.map((dev) => (
                  <option key={dev.id} value={dev.id}>
                    {dev.name}
                  </option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium mb-2">Von</label>
              <input
                type="datetime-local"
                value={startTime}
                onChange={(e) => setStartTime(e.target.value)}
                className="w-full border border-gray-300 rounded px-3 py-2"
              />
            </div>

            <div>
              <label className="block text-sm font-medium mb-2">Bis</label>
              <input
                type="datetime-local"
                value={endTime}
                onChange={(e) => setEndTime(e.target.value)}
                className="w-full border border-gray-300 rounded px-3 py-2"
              />
            </div>
          </div>

          {/* Action Buttons */}
          <div className="flex gap-3 mb-6">
            <button
              onClick={handlePreview}
              disabled={loading}
              className="px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-400"
            >
              {loading ? "Lädt..." : "Vorschau laden"}
            </button>

            <button
              onClick={handleQuickExport}
              disabled={exporting || previewData.length === 0}
              className="px-6 py-2 bg-green-600 text-white rounded hover:bg-green-700 disabled:bg-gray-400"
            >
              Schnell-Export (ohne Adressen)
            </button>

            <button
              onClick={handleExport}
              disabled={exporting || previewData.length === 0}
              className="px-6 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 disabled:bg-gray-400"
            >
              Vollständiger Export (mit Adressen)
            </button>
          </div>

          {/* Progress */}
          {exportProgress && (
            <div className="mb-4 p-4 bg-blue-50 border border-blue-200 rounded">
              <p className="text-blue-800">{exportProgress}</p>
            </div>
          )}

          {/* Info */}
          {totalPoints > 0 && (
            <div className="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded">
              <p className="text-sm text-yellow-800">
                <strong>Gefunden:</strong> {totalPoints} GPS-Punkte im gewählten Zeitraum
                {totalPoints > 50 && " (Vorschau zeigt erste 50)"}
              </p>
              <p className="text-sm text-yellow-800 mt-1">
                <strong>Hinweis:</strong> Der vollständige Export mit Adressauflösung dauert ca. {Math.ceil(totalPoints / 60)} Minuten.
                Für schnelle Exporte nutzen Sie den Schnell-Export.
              </p>
            </div>
          )}
        </div>

        {/* Preview Table */}
        {previewData.length > 0 && (
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-xl font-bold mb-4">Vorschau (erste 50 Zeilen)</h2>
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Datum</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Uhrzeit</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Latitude</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Longitude</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Adresse</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Distanz (km)</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Geschw. (km/h)</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Gerät</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {previewData.map((row, idx) => (
                    <tr key={idx} className="hover:bg-gray-50">
                      <td className="px-4 py-3 text-sm">{row.datum}</td>
                      <td className="px-4 py-3 text-sm">{row.uhrzeit}</td>
                      <td className="px-4 py-3 text-sm font-mono text-xs">{row.latitude}</td>
                      <td className="px-4 py-3 text-sm font-mono text-xs">{row.longitude}</td>
                      <td className="px-4 py-3 text-sm text-gray-600">{row.adresse}</td>
                      <td className="px-4 py-3 text-sm">{row.distanz}</td>
                      <td className="px-4 py-3 text-sm">{row.geschwindigkeit}</td>
                      <td className="px-4 py-3 text-sm">{row.geraet}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// Haversine distance calculation (client-side for preview)
function calculateDistance(lat1: number, lon1: number, lat2: number, lon2: number): number {
  const R = 6371;
  const dLat = toRadians(lat2 - lat1);
  const dLon = toRadians(lon2 - lon1);

  const a =
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(toRadians(lat1)) *
      Math.cos(toRadians(lat2)) *
      Math.sin(dLon / 2) *
      Math.sin(dLon / 2);

  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return R * c;
}

function toRadians(degrees: number): number {
  return degrees * (Math.PI / 180);
}