"use client";

import React, { useState, useEffect } from "react";
import {
  PieChart,
  Pie,
  Cell,
  ResponsiveContainer,
  Tooltip,
} from "recharts";
import IconPhoneCall from "../../components/Icon/IconPhoneCall";
import IconListCheck from "../../components/Icon/IconListCheck";
import IconCircleCheck from "../../components/Icon/IconCircleCheck";
import IconInfoCircle from "../../components/Icon/IconInfoCircle";
import IconCalendar from "../../components/Icon/IconCalendar";
import IconTrendingUp from "../../components/Icon/IconTrendingUp";
import api from "../../api/axios";
import {
  SkeletonCard,
  SkeletonChart,
  SkeletonTable,
} from "../../components/Skeleton/Skeleton";

const COLORS = ["#ec4899", "#3b82f6", "#10b981", "#8b5cf6", "#f59e0b", "#ef4444", "#6366f1", "#14b8a6"];

interface MarketingProps {
  selectedMonth: Date;
}

export default function Marketing({ selectedMonth }: MarketingProps) {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchDashboardData();
  }, [selectedMonth]);

  const fetchDashboardData = async () => {
    setLoading(true);
    setError(null);
    try {
      const year = selectedMonth.getFullYear();
      const month = selectedMonth.getMonth() + 1;

      const response = await api.get("/dashboard/marketing", {
        params: { year, month },
      });

      if (response.data.success) {
        setData(response.data.data);
      } else {
        setError("Failed to fetch dashboard data");
      }
    } catch (err: any) {
      setError(err.response?.data?.message || "Error loading dashboard");
      console.error("Dashboard fetch error:", err);
    } finally {
      setLoading(false);
    }
  };

  const formatGrowth = (growth: number) => {
    if (growth === 0) return "0%";
    return growth >= 0 ? `+${growth}%` : `${growth}%`;
  };

  const getGrowthColor = (growth: number) => {
    return growth >= 0 ? "text-green-600 bg-green-100" : "text-red-600 bg-red-100";
  };

  const getStatusStyle = (status: string) => {
    switch (status?.toLowerCase()) {
      case "completed":
        return "bg-emerald-100 text-emerald-600";
      case "in progress":
        return "bg-blue-100 text-blue-600";
      case "upcoming":
        return "bg-purple-100 text-purple-600";
      case "pending":
        return "bg-gray-100 text-gray-500";
      default:
        return "bg-gray-100 text-gray-500";
    }
  };

  const getPriorityStyle = (priority: string) => {
    switch (priority?.toLowerCase()) {
      case "high":
        return "bg-red-100 text-red-600";
      case "medium":
        return "bg-yellow-100 text-yellow-600";
      case "low":
        return "bg-emerald-100 text-emerald-600";
      default:
        return "bg-gray-100 text-gray-600";
    }
  };

  if (error) {
    return (
      <div className="flex items-center justify-center p-8">
        <div className="text-center">
          <p className="text-red-500 mb-2">⚠️ {error}</p>
          <button
            onClick={fetchDashboardData}
            className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark"
          >
            Retry
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-3">
      {/* Acquisition Channels & Funnel */}
      <div className="grid grid-cols-2 gap-4">
        {/* Pie Chart - Lead Sources */}
        <div className="bg-white rounded-xl p-5 shadow">
          {loading ? (
            <SkeletonChart />
          ) : (
            <>
              <div className="flex flex-col mb-4">
                <h3 className="font-semibold text-sm">Acquisition Channels</h3>
                <span className="text-xs text-gray-400 font-medium">
                  Breakdown of sourcing channels active in lead generation
                </span>
              </div>
              <div className="h-[220px]">
                {data?.lead_sources?.length > 0 ? (
                  <ResponsiveContainer>
                    <PieChart>
                      <Pie
                        data={data.lead_sources}
                        innerRadius={60}
                        outerRadius={90}
                        paddingAngle={3}
                        dataKey="value"
                      >
                        {data.lead_sources.map((entry: any, index: number) => (
                          <Cell
                            key={index}
                            fill={entry.color || COLORS[index % COLORS.length]}
                          />
                        ))}
                      </Pie>
                      <Tooltip />
                    </PieChart>
                  </ResponsiveContainer>
                ) : (
                  <div className="flex items-center justify-center h-full text-gray-400">
                    No lead source data available
                  </div>
                )}
              </div>
              <div className="flex justify-center gap-4 text-xs mt-3 flex-wrap">
                {data?.lead_sources?.map((item: any, i: number) => (
                  <span key={i} className="flex items-center gap-1">
                    <span
                      className="w-2 h-2 rounded-full"
                      style={{ background: item.color || COLORS[i % COLORS.length] }}
                    />
                    {item.name} ({item.value})
                  </span>
                ))}
              </div>
            </>
          )}
        </div>

        {/* Funnel Chart */}
        <div className="bg-white rounded-xl p-5 shadow">
          {loading ? (
            <SkeletonChart />
          ) : (
            <>
              <div className="flex flex-col mb-4">
                <h3 className="font-semibold text-sm">
                  Prospect-To-Enrollee Funnel Efficiency
                </h3>
                <span className="text-xs text-gray-400 font-medium">
                  Monitoring step-by-step cohort yields and drop-off barriers
                </span>
              </div>
              <div className="space-y-4">
                {data?.funnel_data?.map((item: any, i: number) => (
                  <div key={i} className="bg-gray-100 rounded p-2">
                    <div className="flex justify-between text-xs mb-1">
                      <div className="flex items-center justify-start gap-2 text-sm font-semibold">
                        <span className={`w-2 h-2 rounded-full ${item.color}`} />
                        <span>{item.label}</span>
                      </div>
                      <div className="flex justify-end gap-2 text-sm font-semibold">
                        <span>{item.count} Persons</span>
                        <span className="text-primary">{item.value}%</span>
                      </div>
                    </div>
                    <div className="w-full h-2 bg-gray-200 rounded overflow-hidden">
                      <div
                        className={`${item.color} h-2`}
                        style={{ width: `${item.value}%` }}
                      />
                    </div>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>
      </div>

      {/* Marketing Events Table */}
      <div className="bg-white rounded-xl p-5 shadow">
        {loading ? (
          <SkeletonTable />
        ) : (
          <>
            <div className="flex justify-between mb-4">
              <div className="flex flex-col">
                <h3 className="font-semibold text-sm">
                  Sourced Marketing Events Tracker
                </h3>
                <span className="text-xs text-gray-400 font-medium">
                  Schedules, leads yields, and academic conversion ratings
                </span>
              </div>
              <div>
                <span className="text-xs bg-pink-100 text-pink-600 px-2 py-1 rounded-full">
                  {data?.total_marketing_events || 0} TOTAL CAMPAIGNS
                </span>
              </div>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead className="text-gray-400 text-xs uppercase">
                  <tr>
                    <th className="text-left py-2">Event Details</th>
                    <th>Venue/ Channel</th>
                    <th>Campaign Type</th>
                    <th>Sourcing Status</th>
                    <th>Lead Sourced</th>
                    <th>Yield Conversion</th>
                  </tr>
                </thead>
                <tbody className="text-gray-700">
                  {data?.marketing_list?.length > 0 ? (
                    data.marketing_list.map((item: any, i: number) => (
                      <tr key={i} className="border-t">
                        <td className="py-3">
                          <p className="font-bold">{item.name}</p>
                          <p className="text-xs text-gray-400">{item.date}</p>
                        </td>
                        <td className="text-center">{item.venue}</td>
                        <td className="text-center">
                          <span className="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-600">
                            {item.type}
                          </span>
                        </td>
                        <td className="text-center">
                          <span className={`px-2 py-1 text-xs rounded-full ${getStatusStyle(item.status)}`}>
                            {item.status}
                          </span>
                        </td>
                        <td className="text-center font-bold">{item.target_leads}</td>
                        <td className="text-center font-semibold">
                          {item.status === "Completed" || item.status === "In Progress" ? (
                            <span className="text-purple-600">
                              {item.conversion ? `${item.conversion}%` : 'Pending'}
                            </span>
                          ) : (
                            <span className="text-purple-600">Pending</span>
                          )}
                        </td>
                      </tr>
                    ))
                  ) : (
                    <tr>
                      <td colSpan={8} className="text-center py-4 text-gray-500">
                        No marketing events found for this month
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </>
        )}
      </div>

      {/* Reminders Section */}
      <div className="bg-white rounded-xl p-5 shadow">
        {loading ? (
          <div className="space-y-4">
            <div className="flex justify-between mb-4">
              <div className="h-4 bg-gray-200 rounded w-1/3 animate-pulse"></div>
            </div>
            <div className="grid grid-cols-4 gap-4">
              {[...Array(4)].map((_, i) => (
                <SkeletonCard key={i} />
              ))}
            </div>
          </div>
        ) : (
          <>
            <div className="flex justify-between mb-4">
              <div className="flex flex-col">
                <h3 className="font-semibold text-sm">
                  Counseling Followups & Reminders
                </h3>
                <span className="text-xs text-gray-400 font-medium">
                  High-priority outbound touches assigned to admissions representatives
                </span>
              </div>
              <div className="flex gap-2 justify-end text-xs mb-4">
                <div className="flex gap-2 text-xs justify-start bg-gray-100 px-2 py-1 rounded-full border border-gray-300">
                  <span>Pending</span>
                  <span>:</span>
                  <span>{data?.reminders?.cards?.pending?.current || 0}</span>
                </div>
                <div className="flex gap-2 text-xs justify-start bg-emerald-100 px-2 py-1 rounded-full border border-emerald-300">
                  <span>Done</span>
                  <span>:</span>
                  <span>{data?.reminders?.cards?.completed?.current || 0}</span>
                </div>
              </div>
            </div>
            <div className="grid grid-cols-4 gap-4">
              {[
                {
                  title: "TOTAL FOLLOW-UPS",
                  value: data?.reminders?.cards?.total?.current || 0,
                  sub: "All follow-ups logged",
                  color: "text-blue-600",
                  icon: <IconListCheck />,
                  iconBg: "bg-blue-100 text-blue-600",
                  growth: formatGrowth(data?.reminders?.cards?.total?.growth || 0),
                },
                {
                  title: "COMPLETED FOLLOW-UPS",
                  value: data?.reminders?.cards?.completed?.current || 0,
                  sub: "Successfully closed",
                  color: "text-emerald-600",
                  icon: <IconCircleCheck />,
                  iconBg: "bg-emerald-100 text-emerald-600",
                  growth: formatGrowth(data?.reminders?.cards?.completed?.growth || 0),
                },
                {
                  title: "PENDING / OVERDUE",
                  value: data?.reminders?.cards?.pending?.current || 0,
                  sub: "Requires immediate action",
                  color: "text-red-600",
                  icon: <IconInfoCircle />,
                  iconBg: "bg-red-100 text-red-600",
                  growth: formatGrowth(data?.reminders?.cards?.pending?.growth || 0),
                },
                {
                  title: "SCHEDULED FOLLOW-UPS",
                  value: data?.reminders?.cards?.scheduled?.current || 0,
                  sub: "Upcoming follow-ups",
                  color: "text-purple-600",
                  icon: <IconCalendar />,
                  iconBg: "bg-purple-100 text-purple-600",
                  growth: formatGrowth(data?.reminders?.cards?.scheduled?.growth || 0),
                },
              ].map((card, i) => (
                <div
                  key={i}
                  className="bg-white p-4 rounded-lg shadow-sm border flex flex-col gap-3"
                >
                  <div className="flex justify-between items-center">
                    <div className={`p-2 rounded-lg ${card.iconBg}`}>
                      <div className="text-lg">{card.icon}</div>
                    </div>
                    <div className={`flex items-center gap-1 text-xs px-2 py-1 rounded-full ${getGrowthColor(
                        (Object.values(data?.reminders?.cards || {}) as { growth: number }[])[i]?.growth ?? 0
                        )}`}>
                      <IconTrendingUp className="text-xs" />
                      {card.growth}
                    </div>
                  </div>
                  <div>
                    <p className="text-xs text-gray-600 font-semibold">
                      {card.title}
                    </p>
                    <h3 className={`text-xl font-bold ${card.color}`}>
                      {card.value}
                    </h3>
                    <p className="text-xs text-gray-500">{card.sub}</p>
                  </div>
                </div>
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  );
}