"use client";

import { useEffect, useState, useCallback } from "react";
import { exportData, getExportStatus, ExportResult } from "@/lib/api";
import { Download, RefreshCw, FileArchive, CheckCircle, Clock, AlertCircle } from "lucide-react";

const EXPORT_TYPES = [
  { value: "messages", label: "Messages" },
  { value: "channels", label: "Channels" },
  { value: "files", label: "Files" },
  { value: "full", label: "Full Workspace" },
];

export function DataExport() {
  const [exportType, setExportType] = useState("messages");
  const [dateFrom, setDateFrom] = useState("");
  const [dateTo, setDateTo] = useState("");
  const [exporting, setExporting] = useState(false);
  const [error, setError] = useState("");
  const [recentExports, setRecentExports] = useState<ExportResult[]>([]);

  const pollExport = useCallback(async (exportId: string) => {
    let attempts = 0;
    const maxAttempts = 30;

    const poll = async () => {
      attempts++;
      if (attempts > maxAttempts) return;
      try {
        const status = await getExportStatus(exportId);
        setRecentExports((prev) =>
          prev.map((e) => (e.id === exportId ? status : e))
        );
        if (status.status === "completed" || status.status === "failed") return;
        setTimeout(poll, 2000);
      } catch (err) {
        console.error("Failed to poll export status:", err);
      }
    };

    setTimeout(poll, 2000);
  }, []);

  const handleExport = () => {
    setExporting(true);
    setError("");
    const dateRange =
      dateFrom || dateTo ? { from: dateFrom, to: dateTo } : undefined;

    exportData(exportType, dateRange)
      .then((result) => {
        setRecentExports((prev) => [result, ...prev]);
        pollExport(result.id);
      })
      .catch((err) => {
        console.error("Failed to start export:", err);
        setError("Failed to start export");
      })
      .finally(() => setExporting(false));
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "completed":
        return <CheckCircle size={14} className="text-slack-green" />;
      case "failed":
        return <AlertCircle size={14} className="text-slack-red" />;
      case "running":
      case "pending":
        return <Clock size={14} className="text-slack-yellow animate-pulse" />;
      default:
        return <Clock size={14} className="text-gray-400" />;
    }
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h2 className="text-lg font-bold text-gray-800 flex items-center gap-2">
          <FileArchive size={20} className="text-slack-purple" />
          Data Export
        </h2>
        <p className="text-sm text-gray-400 mt-0.5">
          Export workspace data for compliance or backup
        </p>
      </div>

      {/* Export form */}
      <div className="p-4 rounded-lg border border-gray-200 bg-white space-y-4">
        <div>
          <label className="text-xs font-medium text-gray-500 mb-1 block">Export Type</label>
          <select
            value={exportType}
            onChange={(e) => setExportType(e.target.value)}
            className="px-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple bg-white"
          >
            {EXPORT_TYPES.map((t) => (
              <option key={t.value} value={t.value}>
                {t.label}
              </option>
            ))}
          </select>
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div>
            <label className="text-xs font-medium text-gray-500 mb-1 block">From Date</label>
            <input
              type="date"
              value={dateFrom}
              onChange={(e) => setDateFrom(e.target.value)}
              className="w-full px-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
            />
          </div>
          <div>
            <label className="text-xs font-medium text-gray-500 mb-1 block">To Date</label>
            <input
              type="date"
              value={dateTo}
              onChange={(e) => setDateTo(e.target.value)}
              className="w-full px-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
            />
          </div>
        </div>

        <button
          onClick={handleExport}
          disabled={exporting}
          className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-slack-purple text-white text-sm font-medium hover:bg-slack-darkpurple transition-colors disabled:opacity-50"
        >
          {exporting ? <RefreshCw size={14} className="animate-pulse" /> : <Download size={14} />}
          Start Export
        </button>
        {error && <p className="text-xs text-slack-red">{error}</p>}
      </div>

      {/* Recent exports */}
      {recentExports.length > 0 && (
        <div>
          <h3 className="text-sm font-semibold text-gray-700 mb-2">Recent Exports</h3>
          <div className="space-y-2">
            {recentExports.map((exp) => (
              <div
                key={exp.id}
                className="flex items-center justify-between p-3 rounded-lg border border-gray-200 bg-white"
              >
                <div className="flex items-center gap-3">
                  {getStatusIcon(exp.status)}
                  <div>
                    <p className="text-sm font-medium text-gray-800 capitalize">{exp.type}</p>
                    <p className="text-xs text-gray-400">
                      {exp.status} &middot; {exp.started_at ? new Date(exp.started_at).toLocaleString() : ""}
                    </p>
                  </div>
                </div>
                {exp.status === "completed" && exp.download_url && (
                  <a
                    href={exp.download_url}
                    className="flex items-center gap-1 px-3 py-1 rounded-md text-xs font-medium text-slack-purple hover:bg-slack-purple/5 transition-colors"
                  >
                    <Download size={12} />
                    Download
                  </a>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

export default DataExport;