"use client";

import { useEffect, useState } from "react";
import { getAnalytics, AnalyticsData } from "@/lib/api";
import { MessageSquare, Hash, Users, HardDrive } from "lucide-react";

export function AnalyticsTab(_props: { workspaceId?: string }) {
  const [data, setData] = useState<AnalyticsData | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getAnalytics()
      .then(setData)
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return (
      <div className="space-y-4">
        {[1, 2, 3, 4].map((i) => (
          <div key={i} className="h-24 bg-white rounded-lg shadow-sm border border-gray-200 animate-pulse" />
        ))}
      </div>
    );
  }

  if (!data) {
    return <div className="text-gray-400 text-sm">No data available.</div>;
  }

  const stats = [
    { label: "Total Messages", value: data.total_messages.toLocaleString(), icon: MessageSquare, color: "text-slack-purple" },
    { label: "Active Channels", value: data.active_channels.toLocaleString(), icon: Hash, color: "text-slack-blue" },
    { label: "Total Members", value: data.total_members.toLocaleString(), icon: Users, color: "text-slack-green" },
    { label: "Storage Used", value: `${data.storage_used_mb.toFixed(1)} MB`, icon: HardDrive, color: "text-slack-yellow" },
  ];

  // Build simple bar chart from messages_last_7_days
  const weekData = data.messages_last_7_days?.length === 7 ? data.messages_last_7_days : [0, 0, 0, 0, 0, 0, 0];
  const maxVal = Math.max(...weekData, 1);
  const dayLabels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

  return (
    <div className="space-y-6">
      {/* Stat cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {stats.map((stat) => {
          const Icon = stat.icon;
          return (
            <div key={stat.label} className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
              <div className="flex items-center gap-2 mb-2">
                <Icon size={20} className={stat.color} />
                <span className="text-xs font-semibold text-gray-500 uppercase">{stat.label}</span>
              </div>
              <p className="text-2xl font-bold text-gray-800">{stat.value}</p>
            </div>
          );
        })}
      </div>

      {/* Simple bar chart */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h3 className="font-bold text-gray-800 mb-4">Messages - Last 7 Days</h3>
        <div className="flex items-end justify-between gap-2 h-48">
          {weekData.map((val, i) => (
            <div key={i} className="flex-1 flex flex-col items-center gap-2">
              <div className="w-full flex flex-col items-center justify-end h-full">
                <span className="text-xs text-gray-500 mb-1">{val.toLocaleString()}</span>
                <div
                  className="w-full bg-slack-purple rounded-t-md transition-all"
                  style={{ height: `${(val / maxVal) * 100}%`, minHeight: val > 0 ? "4px" : "0" }}
                />
              </div>
              <span className="text-xs text-gray-400">{dayLabels[i]}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Messages by channel */}
      {data.messages_by_channel && data.messages_by_channel.length > 0 && (
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 className="font-bold text-gray-800 mb-4">Top Channels by Message Count</h3>
          <div className="space-y-2">
            {data.messages_by_channel.slice(0, 5).map((item) => {
              const maxCount = Math.max(...data.messages_by_channel!.map((c) => c.count), 1);
              return (
                <div key={item.channel} className="flex items-center gap-3">
                  <span className="text-sm text-gray-600 w-32 truncate">#{item.channel}</span>
                  <div className="flex-1 h-4 bg-gray-100 rounded-md overflow-hidden">
                    <div
                      className="h-full bg-slack-blue rounded-md"
                      style={{ width: `${(item.count / maxCount) * 100}%` }}
                    />
                  </div>
                  <span className="text-sm font-medium text-gray-700 w-12 text-right">{item.count}</span>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}