"use client";

import { useState, useEffect } from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { useToast } from "@/hooks/use-toast";
import { RefreshCw } from "lucide-react";
import {
  getGrowthAnalyticsWithStore,
  type GrowthAnalytics,
} from "@/lib/services/analytics-service";
import {
  ComposedChart,
  Bar,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";

interface GrowthAnalyticsChartProps {
  hideNumbers?: boolean;
}

export default function GrowthAnalyticsChart({
  hideNumbers = false,
}: GrowthAnalyticsChartProps) {
  const [growthData, setGrowthData] = useState<GrowthAnalytics | null>(null);
  const [growthLoading, setGrowthLoading] = useState(true);
  const { toast } = useToast();

  const fetchGrowthData = async () => {
    try {
      setGrowthLoading(true);
      const response = await getGrowthAnalyticsWithStore();
      setGrowthData(response);
    } catch (err) {
      console.error("Error fetching growth data:", err);
      toast({
        title: "Error",
        description: "Failed to load growth analytics data.",
        variant: "destructive",
      });
    } finally {
      setGrowthLoading(false);
    }
  };

  useEffect(() => {
    fetchGrowthData();
  }, []);

  const handleGrowthRefresh = () => {
    fetchGrowthData();
  };

  const formatCurrency = (value: number) => {
    if (hideNumbers) return "£***";
    return new Intl.NumberFormat("en-GB", {
      style: "currency",
      currency: "GBP",
      maximumFractionDigits: 0,
    }).format(value);
  };

  return (
    <div className="space-y-6">
      {/* Growth Header */}
      <div className="flex justify-between items-center">
        <div>
          <h3 className="text-lg font-semibold">Growth Since First Sale</h3>
          <p className="text-sm text-muted-foreground">
            {growthData?.launchDate
              ? `Tracking since ${new Date(growthData.launchDate).toLocaleDateString("en-GB", { month: "long", year: "numeric" })}`
              : "Loading..."}
            {growthData?.generatedAt && (
              <span className="ml-2">
                - Last updated:{" "}
                {new Date(growthData.generatedAt).toLocaleTimeString("en-GB", {
                  hour: "2-digit",
                  minute: "2-digit",
                })}
              </span>
            )}
          </p>
        </div>
        <Button
          variant="outline"
          size="sm"
          onClick={handleGrowthRefresh}
          disabled={growthLoading}
        >
          <RefreshCw
            className={`h-4 w-4 mr-2 ${growthLoading ? "animate-spin" : ""}`}
          />
          Refresh
        </Button>
      </div>

      {/* Cumulative Stats Cards */}
      {growthData?.cumulative && (
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
          <Card>
            <CardContent className="pt-4">
              <div className="text-sm font-medium text-muted-foreground">
                Total Orders
              </div>
              <div className="text-2xl font-bold">
                {hideNumbers
                  ? "***"
                  : growthData.cumulative.orders.toLocaleString()}
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="pt-4">
              <div className="text-sm font-medium text-muted-foreground">
                Total Revenue
              </div>
              <div className="text-2xl font-bold text-green-600">
                {formatCurrency(growthData.cumulative.revenue)}
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="pt-4">
              <div className="text-sm font-medium text-muted-foreground">
                Customers
              </div>
              <div className="text-2xl font-bold">
                {hideNumbers
                  ? "***"
                  : growthData.cumulative.customers.toLocaleString()}
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="pt-4">
              <div className="text-sm font-medium text-muted-foreground">
                Products
              </div>
              <div className="text-2xl font-bold">
                {hideNumbers
                  ? "***"
                  : growthData.cumulative.products.toLocaleString()}
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="pt-4">
              <div className="text-sm font-medium text-muted-foreground">
                Avg Order Value
              </div>
              <div className="text-2xl font-bold">
                {formatCurrency(growthData.cumulative.avgOrderValue)}
              </div>
            </CardContent>
          </Card>
        </div>
      )}

      {/* Monthly Revenue & Orders Chart */}
      <Card>
        <CardHeader>
          <CardTitle>Monthly Revenue & Orders</CardTitle>
          <CardDescription>
            Store performance by month since first sale
          </CardDescription>
        </CardHeader>
        <CardContent>
          {growthLoading ? (
            <div className="flex items-center justify-center h-80">
              <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div>
            </div>
          ) : growthData?.monthly && growthData.monthly.length > 0 ? (
            <div className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <ComposedChart
                  data={growthData.monthly.map((m) => ({
                    ...m,
                    formattedMonth: new Date(
                      m.month + "-01",
                    ).toLocaleDateString("en-GB", {
                      month: "short",
                      year: "2-digit",
                    }),
                  }))}
                  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="formattedMonth" tick={{ fontSize: 12 }} />
                  <YAxis yAxisId="left" tick={{ fontSize: 12 }} />
                  <YAxis
                    yAxisId="right"
                    orientation="right"
                    tick={{ fontSize: 12 }}
                    tickFormatter={(value) =>
                      hideNumbers ? "***" : `£${(value / 1000).toFixed(0)}k`
                    }
                  />
                  <Tooltip
                    content={({ active, payload }) => {
                      if (active && payload?.length) {
                        const data = payload[0].payload;
                        return (
                          <div className="bg-background border border-border p-3 rounded-lg shadow-lg">
                            <p className="font-medium mb-2">{data.month}</p>
                            <p className="text-sm text-blue-600">
                              Orders:{" "}
                              {hideNumbers
                                ? "***"
                                : data.orders.toLocaleString()}
                            </p>
                            <p className="text-sm text-green-600">
                              Revenue: {formatCurrency(data.revenue)}
                            </p>
                            <p className="text-sm text-purple-600">
                              Customers:{" "}
                              {hideNumbers
                                ? "***"
                                : data.customers.toLocaleString()}
                            </p>
                            {data.newCustomers !== undefined && (
                              <p className="text-sm text-cyan-600">
                                New Customers:{" "}
                                {hideNumbers ? "***" : data.newCustomers}
                              </p>
                            )}
                          </div>
                        );
                      }
                      return null;
                    }}
                  />
                  <Bar
                    yAxisId="left"
                    dataKey="orders"
                    fill="#3b82f6"
                    radius={[4, 4, 0, 0]}
                    name="Orders"
                  />
                  <Line
                    yAxisId="right"
                    type="monotone"
                    dataKey="revenue"
                    stroke="#10b981"
                    strokeWidth={3}
                    dot={{ fill: "#10b981", r: 4 }}
                    name="Revenue"
                  />
                </ComposedChart>
              </ResponsiveContainer>
            </div>
          ) : (
            <div className="flex items-center justify-center h-80 text-muted-foreground">
              No growth data available
            </div>
          )}
        </CardContent>
      </Card>

      {/* Monthly Growth Table */}
      {growthData?.monthly && growthData.monthly.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Monthly Breakdown</CardTitle>
            <CardDescription>Detailed metrics by month</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b">
                    <th className="text-left p-2 font-medium">Month</th>
                    <th className="text-right p-2 font-medium">Orders</th>
                    <th className="text-right p-2 font-medium">Revenue</th>
                    <th className="text-right p-2 font-medium">Customers</th>
                    <th className="text-right p-2 font-medium">Avg Order</th>
                    <th className="text-right p-2 font-medium">
                      New Customers
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {growthData.monthly.map((month) => (
                    <tr
                      key={month.month}
                      className="border-b hover:bg-muted/50"
                    >
                      <td className="p-2 font-medium">
                        {new Date(month.month + "-01").toLocaleDateString(
                          "en-GB",
                          { month: "long", year: "numeric" },
                        )}
                      </td>
                      <td className="text-right p-2">
                        {hideNumbers ? "***" : month.orders.toLocaleString()}
                      </td>
                      <td className="text-right p-2 text-green-600">
                        {formatCurrency(month.revenue)}
                      </td>
                      <td className="text-right p-2">
                        {hideNumbers ? "***" : month.customers.toLocaleString()}
                      </td>
                      <td className="text-right p-2">
                        {formatCurrency(month.avgOrderValue)}
                      </td>
                      <td className="text-right p-2">
                        {hideNumbers ? "***" : (month.newCustomers ?? 0)}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}