"use client";

import { useEffect, useState, useCallback } from "react";
import { signOut, useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import {
  SessionsLineChart,
  CategoriesBarChart,
  LanguagePieChart,
  TokenUsageChart,
} from "../../../components/Charts";
import { Company, MetricsResult, WordCloudWord } from "../../../lib/types";
import MetricCard from "../../../components/MetricCard";
import DonutChart from "../../../components/DonutChart";
import WordCloud from "../../../components/WordCloud";
import GeographicMap from "../../../components/GeographicMap";
import ResponseTimeDistribution from "../../../components/ResponseTimeDistribution";
import WelcomeBanner from "../../../components/WelcomeBanner";
import DateRangePicker from "../../../components/DateRangePicker";
import TopQuestionsChart from "../../../components/TopQuestionsChart";

// Safely wrapped component with useSession
function DashboardContent() {
  const { data: session, status } = useSession(); // Add status from useSession
  const router = useRouter(); // Initialize useRouter
  const [metrics, setMetrics] = useState<MetricsResult | null>(null);
  const [company, setCompany] = useState<Company | null>(null);
  const [, setLoading] = useState<boolean>(false);
  const [refreshing, setRefreshing] = useState<boolean>(false);
  const [dateRange, setDateRange] = useState<{ minDate: string; maxDate: string } | null>(null);
  const [selectedStartDate, setSelectedStartDate] = useState<string>("");
  const [selectedEndDate, setSelectedEndDate] = useState<string>("");

  const isAuditor = session?.user?.role === "auditor";

  // Function to fetch metrics with optional date range
  const fetchMetrics = useCallback(async (startDate?: string, endDate?: string) => {
    setLoading(true);
    try {
      let url = "/api/dashboard/metrics";
      if (startDate && endDate) {
        url += `?startDate=${startDate}&endDate=${endDate}`;
      }
      
      const res = await fetch(url);
      const data = await res.json();
      
      setMetrics(data.metrics);
      setCompany(data.company);
      
      // Set date range from API response (only on initial load)
      if (data.dateRange && !dateRange) {
        setDateRange(data.dateRange);
        setSelectedStartDate(data.dateRange.minDate);
        setSelectedEndDate(data.dateRange.maxDate);
      }
    } catch (error) {
      console.error("Error fetching metrics:", error);
    } finally {
      setLoading(false);
    }
  }, [dateRange]);

  // Handle date range changes
  const handleDateRangeChange = useCallback((startDate: string, endDate: string) => {
    setSelectedStartDate(startDate);
    setSelectedEndDate(endDate);
    fetchMetrics(startDate, endDate);
  }, [fetchMetrics]);

  useEffect(() => {
    // Redirect if not authenticated
    if (status === "unauthenticated") {
      router.push("/login");
      return; // Stop further execution in this effect
    }

    // Fetch metrics and company on mount if authenticated
    if (status === "authenticated") {
      fetchMetrics();
    }
  }, [status, router, fetchMetrics]); // Add fetchMetrics to dependency array

  async function handleRefresh() {
    if (isAuditor) return; // Prevent auditors from refreshing
    try {
      setRefreshing(true);

      // Make sure we have a company ID to send
      if (!company?.id) {
        setRefreshing(false);
        alert("Cannot refresh: Company ID is missing");
        return;
      }

      const res = await fetch("/api/admin/refresh-sessions", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ companyId: company.id }),
      });

      if (res.ok) {
        // Refetch metrics
        const metricsRes = await fetch("/api/dashboard/metrics");
        const data = await metricsRes.json();
        setMetrics(data.metrics);
      } else {
        const errorData = await res.json();
        alert(`Failed to refresh sessions: ${errorData.error}`);
      }
    } finally {
      setRefreshing(false);
    }
  }

  // Calculate sentiment distribution
  const getSentimentData = () => {
    if (!metrics) return { positive: 0, neutral: 0, negative: 0 };

    if (
      metrics.sentimentPositiveCount !== undefined &&
      metrics.sentimentNeutralCount !== undefined &&
      metrics.sentimentNegativeCount !== undefined
    ) {
      return {
        positive: metrics.sentimentPositiveCount,
        neutral: metrics.sentimentNeutralCount,
        negative: metrics.sentimentNegativeCount,
      };
    }

    const total = metrics.totalSessions || 1;
    return {
      positive: Math.round(total * 0.6),
      neutral: Math.round(total * 0.3),
      negative: Math.round(total * 0.1),
    };
  };

  // Prepare token usage data
  const getTokenData = () => {
    if (!metrics || !metrics.tokensByDay) {
      return { labels: [], values: [], costs: [] };
    }

    const days = Object.keys(metrics.tokensByDay).sort();
    const labels = days.slice(-7);
    const values = labels.map((day) => metrics.tokensByDay?.[day] || 0);
    const costs = labels.map((day) => metrics.tokensCostByDay?.[day] || 0);

    return { labels, values, costs };
  };

  // Show loading state while session status is being determined
  if (status === "loading") {
    return <div className="text-center py-10">Loading session...</div>;
  }

  // If unauthenticated and not redirected yet (should be handled by useEffect, but as a fallback)
  if (status === "unauthenticated") {
    return <div className="text-center py-10">Redirecting to login...</div>;
  }

  if (!metrics || !company) {
    return <div className="text-center py-10">Loading dashboard...</div>;
  }

  // Function to prepare word cloud data from metrics.wordCloudData
  const getWordCloudData = (): WordCloudWord[] => {
    if (!metrics || !metrics.wordCloudData) return [];
    return metrics.wordCloudData;
  };

  // Function to prepare country data for the map using actual metrics
  const getCountryData = () => {
    if (!metrics || !metrics.countries) return {};

    // Convert the countries object from metrics to the format expected by GeographicMap
    const result = Object.entries(metrics.countries).reduce(
      (acc, [code, count]) => {
        if (code && count) {
          acc[code] = count;
        }
        return acc;
      },
      {} as Record<string, number>
    );

    return result;
  };

  // Function to prepare response time distribution data
  const getResponseTimeData = () => {
    const avgTime = metrics.avgResponseTime || 1.5;
    const simulatedData: number[] = [];

    for (let i = 0; i < 50; i++) {
      const randomFactor = 0.5 + Math.random();
      simulatedData.push(avgTime * randomFactor);
    }

    return simulatedData;
  };

  return (
    <div className="space-y-8">
      <WelcomeBanner companyName={company.name} />
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center bg-white p-6 rounded-2xl shadow-lg ring-1 ring-slate-200/50">
        <div>
          <h1 className="text-3xl font-bold text-slate-800">{company.name}</h1>
          <p className="text-slate-500 mt-1">
            Dashboard updated{" "}
            <span className="font-medium text-slate-600">
              {new Date(metrics.lastUpdated || Date.now()).toLocaleString()}
            </span>
          </p>
        </div>
        <div className="flex items-center gap-3 mt-4 sm:mt-0">
          <button
            className="bg-sky-600 text-white py-2 px-5 rounded-lg shadow hover:bg-sky-700 transition-colors disabled:opacity-60 disabled:cursor-not-allowed flex items-center text-sm font-medium"
            onClick={handleRefresh}
            disabled={refreshing || isAuditor}
          >
            {refreshing ? (
              <>
                <svg
                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                >
                  <circle
                    className="opacity-25"
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    strokeWidth="4"
                  ></circle>
                  <path
                    className="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                  ></path>
                </svg>
                Refreshing...
              </>
            ) : (
              "Refresh Data"
            )}
          </button>
          <button
            className="bg-slate-100 text-slate-700 py-2 px-5 rounded-lg shadow hover:bg-slate-200 transition-colors flex items-center text-sm font-medium"
            onClick={() => signOut({ callbackUrl: "/login" })}
          >
            Sign out
          </button>
        </div>
      </div>
      
      {/* Date Range Picker */}
      {dateRange && (
        <DateRangePicker
          minDate={dateRange.minDate}
          maxDate={dateRange.maxDate}
          onDateRangeChange={handleDateRangeChange}
          initialStartDate={selectedStartDate}
          initialEndDate={selectedEndDate}
        />
      )}
      
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-7 gap-4">
        <MetricCard
          title="Total Sessions"
          value={metrics.totalSessions}
          icon={
            <svg
              className="h-5 w-5"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth="1"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"
              />
            </svg>
          }
          trend={{
            value: metrics.sessionTrend ?? 0,
            isPositive: (metrics.sessionTrend ?? 0) >= 0,
          }}
        />
        <MetricCard
          title="Unique Users"
          value={metrics.uniqueUsers}
          icon={
            <svg
              className="h-5 w-5"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth="1"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
              />
            </svg>
          }
          trend={{
            value: metrics.usersTrend ?? 0,
            isPositive: (metrics.usersTrend ?? 0) >= 0,
          }}
        />
        <MetricCard
          title="Avg. Session Time"
          value={`${Math.round(metrics.avgSessionLength || 0)}s`}
          icon={
            <svg
              className="h-5 w-5"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth="1"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          }
          trend={{
            value: metrics.avgSessionTimeTrend ?? 0,
            isPositive: (metrics.avgSessionTimeTrend ?? 0) >= 0,
          }}
        />
        <MetricCard
          title="Avg. Response Time"
          value={`${metrics.avgResponseTime?.toFixed(1) || 0}s`}
          icon={
            <svg
              className="h-5 w-5"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth="1"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M13 10V3L4 14h7v7l9-11h-7z"
              />
            </svg>
          }
          trend={{
            value: metrics.avgResponseTimeTrend ?? 0,
            isPositive: (metrics.avgResponseTimeTrend ?? 0) <= 0, // Lower response time is better
          }}
        />
        <MetricCard
          title="Avg. Daily Costs"
          value={`€${metrics.avgDailyCosts?.toFixed(4) || '0.0000'}`}
          icon={
            <svg
              className="h-5 w-5"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth="1"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          }
        />
        <MetricCard
          title="Peak Usage Time"
          value={metrics.peakUsageTime || 'N/A'}
          icon={
            <svg
              className="h-5 w-5"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth="1"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
              />
            </svg>
          }
        />
        <MetricCard
          title="Resolved Chats"
          value={`${metrics.resolvedChatsPercentage?.toFixed(1) || '0.0'}%`}
          icon={
            <svg
              className="h-5 w-5"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth="1"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          }
          trend={{
            value: metrics.resolvedChatsPercentage ?? 0,
            isPositive: (metrics.resolvedChatsPercentage ?? 0) >= 80, // 80%+ resolution rate is good
          }}
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="bg-white p-6 rounded-xl shadow lg:col-span-2">
          <h3 className="font-bold text-lg text-gray-800 mb-4">
            Sessions Over Time
          </h3>
          <SessionsLineChart sessionsPerDay={metrics.days} />
        </div>
        <div className="bg-white p-6 rounded-xl shadow">
          <h3 className="font-bold text-lg text-gray-800 mb-4">
            Conversation Sentiment
          </h3>
          <DonutChart
            data={{
              labels: ["Positive", "Neutral", "Negative"],
              values: [
                getSentimentData().positive,
                getSentimentData().neutral,
                getSentimentData().negative,
              ],
              colors: ["#1cad7c", "#a1a1a1", "#dc2626"],
            }}
            centerText={{
              title: "Total",
              value: metrics.totalSessions,
            }}
          />
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white p-6 rounded-xl shadow">
          <h3 className="font-bold text-lg text-gray-800 mb-4">
            Sessions by Category
          </h3>
          <CategoriesBarChart categories={metrics.categories || {}} />
        </div>
        <div className="bg-white p-6 rounded-xl shadow">
          <h3 className="font-bold text-lg text-gray-800 mb-4">
            Languages Used
          </h3>
          <LanguagePieChart languages={metrics.languages || {}} />
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white p-6 rounded-xl shadow">
          <h3 className="font-bold text-lg text-gray-800 mb-4">
            Geographic Distribution
          </h3>
          <GeographicMap countries={getCountryData()} />
        </div>

        <div className="bg-white p-6 rounded-xl shadow">
          <h3 className="font-bold text-lg text-gray-800 mb-4">
            Common Topics
          </h3>
          <div className="h-[300px]">
            <WordCloud words={getWordCloudData()} width={500} height={400} />
          </div>
        </div>
      </div>

      {/* Top Questions Chart */}
      <TopQuestionsChart data={metrics.topQuestions || []} />

      <div className="bg-white p-6 rounded-xl shadow">
        <h3 className="font-bold text-lg text-gray-800 mb-4">
          Response Time Distribution
        </h3>
        <ResponseTimeDistribution
          data={getResponseTimeData()}
          average={metrics.avgResponseTime || 0}
        />
      </div>
      <div className="bg-white p-6 rounded-xl shadow">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4">
          <h3 className="font-bold text-lg text-gray-800">
            Token Usage & Costs
          </h3>
          <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 w-full sm:w-auto">
            <div className="text-sm bg-blue-50 text-blue-700 px-3 py-1 rounded-full flex items-center">
              <span className="font-semibold mr-1">Total Tokens:</span>
              {metrics.totalTokens?.toLocaleString() || 0}
            </div>
            <div className="text-sm bg-green-50 text-green-700 px-3 py-1 rounded-full flex items-center">
              <span className="font-semibold mr-1">Total Cost:</span>€
              {metrics.totalTokensEur?.toFixed(4) || 0}
            </div>
          </div>
        </div>
        <TokenUsageChart tokenData={getTokenData()} />
      </div>
    </div>
  );
}

// Our exported component
export default function DashboardPage() {
  return <DashboardContent />;
}