import { useEffect, useState, useMemo, lazy, Suspense } from "react";
import { Link, useNavigate } from "react-router-dom";
import PageMeta from "../../components/common/PageMeta";
import ComponentCard from "../../components/common/ComponentCard";
import { ProgressBar } from "../../components/ui/progress";
import { ApexOptions } from "apexcharts";
import EnhancedMetricCard from "../../components/dashboard/EnhancedMetricCard";
import PageHeader from "../../components/common/PageHeader";

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

import { 
  FileTextIcon,
  BoxIcon,
  CheckCircleIcon,
  ClockIcon,
  PencilIcon,
  BoltIcon,
  ArrowRightIcon,
  PaperPlaneIcon,
  PlugInIcon,
} from "../../icons";
import {
  fetchTasks,
  fetchContent,
  fetchContentImages,
  fetchTaxonomies,
} from "../../services/api";
import { useSiteStore } from "../../store/siteStore";
import { useSectorStore } from "../../store/sectorStore";

interface WriterStats {
  tasks: {
    total: number;
    byStatus: Record<string, number>;
    pending: number;
    inProgress: number;
    completed: number;
    avgWordCount: number;
    totalWordCount: number;
  };
  content: {
    total: number;
    drafts: number;
    published: number;
    totalWordCount: number;
    avgWordCount: number;
    byContentType: Record<string, number>;
  };
  images: {
    total: number;
    generated: number;
    pending: number;
    failed: number;
    byType: Record<string, number>;
  };
  workflow: {
    tasksCreated: boolean;
    contentGenerated: boolean;
    imagesGenerated: boolean;
    readyToPublish: boolean;
  };
  productivity: {
    contentThisWeek: number;
    contentThisMonth: number;
    avgGenerationTime: number;
    publishRate: number;
  };
  taxonomies: number;
  attributes: number;
}

export default function WriterDashboard() {
  const navigate = useNavigate();
  const { activeSite } = useSiteStore();
  const { activeSector } = useSectorStore();
  
  const [stats, setStats] = useState<WriterStats | null>(null);
  const [loading, setLoading] = useState(true);
  const [lastUpdated, setLastUpdated] = useState<Date>(new Date());

  const fetchDashboardData = async () => {
    try {
      setLoading(true);
      
      const [tasksRes, contentRes, imagesRes, taxonomiesRes] = await Promise.all([
        fetchTasks({ page_size: 1000, sector_id: activeSector?.id }),
        fetchContent({ page_size: 1000, sector_id: activeSector?.id }),
        fetchContentImages({ sector_id: activeSector?.id }),
        fetchTaxonomies({ page_size: 1000, sector_id: activeSector?.id }),
      ]);

      const tasks = tasksRes.results || [];
      const tasksByStatus: Record<string, number> = {};
      let pendingTasks = 0;
      let inProgressTasks = 0;
      let completedTasks = 0;
      let totalWordCount = 0;
      
      tasks.forEach(t => {
        tasksByStatus[t.status || 'queued'] = (tasksByStatus[t.status || 'queued'] || 0) + 1;
        if (t.status === 'queued') pendingTasks++;
        else if (t.status === 'completed') completedTasks++;
        if (t.word_count) totalWordCount += t.word_count;
      });
      
      const avgWordCount = tasks.length > 0 ? Math.round(totalWordCount / tasks.length) : 0;

      const content = contentRes.results || [];
      let drafts = 0;
      let published = 0;
      let contentTotalWordCount = 0;
      const contentByType: Record<string, number> = {};
      
      content.forEach(c => {
        if (c.status === 'draft') drafts++;
        else if (c.status === 'published') published++;
        if (c.word_count) contentTotalWordCount += c.word_count;
      });
      
      const contentAvgWordCount = content.length > 0 ? Math.round(contentTotalWordCount / content.length) : 0;

      const images = imagesRes.results || [];
      let generatedImages = 0;
      let pendingImages = 0;
      let failedImages = 0;
      const imagesByType: Record<string, number> = {};
      
      images.forEach(imgGroup => {
        if (imgGroup.overall_status === 'complete') generatedImages++;
        else if (imgGroup.overall_status === 'pending' || imgGroup.overall_status === 'partial') pendingImages++;
        else if (imgGroup.overall_status === 'failed') failedImages++;
        
        if (imgGroup.featured_image) {
          imagesByType['featured'] = (imagesByType['featured'] || 0) + 1;
        }
        if (imgGroup.in_article_images && imgGroup.in_article_images.length > 0) {
          imagesByType['in_article'] = (imagesByType['in_article'] || 0) + imgGroup.in_article_images.length;
        }
      });

      const contentThisWeek = Math.floor(content.length * 0.3);
      const contentThisMonth = Math.floor(content.length * 0.7);
      const publishRate = content.length > 0 ? Math.round((published / content.length) * 100) : 0;

      const taxonomies = taxonomiesRes.results || [];
      const taxonomyCount = taxonomies.length;
      // Note: Attributes are a subset of taxonomies with type 'product_attribute'
      const attributeCount = taxonomies.filter(t => t.taxonomy_type === 'product_attribute').length;

      setStats({
        tasks: {
          total: tasks.length,
          byStatus: tasksByStatus,
          pending: pendingTasks,
          inProgress: inProgressTasks,
          completed: completedTasks,
          avgWordCount,
          totalWordCount
        },
        content: {
          total: content.length,
          drafts,
          published,
          totalWordCount: contentTotalWordCount,
          avgWordCount: contentAvgWordCount,
          byContentType: contentByType
        },
        images: {
          total: images.length,
          generated: generatedImages,
          pending: pendingImages,
          failed: failedImages,
          byType: imagesByType
        },
        workflow: {
          tasksCreated: tasks.length > 0,
          contentGenerated: content.length > 0,
          imagesGenerated: generatedImages > 0,
          readyToPublish: published > 0
        },
        productivity: {
          contentThisWeek,
          contentThisMonth,
          avgGenerationTime: 0,
          publishRate
        },
        taxonomies: taxonomyCount,
        attributes: attributeCount,
      });

      setLastUpdated(new Date());
    } catch (error) {
      console.error('Error fetching dashboard data:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchDashboardData();
    const interval = setInterval(fetchDashboardData, 30000);
    return () => clearInterval(interval);
  }, [activeSector?.id, activeSite?.id]);

  const completionRate = useMemo(() => {
    if (!stats || stats.tasks.total === 0) return 0;
    return Math.round((stats.tasks.completed / stats.tasks.total) * 100);
  }, [stats]);

  const writerModules = [
    {
      title: "Tasks",
      description: "Content writing tasks and assignments",
      icon: FileTextIcon,
      color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
      path: "/writer/tasks",
      count: stats?.tasks.total || 0,
      metric: `${stats?.tasks.completed || 0} completed`,
    },
    {
      title: "Content",
      description: "Generated content and drafts",
      icon: PencilIcon,
      color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
      path: "/writer/content",
      count: stats?.content.total || 0,
      metric: `${stats?.content.published || 0} published`,
    },
    {
      title: "Images",
      description: "Generated images and assets",
      icon: BoxIcon,
      color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
      path: "/writer/images",
      count: stats?.images.generated || 0,
      metric: `${stats?.images.pending || 0} pending`,
    },
    {
      title: "Published",
      description: "Published content and posts",
      icon: PaperPlaneIcon,
      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
      path: "/writer/published",
      count: stats?.content.published || 0,
      metric: "View all published",
    },
    {
      title: "Taxonomies",
      description: "Manage content taxonomies",
      icon: BoltIcon,
      color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
      path: "/writer/taxonomies",
      count: stats?.taxonomies || 0,
      metric: `${stats?.taxonomies || 0} total`,
    },
    {
      title: "Attributes",
      description: "Manage content attributes",
      icon: PlugInIcon,
      color: "from-[var(--color-secondary)] to-[var(--color-secondary-dark)]",
      path: "/writer/attributes",
      count: stats?.attributes || 0,
      metric: `${stats?.attributes || 0} total`,
    },
  ];

  const recentActivity = [
    {
      id: 1,
      type: "Content Published",
      description: `${stats?.content.published || 0} pieces published to WordPress`,
      timestamp: new Date(Date.now() - 30 * 60 * 1000),
      icon: PaperPlaneIcon,
      color: "text-green-600",
    },
    {
      id: 2,
      type: "Content Generated",
      description: `${stats?.content.total || 0} content pieces created`,
      timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
      icon: PencilIcon,
      color: "text-blue-600",
    },
    {
      id: 3,
      type: "Images Generated",
      description: `${stats?.images.generated || 0} images created`,
      timestamp: new Date(Date.now() - 4 * 60 * 60 * 1000),
      icon: BoxIcon,
      color: "text-orange-600",
    },
  ];

  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-warning)"],
    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: "Tasks Completed",
      data: [8, 12, 10, 15, 14, 11, 16],
    },
    {
      name: "Images Generated",
      data: [5, 8, 6, 10, 9, 7, 11],
    },
  ];

  const tasksStatusChart = useMemo(() => {
    if (!stats) return null;
    
    const options: ApexOptions = {
      chart: {
        type: 'donut',
        fontFamily: 'Outfit, sans-serif',
        toolbar: { show: false }
      },
      labels: Object.keys(stats.tasks.byStatus).filter(key => stats.tasks.byStatus[key] > 0),
      colors: ['#465FFF', '#F59E0B', '#10B981', '#EF4444', '#8B5CF6'],
      legend: {
        position: 'bottom',
        fontFamily: 'Outfit',
        show: true
      },
      dataLabels: {
        enabled: false
      },
      plotOptions: {
        pie: {
          donut: {
            size: '70%',
            labels: {
              show: true,
              name: { show: false },
              value: {
                show: true,
                fontSize: '24px',
                fontWeight: 700,
                color: '#465FFF',
                fontFamily: 'Outfit',
                formatter: () => {
                  const total = Object.values(stats.tasks.byStatus).reduce((a: number, b: number) => a + b, 0);
                  return total > 0 ? total.toString() : '0';
                }
              },
              total: { show: false }
            }
          }
        }
      }
    };

    const series = Object.keys(stats.tasks.byStatus)
      .filter(key => stats.tasks.byStatus[key] > 0)
      .map(key => stats.tasks.byStatus[key]);
    
    return { options, series };
  }, [stats]);

  const contentStatusChart = useMemo(() => {
    if (!stats) return null;
    
    const options: ApexOptions = {
      chart: {
        type: 'bar',
        fontFamily: 'Outfit, sans-serif',
        toolbar: { show: false },
        height: 300
      },
      colors: ['#465FFF', '#F59E0B', '#10B981'],
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          borderRadius: 5
        }
      },
      dataLabels: {
        enabled: true
      },
      xaxis: {
        categories: ['Drafts', 'Published'],
        labels: {
          style: {
            fontFamily: 'Outfit'
          }
        }
      },
      yaxis: {
        labels: {
          style: {
            fontFamily: 'Outfit'
          }
        }
      },
      grid: {
        strokeDashArray: 4
      }
    };

    const series = [{
      name: 'Content',
      data: [stats.content.drafts, stats.content.published]
    }];
    
    return { options, series };
  }, [stats]);

  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`;
  };

  if (loading && !stats) {
    return (
      <>
        <PageMeta title="Writer Dashboard - IGNY8" description="Content creation overview" />
        <div className="flex items-center justify-center h-96">
          <div className="text-center">
            <div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-brand-500 border-t-transparent"></div>
            <p className="mt-4 text-gray-600 dark:text-gray-400">Loading dashboard data...</p>
          </div>
        </div>
      </>
    );
  }

  if (!stats && !loading) {
    return (
      <>
        <PageMeta title="Writer Dashboard - IGNY8" description="Content creation overview" />
        <div className="text-center py-12">
          <p className="text-gray-600 dark:text-gray-400">
            {activeSector ? 'No data available for the selected sector.' : 'No data available. Select a sector or wait for data to load.'}
          </p>
        </div>
      </>
    );
  }

  if (!stats) return null;

  return (
    <>
      <PageMeta title="Writer Dashboard - IGNY8" description="Content creation overview" />
      <PageHeader 
        title="Writer Dashboard" 
        lastUpdated={lastUpdated}
        showRefresh={true}
        onRefresh={fetchDashboardData}
      />

      <div className="space-y-6">
        {/* Key Metrics */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <EnhancedMetricCard
            title="Total Tasks"
            value={stats.tasks.total}
            subtitle={`${stats.tasks.completed} completed • ${stats.tasks.pending} pending`}
            icon={<FileTextIcon className="size-6" />}
            accentColor="blue"
            trend={0}
            href="/writer/tasks"
          />
          <EnhancedMetricCard
            title="Content Pieces"
            value={stats.content.total}
            subtitle={`${stats.content.published} published • ${stats.content.drafts} drafts`}
            icon={<PencilIcon className="size-6" />}
            accentColor="green"
            trend={0}
            href="/writer/content"
          />
          <EnhancedMetricCard
            title="Images Generated"
            value={stats.images.generated}
            subtitle={`${stats.images.total} total • ${stats.images.pending} pending`}
            icon={<BoxIcon className="size-6" />}
            accentColor="orange"
            trend={0}
            href="/writer/images"
          />
          <EnhancedMetricCard
            title="Publish Rate"
            value={`${stats.productivity.publishRate}%`}
            subtitle={`${stats.content.published} of ${stats.content.total} published`}
            icon={<PaperPlaneIcon className="size-6" />}
            accentColor="purple"
            trend={0}
            href="/writer/published"
          />
        </div>

        {/* Writer Modules */}
        <ComponentCard title="Writer Modules" desc="Access all content creation tools and features">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {writerModules.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>
                  </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="Content Creation Activity" desc="Tasks, content, and images 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 content creation actions and updates">
            <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>

        {/* Charts */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {tasksStatusChart && (
            <ComponentCard title="Tasks by Status" desc="Task distribution across statuses">
              <Suspense fallback={<div className="h-[300px] flex items-center justify-center">Loading chart...</div>}>
                <Chart 
                  options={tasksStatusChart.options} 
                  series={tasksStatusChart.series} 
                  type="donut" 
                  height={300} 
                />
              </Suspense>
            </ComponentCard>
          )}

          {contentStatusChart && (
            <ComponentCard title="Content by Status" desc="Distribution across workflow stages">
              <Suspense fallback={<div className="h-[300px] flex items-center justify-center">Loading chart...</div>}>
                <Chart 
                  options={contentStatusChart.options} 
                  series={contentStatusChart.series} 
                  type="bar" 
                  height={300} 
                />
              </Suspense>
            </ComponentCard>
          )}
        </div>

        {/* Productivity Metrics */}
        <ComponentCard title="Productivity Metrics" desc="Content creation performance tracking">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <div className="flex items-center justify-between mb-2">
                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Task Completion</span>
                <span className="text-sm font-semibold text-gray-800 dark:text-white/90">{completionRate}%</span>
              </div>
              <ProgressBar value={completionRate} color="primary" size="md" />
              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                {stats.tasks.completed} of {stats.tasks.total} tasks completed
              </p>
            </div>

            <div>
              <div className="flex items-center justify-between mb-2">
                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Publish Rate</span>
                <span className="text-sm font-semibold text-gray-800 dark:text-white/90">{stats.productivity.publishRate}%</span>
              </div>
              <ProgressBar value={stats.productivity.publishRate} color="success" size="md" />
              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                {stats.content.published} of {stats.content.total} content published
              </p>
            </div>

            <div>
              <div className="flex items-center justify-between mb-2">
                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Image Generation</span>
                <span className="text-sm font-semibold text-gray-800 dark:text-white/90">
                  {stats.images.total > 0 ? Math.round((stats.images.generated / stats.images.total) * 100) : 0}%
                </span>
              </div>
              <ProgressBar 
                value={stats.images.total > 0 ? Math.round((stats.images.generated / stats.images.total) * 100) : 0} 
                color="warning" 
                size="md" 
              />
              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                {stats.images.generated} of {stats.images.total} images generated
              </p>
            </div>
          </div>
        </ComponentCard>

        {/* Quick Actions */}
        <ComponentCard title="Quick Actions" desc="Common content creation tasks and shortcuts">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <Link
              to="/writer/tasks"
              className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[var(--color-primary)] hover:shadow-lg transition-all group"
            >
              <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
                <FileTextIcon className="h-6 w-6" />
              </div>
              <div className="flex-1 text-left">
                <h4 className="font-semibold text-slate-900 mb-1">Create Task</h4>
                <p className="text-sm text-slate-600">New writing task</p>
              </div>
              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] transition" />
            </Link>

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

            <Link
              to="/writer/images"
              className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-lg transition-all group"
            >
              <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-warning)] to-[var(--color-warning-dark)] flex items-center justify-center text-white shadow-lg">
                <BoxIcon className="h-6 w-6" />
              </div>
              <div className="flex-1 text-left">
                <h4 className="font-semibold text-slate-900 mb-1">Generate Images</h4>
                <p className="text-sm text-slate-600">Create visuals</p>
              </div>
              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#ff7a00] transition" />
            </Link>

            <Link
              to="/writer/published"
              className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group"
            >
              <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-purple)] to-[var(--color-purple-dark)] flex items-center justify-center text-white shadow-lg">
                <PaperPlaneIcon className="h-6 w-6" />
              </div>
              <div className="flex-1 text-left">
                <h4 className="font-semibold text-slate-900 mb-1">Publish Content</h4>
                <p className="text-sm text-slate-600">Publish to WordPress</p>
              </div>
              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#5d4ae3] transition" />
            </Link>
          </div>
        </ComponentCard>

        {/* Info Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <ComponentCard title="How Writer Works" desc="Understanding the content creation workflow">
            <div className="space-y-4">
              <div className="flex gap-4">
                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-md">
                  <FileTextIcon className="h-5 w-5" />
                </div>
                <div>
                  <h4 className="font-semibold text-slate-900 mb-1">Task Creation</h4>
                  <p className="text-sm text-slate-600">
                    Create writing tasks from content ideas. Each task includes target keywords, outline, and word count requirements.
                  </p>
                </div>
              </div>
              <div className="flex gap-4">
                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-md">
                  <PencilIcon className="h-5 w-5" />
                </div>
                <div>
                  <h4 className="font-semibold text-slate-900 mb-1">AI Content Generation</h4>
                  <p className="text-sm text-slate-600">
                    Generate full content pieces using AI. Content is created based on your prompts, author profiles, and brand guidelines.
                  </p>
                </div>
              </div>
              <div className="flex gap-4">
                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--color-warning)] to-[var(--color-warning-dark)] flex items-center justify-center text-white shadow-md">
                  <BoxIcon className="h-5 w-5" />
                </div>
                <div>
                  <h4 className="font-semibold text-slate-900 mb-1">Image Generation</h4>
                  <p className="text-sm text-slate-600">
                    Automatically generate featured images and in-article images for your content. Images are optimized for SEO and engagement.
                  </p>
                </div>
              </div>
            </div>
          </ComponentCard>

          <ComponentCard title="Getting Started" desc="Quick guide to using Writer">
            <div className="space-y-3">
              <div className="flex items-start gap-3">
                <div className="flex-shrink-0 size-8 rounded-full bg-[#0693e3] text-white flex items-center justify-center font-bold text-sm">
                  1
                </div>
                <div>
                  <h4 className="font-semibold text-slate-900 mb-1">Create Tasks</h4>
                  <p className="text-sm text-slate-600">
                    Start by creating writing tasks from content ideas in the Planner module. Tasks define what content needs to be written.
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="flex-shrink-0 size-8 rounded-full bg-[#0bbf87] text-white flex items-center justify-center font-bold text-sm">
                  2
                </div>
                <div>
                  <h4 className="font-semibold text-slate-900 mb-1">Generate Content</h4>
                  <p className="text-sm text-slate-600">
                    Use AI to generate content from tasks. Review and edit generated content before publishing.
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="flex-shrink-0 size-8 rounded-full bg-[#ff7a00] text-white flex items-center justify-center font-bold text-sm">
                  3
                </div>
                <div>
                  <h4 className="font-semibold text-slate-900 mb-1">Publish</h4>
                  <p className="text-sm text-slate-600">
                    Once content is reviewed and images are generated, publish directly to WordPress or export for manual publishing.
                  </p>
                </div>
              </div>
            </div>
          </ComponentCard>
        </div>
      </div>
    </>
  );
}