import React from 'react';
import {
  LineChart,
  Line,
  AreaChart,
  Area,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer
} from 'recharts';
import { AnalyticsData } from '../services/api';

interface AnalyticsChartsProps {
  data: AnalyticsData;
  loading?: boolean;
}

const AnalyticsCharts: React.FC<AnalyticsChartsProps> = ({ data, loading = false }) => {
  if (loading) {
    return (
      <div className="space-y-6">
        {/* First Row Loading */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {[1, 2].map((i) => (
            <div key={i} className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
              <div className="animate-pulse">
                <div className="h-4 bg-gray-200 rounded w-1/3 mb-4"></div>
                <div className="h-64 bg-gray-200 rounded"></div>
              </div>
            </div>
          ))}
        </div>
        {/* Second Row Loading */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {[3, 4].map((i) => (
            <div key={i} className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
              <div className="animate-pulse">
                <div className="h-4 bg-gray-200 rounded w-1/3 mb-4"></div>
                <div className="h-64 bg-gray-200 rounded"></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  // Format data for charts
  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('en-US', { 
      month: 'short', 
      day: 'numeric' 
    });
  };

  const userActivityData = data.userActivityChart.map(item => ({
    ...item,
    date: formatDate(item.date)
  }));

  const conversationData = data.conversationChart.map(item => ({
    ...item,
    date: formatDate(item.date)
  }));

  const messageData = data.messageChart.map(item => ({
    ...item,
    date: formatDate(item.date)
  }));

  const securityData = data.securityChart.map(item => ({
    ...item,
    date: formatDate(item.date)
  }));

  return (
    <div className="space-y-6">
      {/* First Row: User Activity and Conversation Charts */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* User Activity Chart */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-gray-900">User Activity</h3>
            <span className="text-sm text-gray-500">Last {data.period}</span>
          </div>
          <ResponsiveContainer width="100%" height={300}>
            <AreaChart data={userActivityData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Area
                type="monotone"
                dataKey="new_users"
                stackId="1"
                stroke="#3B82F6"
                fill="#3B82F6"
                fillOpacity={0.6}
                name="New Users"
              />
              <Area
                type="monotone"
                dataKey="online_users"
                stackId="2"
                stroke="#10B981"
                fill="#10B981"
                fillOpacity={0.6}
                name="Online Users"
              />
            </AreaChart>
          </ResponsiveContainer>
        </div>

        {/* Conversation Chart */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-gray-900">Conversations</h3>
            <span className="text-sm text-gray-500">Last {data.period}</span>
          </div>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={conversationData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="new_conversations" fill="#3B82F6" name="New Conversations" />
              <Bar dataKey="direct_conversations" fill="#10B981" name="Direct" />
              <Bar dataKey="group_conversations" fill="#F59E0B" name="Group" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Second Row: Message and Security Charts */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Message Chart */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-gray-900">Messages</h3>
            <span className="text-sm text-gray-500">Last {data.period}</span>
          </div>
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={messageData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Line
                type="monotone"
                dataKey="total_messages"
                stroke="#3B82F6"
                strokeWidth={2}
                name="Total Messages"
              />
              <Line
                type="monotone"
                dataKey="text_messages"
                stroke="#10B981"
                strokeWidth={2}
                name="Text Messages"
              />
              <Line
                type="monotone"
                dataKey="system_messages"
                stroke="#F59E0B"
                strokeWidth={2}
                name="System Messages"
              />
              <Line
                type="monotone"
                dataKey="unique_senders"
                stroke="#EF4444"
                strokeWidth={2}
                name="Unique Senders"
              />
            </LineChart>
          </ResponsiveContainer>
        </div>

        {/* Security Chart */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-gray-900">Security Activities</h3>
            <span className="text-sm text-gray-500">Last {data.period}</span>
          </div>
          <ResponsiveContainer width="100%" height={300}>
            <AreaChart data={securityData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Area
                type="monotone"
                dataKey="total_activities"
                stackId="1"
                stroke="#EF4444"
                fill="#EF4444"
                fillOpacity={0.6}
                name="Total Activities"
              />
              <Area
                type="monotone"
                dataKey="login_activities"
                stackId="2"
                stroke="#F59E0B"
                fill="#F59E0B"
                fillOpacity={0.6}
                name="Login Activities"
              />
              <Area
                type="monotone"
                dataKey="password_activities"
                stackId="3"
                stroke="#8B5CF6"
                fill="#8B5CF6"
                fillOpacity={0.6}
                name="Password Activities"
              />
              <Area
                type="monotone"
                dataKey="delete_activities"
                stackId="4"
                stroke="#6B7280"
                fill="#6B7280"
                fillOpacity={0.6}
                name="Delete Activities"
              />
            </AreaChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  );
};

export default AnalyticsCharts;