import React, { useEffect, useState, lazy, Suspense } from "react";
import { Link } from "react-router";
import PageMeta from "../../components/common/PageMeta";
import CreditBalanceWidget from "../../components/dashboard/CreditBalanceWidget";
import UsageChartWidget from "../../components/dashboard/UsageChartWidget";
import EnhancedMetricCard from "../../components/dashboard/EnhancedMetricCard";
import ComponentCard from "../../components/common/ComponentCard";
import PageHeader from "../../components/common/PageHeader";
import { Card } from "../../components/ui/card";
import { ProgressBar } from "../../components/ui/progress";
import { ApexOptions } from "apexcharts";
import { 
  ListIcon, 
  FileIcon,
  FileTextIcon,
  BoltIcon,
  GroupIcon,
  CheckCircleIcon,
  ArrowRightIcon,
  PlugInIcon,
  PencilIcon,
  UserIcon,
  PieChartIcon,
  ClockIcon,
  PaperPlaneIcon,
} from "../../icons";
import { 
  fetchKeywords, 
  fetchClusters, 
  fetchContentIdeas,
  fetchTasks,
  fetchContent,
  fetchContentImages
} from "../../services/api";
import { useSiteStore } from "../../store/siteStore";
import { useSectorStore } from "../../store/sectorStore";
import { useToast } from "../../components/ui/toast/ToastContainer";

const Chart = lazy(() => import("react-apexcharts").then((mod) => ({ default: mod.default })));

interface AppInsights {
  totalKeywords: number;
  totalClusters: number;
  totalIdeas: number;
  totalTasks: number;
  totalContent: number;
  totalImages: number;
  publishedContent: number;
  workflowCompletionRate: number;
  contentThisWeek: number;
  contentThisMonth: number;
  automationEnabled: boolean;
}

const workflowSteps = [
  {
    id: 1,
    title: "Discover Keywords",
    description: "Find high-volume keywords from our global database",
    icon: <ListIcon />,
    color: "blue",
    path: "/planner/keyword-opportunities"
  },
  {
    id: 2,
    title: "Cluster Keywords",
    description: "Group related keywords into strategic clusters",
    icon: <GroupIcon />,
    color: "purple",
    path: "/planner/clusters"
  },
  {
    id: 3,
    title: "Generate Ideas",
    description: "AI creates content ideas from keyword clusters",
    icon: <BoltIcon />,
    color: "orange",
    path: "/planner/ideas"
  },
  {
    id: 4,
    title: "Create Tasks",
    description: "Convert ideas into actionable writing tasks",
    icon: <CheckCircleIcon />,
    color: "indigo",
    path: "/writer/tasks"
  },
  {
    id: 5,
    title: "Write Content",
    description: "AI generates full content pieces automatically",
    icon: <FileTextIcon />,
    color: "green",
    path: "/writer/content"
  },
  {
    id: 6,
    title: "Generate Images",
    description: "Create featured and in-article images",
    icon: <FileIcon />,
    color: "pink",
    path: "/writer/images"
  },
  {
    id: 7,
    title: "Publish",
    description: "Content ready for publication",
    icon: <CheckCircleIcon />,
    color: "success",
    path: "/writer/published"
  }
];

export default function Home() {
  const toast = useToast();
  const { activeSite } = useSiteStore();
  const { activeSector } = useSectorStore();
  
  const [insights, setInsights] = useState<AppInsights | null>(null);
  const [loading, setLoading] = useState(true);
  const [lastUpdated, setLastUpdated] = useState<Date>(new Date());

  const appModules = [
    {
      title: "Planner",
      description: "Keyword research, clustering, and content planning",
      icon: PieChartIcon,
      color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
      path: "/planner",
      count: insights?.totalClusters || 0,
      status: "active",
      metric: `${insights?.totalKeywords || 0} keywords`,
    },
    {
      title: "Writer",
      description: "AI content generation, editing, and publishing",
      icon: PencilIcon,
      color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
      path: "/writer",
      count: insights?.totalContent || 0,
      status: "active",
      metric: `${insights?.publishedContent || 0} published`,
    },
    {
      title: "Thinker",
      description: "Prompts, author profiles, and content strategies",
      icon: BoltIcon,
      color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
      path: "/thinker",
      count: 0,
      status: "active",
      metric: "24 prompts",
    },
    {
      title: "Automation",
      description: "Workflow automation and scheduled tasks",
      icon: PlugInIcon,
      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
      path: "/automation",
      count: 0,
      status: "active",
      metric: insights?.automationEnabled ? "3 active" : "Not configured",
    },
  ];

  const recentActivity = [
    {
      id: 1,
      type: "Content Published",
      description: "5 pieces published to WordPress",
      timestamp: new Date(Date.now() - 30 * 60 * 1000),
      icon: PaperPlaneIcon,
      color: "text-green-600",
    },
    {
      id: 2,
      type: "Ideas Generated",
      description: "12 new content ideas from clusters",
      timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
      icon: BoltIcon,
      color: "text-orange-600",
    },
    {
      id: 3,
      type: "Keywords Clustered",
      description: "45 keywords grouped into 8 clusters",
      timestamp: new Date(Date.now() - 4 * 60 * 60 * 1000),
      icon: GroupIcon,
      color: "text-purple-600",
    },
    {
      id: 4,
      type: "Content Generated",
      description: "8 new content pieces created",
      timestamp: new Date(Date.now() - 6 * 60 * 60 * 1000),
      icon: FileTextIcon,
      color: "text-blue-600",
    },
  ];

  const fetchAppInsights = async () => {
    try {
      setLoading(true);
      
      const [keywordsRes, clustersRes, ideasRes, tasksRes, contentRes, imagesRes] = await Promise.all([
        fetchKeywords({ page_size: 1, site_id: undefined }),
        fetchClusters({ page_size: 1, site_id: undefined }),
        fetchContentIdeas({ page_size: 1, site_id: undefined }),
        fetchTasks({ page_size: 1, site_id: undefined }),
        fetchContent({ page_size: 1, site_id: undefined }),
        fetchContentImages({ page_size: 1, site_id: undefined })
      ]);

      const totalKeywords = keywordsRes.count || 0;
      const totalClusters = clustersRes.count || 0;
      const totalIdeas = ideasRes.count || 0;
      const totalTasks = tasksRes.count || 0;
      const totalContent = contentRes.count || 0;
      const totalImages = imagesRes.count || 0;

      const publishedContent = 0; // Placeholder
      const workflowCompletionRate = totalKeywords > 0 
        ? Math.round((publishedContent / totalKeywords) * 100) 
        : 0;

      setInsights({
        totalKeywords,
        totalClusters,
        totalIdeas,
        totalTasks,
        totalContent,
        totalImages,
        publishedContent,
        workflowCompletionRate,
        contentThisWeek: Math.floor(totalContent * 0.3),
        contentThisMonth: Math.floor(totalContent * 0.7),
        automationEnabled: false,
      });
      
      setLastUpdated(new Date());
    } catch (error: any) {
      console.error('Error fetching insights:', error);
      toast.error(`Failed to load insights: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchAppInsights();
  }, [activeSite, activeSector]);

  const chartOptions: ApexOptions = {
    chart: {
      type: "area",
      height: 300,
      toolbar: { show: false },
      zoom: { enabled: false },
    },
    stroke: {
      curve: "smooth",
      width: 3,
    },
    xaxis: {
      categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      labels: { style: { colors: "#6b7280" } },
    },
    yaxis: {
      labels: { style: { colors: "#6b7280" } },
    },
    legend: {
      position: "top",
      labels: { colors: "#6b7280" },
    },
    colors: ["var(--color-primary)", "var(--color-success)", "var(--color-purple)"],
    grid: {
      borderColor: "#e5e7eb",
    },
    fill: {
      type: "gradient",
      gradient: {
        opacityFrom: 0.6,
        opacityTo: 0.1,
      },
    },
  };

  const chartSeries = [
    {
      name: "Content Created",
      data: [12, 19, 15, 25, 22, 18, 24],
    },
    {
      name: "Keywords Added",
      data: [8, 12, 10, 15, 14, 11, 16],
    },
    {
      name: "Ideas Generated",
      data: [5, 8, 6, 10, 9, 7, 11],
    },
  ];

  const formatTimeAgo = (date: Date) => {
    const minutes = Math.floor((Date.now() - date.getTime()) / 60000);
    if (minutes < 60) return `${minutes}m ago`;
    const hours = Math.floor(minutes / 60);
    if (hours < 24) return `${hours}h ago`;
    const days = Math.floor(hours / 24);
    return `${days}d ago`;
  };

  return (
    <>
      <PageMeta
        title="Dashboard - IGNY8"
        description="IGNY8 AI-Powered Content Creation Dashboard"
      />
      
      <PageHeader 
        title="Dashboard" 
        lastUpdated={lastUpdated}
        showRefresh={true}
        onRefresh={fetchAppInsights}
      />

      <div className="space-y-6">
        {/* Hero Section */}
        <div className="bg-gradient-to-r from-brand-500 to-purple-600 rounded-2xl p-8 md:p-12 text-white relative overflow-hidden">
          <div className="absolute inset-0 bg-grid-white/10 [mask-image:linear-gradient(0deg,white,transparent)]"></div>
          <div className="relative z-10">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              AI-Powered Content Creation Workflow
            </h1>
            <p className="text-xl text-white/90 mb-6 max-w-2xl">
              Transform keywords into published content with intelligent automation. 
              From discovery to publication, IGNY8 streamlines your entire content creation process.
            </p>
            <div className="flex flex-wrap gap-4">
              <Link 
                to="/planner/keyword-opportunities"
                className="px-6 py-3 bg-white text-brand-600 rounded-lg font-semibold hover:bg-gray-100 transition-colors inline-flex items-center gap-2"
              >
                Get Started
                <ArrowRightIcon className="size-5" />
              </Link>
              <Link 
                to="/automation"
                className="px-6 py-3 bg-white/10 text-white rounded-lg font-semibold hover:bg-white/20 transition-colors inline-flex items-center gap-2 border border-white/20"
              >
                Configure Automation
                <PlugInIcon className="size-5" />
              </Link>
            </div>
          </div>
        </div>

        {/* Key Metrics */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <EnhancedMetricCard
            title="Total Keywords"
            value={insights?.totalKeywords.toLocaleString() || "0"}
            subtitle={`${insights?.totalClusters || 0} clusters • ${insights?.totalIdeas || 0} ideas`}
            icon={<ListIcon className="size-6" />}
            accentColor="blue"
            trend={0}
            href="/planner/keywords"
          />
          <EnhancedMetricCard
            title="Content Pieces"
            value={insights?.totalContent.toLocaleString() || "0"}
            subtitle={`${insights?.publishedContent || 0} published • ${insights?.contentThisWeek || 0} this week`}
            icon={<FileTextIcon className="size-6" />}
            accentColor="green"
            trend={0}
            href="/writer/content"
          />
          <EnhancedMetricCard
            title="Images Generated"
            value={insights?.totalImages.toLocaleString() || "0"}
            subtitle={`${insights?.totalContent || 0} content pieces • ${insights?.totalTasks || 0} tasks`}
            icon={<FileIcon className="size-6" />}
            accentColor="purple"
            trend={0}
            href="/writer/images"
          />
          <EnhancedMetricCard
            title="Workflow Completion"
            value={`${insights?.workflowCompletionRate || 0}%`}
            subtitle={`${insights?.totalKeywords || 0} keywords → ${insights?.publishedContent || 0} published`}
            icon={<CheckCircleIcon className="size-6" />}
            accentColor="success"
            trend={0}
          />
        </div>

        {/* App Modules */}
        <ComponentCard title="Platform Modules" desc="Access all IGNY8 modules and features">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {appModules.map((module) => {
              const Icon = module.icon;
              return (
                <Link
                  key={module.title}
                  to={module.path}
                  className="rounded-2xl border-2 border-slate-200 bg-white p-6 hover:shadow-xl hover:-translate-y-1 transition-all group"
                >
                  <div className="flex items-start justify-between mb-4">
                    <div className={`inline-flex size-14 rounded-xl bg-gradient-to-br ${module.color} items-center justify-center text-white shadow-lg`}>
                      <Icon className="h-7 w-7" />
                    </div>
                    {module.status === "coming-soon" && (
                      <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-slate-100 text-slate-600">
                        Soon
                      </span>
                    )}
                  </div>
                  <h3 className="text-lg font-bold text-slate-900 mb-2">{module.title}</h3>
                  <p className="text-sm text-slate-600 mb-4">{module.description}</p>
                  <div className="flex items-center justify-between">
                    <div>
                      <div className="text-2xl font-bold text-slate-900">{module.count}</div>
                      <div className="text-xs text-slate-500">{module.metric}</div>
                    </div>
                    <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] group-hover:translate-x-1 transition" />
                  </div>
                </Link>
              );
            })}
          </div>
        </ComponentCard>

        {/* Activity Chart & Recent Activity */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <ComponentCard title="Activity Overview" desc="Content creation trends over the past week">
            <Suspense fallback={<div className="h-[300px] flex items-center justify-center">Loading chart...</div>}>
              <Chart options={chartOptions} series={chartSeries} type="area" height={300} />
            </Suspense>
          </ComponentCard>

          <ComponentCard title="Recent Activity" desc="Latest actions across your workflow">
            <div className="space-y-4">
              {recentActivity.map((activity) => {
                const Icon = activity.icon;
                return (
                  <div
                    key={activity.id}
                    className="flex items-center gap-4 p-4 rounded-lg border border-slate-200 bg-white hover:shadow-md transition"
                  >
                    <div className={`size-10 rounded-lg bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center ${activity.color}`}>
                      <Icon className="h-5 w-5" />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center justify-between mb-1">
                        <h4 className="font-semibold text-slate-900">{activity.type}</h4>
                        <span className="text-xs text-slate-500">{formatTimeAgo(activity.timestamp)}</span>
                      </div>
                      <p className="text-sm text-slate-600">{activity.description}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </ComponentCard>
        </div>

        {/* Workflow Pipeline */}
        <ComponentCard title="How It Works" desc="Your complete content creation workflow">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-7 gap-4">
            {workflowSteps.map((step, index) => (
              <Link
                key={step.id}
                to={step.path}
                className="group"
              >
                <Card className="p-6 hover:shadow-lg transition-all duration-200 border-2 hover:border-brand-500 dark:hover:border-brand-400 h-full">
                  <div className="flex flex-col items-center text-center">
                    <div className={`w-16 h-16 rounded-xl bg-gradient-to-br ${
                      step.color === "blue" ? "from-blue-500 to-blue-600" :
                      step.color === "purple" ? "from-purple-500 to-purple-600" :
                      step.color === "orange" ? "from-orange-500 to-orange-600" :
                      step.color === "indigo" ? "from-indigo-500 to-indigo-600" :
                      step.color === "green" ? "from-green-500 to-green-600" :
                      step.color === "pink" ? "from-pink-500 to-pink-600" :
                      "from-green-500 to-green-600"
                    } flex items-center justify-center mb-4 group-hover:scale-110 transition-transform text-white`}>
                      <div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
                        {React.cloneElement(step.icon as React.ReactElement, { 
                          className: 'w-8 h-8 flex-shrink-0 text-white' 
                        })}
                      </div>
                    </div>
                    <div className="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-1">
                      Step {step.id}
                    </div>
                    <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">
                      {step.title}
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      {step.description}
                    </p>
                  </div>
                </Card>
              </Link>
            ))}
          </div>
        </ComponentCard>

        {/* Quick Actions */}
        <ComponentCard title="Quick Actions" desc="Common tasks and shortcuts">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <Link
              to="/planner/keyword-opportunities"
              className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[var(--color-primary)] hover:shadow-md transition group"
            >
              <div className="size-12 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white">
                <ListIcon className="h-6 w-6" />
              </div>
              <div className="flex-1">
                <h4 className="font-semibold text-slate-900">Add Keywords</h4>
                <p className="text-xs text-slate-600">Discover new opportunities</p>
              </div>
              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] transition" />
            </Link>

            <Link
              to="/writer/tasks"
              className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-md transition group"
            >
              <div className="size-12 rounded-lg bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white">
                <FileTextIcon className="h-6 w-6" />
              </div>
              <div className="flex-1">
                <h4 className="font-semibold text-slate-900">Create Content</h4>
                <p className="text-xs text-slate-600">Generate new content</p>
              </div>
              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0bbf87] transition" />
            </Link>

            <Link
              to="/automation"
              className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-md transition group"
            >
              <div className="size-12 rounded-lg bg-gradient-to-br from-[var(--color-purple)] to-[var(--color-purple-dark)] flex items-center justify-center text-white">
                <PlugInIcon className="h-6 w-6" />
              </div>
              <div className="flex-1">
                <h4 className="font-semibold text-slate-900">Setup Automation</h4>
                <p className="text-xs text-slate-600">Configure workflows</p>
              </div>
              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#5d4ae3] transition" />
            </Link>

            <Link
              to="/thinker/prompts"
              className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-md transition group"
            >
              <div className="size-12 rounded-lg bg-gradient-to-br from-[var(--color-warning)] to-[var(--color-warning-dark)] flex items-center justify-center text-white">
                <BoltIcon className="h-6 w-6" />
              </div>
              <div className="flex-1">
                <h4 className="font-semibold text-slate-900">Manage Prompts</h4>
                <p className="text-xs text-slate-600">Edit AI instructions</p>
              </div>
              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#ff7a00] transition" />
            </Link>
          </div>
        </ComponentCard>

        {/* Credit Balance & Usage */}
        <div className="grid grid-cols-12 gap-6">
          <div className="col-span-12 xl:col-span-4">
            <CreditBalanceWidget />
          </div>
          
          <div className="col-span-12 xl:col-span-8">
            <UsageChartWidget />
          </div>
        </div>
      </div>
    </>
  );
}