"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Checkbox } from "@/components/ui/checkbox"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
import { ArrowRight, Plus, Globe, BarChart3, Zap, Code, Search, Star, Clock, Users, Layers, AlertCircle, Edit, Trash2, User, Palette } from "lucide-react"
import { useTemplates } from "@/hooks/useTemplates"
import { CustomTemplateForm } from "@/components/custom-template-form"
import { EditTemplateForm } from "@/components/edit-template-form"
import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog"
import { DatabaseTemplate, TemplateFeature } from "@/lib/template-service"
import AICustomFeatureCreator from "@/components/ai/AICustomFeatureCreator"
import { BACKEND_URL } from "@/config/backend"
// Removed Tooltip import as we are no longer using tooltips for title/description
import WireframeCanvas from "@/components/wireframe-canvas"
import PromptSidePanel from "@/components/prompt-side-panel"
import { DualCanvasEditor } from "@/components/dual-canvas-editor"
import { getAccessToken } from "@/components/apis/authApiClients"

interface Template {
  id: string
  title: string
  description: string
  category: string
  features: string[]
  complexity: number
  timeEstimate: string
  techStack: string[]
  popularity?: number
  lastUpdated?: string
  type?: string
  icon?: string | null
  gradient?: string | null
  border?: string | null
  text?: string | null
  subtext?: string | null
  is_active?: boolean
  created_at?: string
  updated_at?: string
  featureCount?: number
  is_custom?: boolean;  // Add this field to identify custom templates
}

function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => void }) {
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")
  const [showCustomForm, setShowCustomForm] = useState(false)
  const [editingTemplate, setEditingTemplate] = useState<DatabaseTemplate | null>(null)
  const [deletingTemplate, setDeletingTemplate] = useState<DatabaseTemplate | null>(null)
  const [deleteLoading, setDeleteLoading] = useState(false)
  // Keep a stable list of all categories seen so the filter chips don't disappear
  const [knownCategories, setKnownCategories] = useState<Set<string>>(new Set(["all"]))
  // Cache counts per category using the API totals for each filtered fetch
  // Use undefined to indicate "unknown" instead of showing wrong initial counts
  const [categoryCounts, setCategoryCounts] = useState<Record<string, number | undefined>>({ all: 0 })
  // Track per-card expanded state for descriptions
  const [expandedDescriptions, setExpandedDescriptions] = useState<Record<string, boolean>>({})
  const [descDialogOpen, setDescDialogOpen] = useState(false)
  const [descDialogData, setDescDialogData] = useState<{ title: string; description: string }>({ title: '', description: '' })

  const {
    user,
    combined,
    loading,
    error,
    paginationState,
    createTemplate,
    updateTemplate,
    deleteTemplate,
    fetchTemplatesWithPagination,
    loadMoreTemplates,
    categories: hookCategories,
  } = useTemplates()

  // Initial fetch is handled inside useTemplates hook; avoid duplicate fetch here

  // Handle category changes immediately (no debounce) so switching chips is snappy
  useEffect(() => {
    if (selectedCategory !== paginationState.selectedCategory) {
      console.log('[TemplateSelectionStep] Triggering fetch due to category change:', { selectedCategory });
      fetchTemplatesWithPagination({
        page: 0,
        pageSize: paginationState.pageSize,
        category: selectedCategory,
        search: searchQuery,
        resetPagination: true,
      });
    }
  }, [selectedCategory, paginationState.selectedCategory, paginationState.pageSize, searchQuery, fetchTemplatesWithPagination]);

  // Handle search changes with debouncing
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (searchQuery !== paginationState.searchQuery) {
        console.log('[TemplateSelectionStep] Triggering fetch due to search change:', { searchQuery });
        fetchTemplatesWithPagination({
          page: 0,
          pageSize: paginationState.pageSize,
          category: selectedCategory,
          search: searchQuery,
          resetPagination: true,
        });
      }
    }, 500);
    return () => clearTimeout(timeoutId);
  }, [searchQuery, selectedCategory, paginationState.searchQuery, paginationState.pageSize, fetchTemplatesWithPagination]);

  // Track categories seen across any fetch so the chips remain visible
  useEffect(() => {
    if (!combined?.data?.length) return;
    setKnownCategories((prev) => {
      const next = new Set(prev);
      combined.data.forEach((t) => {
        if (t.category) next.add(t.category);
      });
      return next;
    });
  }, [combined?.data]);

  // Seed known categories and counts from hookCategories (pre-fetched full counts)
  useEffect(() => {
    if (!hookCategories || hookCategories.length === 0) return;
    setKnownCategories((prev) => {
      const next = new Set(prev);
      hookCategories.forEach((c) => next.add(c.id));
      return next;
    });
    setCategoryCounts((prev) => {
      const next: Record<string, number | undefined> = { ...prev };
      hookCategories.forEach((c) => {
        next[c.id] = c.count;
      });
      // Ensure 'all' exists if provided by hook
      const allFromHook = hookCategories.find((c) => c.id === 'all')?.count;
      if (typeof allFromHook === 'number') next['all'] = allFromHook;
      return next;
    });
  }, [hookCategories]);

  // Update counts cache based on API totals for the currently selected category
  useEffect(() => {
    const currentCat = paginationState.selectedCategory || 'all';
    const totalForFilter = paginationState.total || 0;
    setCategoryCounts((prev) => ({
      ...prev,
      [currentCat]: totalForFilter,
    }));
  }, [paginationState.selectedCategory, paginationState.total]);

  const templates: Template[] = combined?.data?.length
    ? combined.data.map((t) => {
        console.log('[TemplateSelectionStep] Processing template:', { 
          id: t.id, 
          title: t.title, 
          category: t.category, 
          feature_count: t.feature_count 
        });
        return {
          id: t.id,
          title: t.title,
          description: t.description || "No description available",
          category: t.category,
          features: [],
          complexity: 3, // Default complexity since DatabaseTemplate doesn't have this property
          timeEstimate: "2-4 weeks",
          techStack: ["Next.js", "PostgreSQL", "Tailwind CSS"],
          popularity: t.avg_rating ? Math.round(t.avg_rating * 20) : 75,
          lastUpdated: t.updated_at ? new Date(t.updated_at).toISOString().split('T')[0] : undefined,
          type: t.type,
          icon: t.icon,
          gradient: t.gradient,
          border: t.border,
          text: t.text,
          subtext: t.subtext,
          is_active: t.is_active,
          created_at: t.created_at,
          updated_at: t.updated_at,
          featureCount: t.feature_count || 0, // Add feature count from API
          is_custom: t.is_custom, // Add is_custom field
        };
      })
    : [];

  // Debug logging
  console.log('[TemplateSelectionStep] Debug:', {
    hasCombined: !!combined,
    hasData: !!combined?.data,
    dataType: typeof combined?.data,
    isArray: Array.isArray(combined?.data),
    dataLength: combined?.data?.length || 0,
    templatesLength: templates.length,
    paginationState,
    templates: templates.map((t) => ({ id: t.id, title: t.title, category: t.category })),
  });

  const getCategories = () => {
    const categoryMap = new Map<string, { name: string; icon: React.ComponentType<{ className?: string }>; count: number }>();
    // All category: prefer live total when currently filtered by 'all',
    // otherwise show the last cached overall total (if any)
    const liveAllTotal = paginationState.selectedCategory === 'all' ? (paginationState.total || 0) : 0;
    const cachedAllTotal = categoryCounts['all'] ?? 0;
    categoryMap.set("all", { name: "All Templates", icon: Globe, count: Math.max(liveAllTotal, cachedAllTotal) });

    // Build chips from the union of all categories we have ever seen
    Array.from(knownCategories)
      .filter((c) => c !== 'all')
      .forEach((categoryId) => {
        const lower = categoryId.toLowerCase();
        let icon = Code;
        if (lower.includes('marketing') || lower.includes('branding')) icon = Zap;
        else if (lower.includes('seo') || lower.includes('content')) icon = BarChart3;
        else if (lower.includes('food') || lower.includes('delivery')) icon = Users;

        // Prefer cached count for this category (set when that filter is active).
        // Do NOT fallback to visible page count to avoid misleading numbers.
        const count = categoryCounts[categoryId];

        categoryMap.set(categoryId, {
          name: categoryId,
          icon,
          // If count is unknown, represent as 0 in data and handle placeholder in UI
          count: typeof count === 'number' ? count : 0,
        });
      });

    return Array.from(categoryMap.entries()).map(([id, data]) => ({ id, ...data }));
  };

  const categories = getCategories();

  const getComplexityColor = (complexity: number) => {
    if (complexity <= 2) return "bg-emerald-900/40 text-emerald-300 border border-emerald-800"
    if (complexity <= 3) return "bg-amber-900/40 text-amber-300 border border-amber-800"
    return "bg-rose-900/40 text-rose-300 border border-rose-800"
  }

  const getComplexityLabel = (complexity: number) => {
    if (complexity <= 2) return "Simple"
    if (complexity <= 3) return "Moderate"
    return "Complex"
  }

  // Truncate helper to restrict displayed characters
  const TITLE_MAX_CHARS = 15;
  const DESC_MAX_CHARS = 120;
  const truncate = (value: string | undefined | null, max: number) => {
    const v = (value || '').trim();
    if (v.length <= max) return v;
    return v.slice(0, Math.max(0, max - 1)) + '…';
  };

  const handleCreateTemplate = async (templateData: Partial<DatabaseTemplate>): Promise<DatabaseTemplate> => {
    try {
      const created = await createTemplate({
        ...(templateData as any),
        // Ensure backend routes to custom_templates table
        is_custom: true,
        source: 'custom',
        // Attach user id so custom template is associated with creator
        user_id: (user as any)?.id,
      } as any);
      setShowCustomForm(false);
      return created;
    } catch (error) {
      console.error('[TemplateSelectionStep] Error creating template:', error);
      // Re-throw to satisfy the return type contract when errors should propagate
      throw error as Error;
    }
  };

  const handleUpdateTemplate = async (id: string, templateData: Partial<DatabaseTemplate>) => {
    try {
      // Find the template to determine if it's custom
      const template = templates.find(t => t.id === id);
      const isCustom = template?.is_custom || false;
      
      await updateTemplate(id, templateData, isCustom);
      setEditingTemplate(null);
    } catch (error) {
      console.error('[TemplateSelectionStep] Error updating template:', error);
      // Show user-friendly error message
      const errorMessage = error instanceof Error ? error.message : 'Failed to update template';
      alert(`Error updating template: ${errorMessage}`);
    }
  };

  const handleDeleteTemplate = async () => {
    if (!deletingTemplate) return;
    setDeleteLoading(true);
    try {
      // Find the template to determine if it's custom
      const template = templates.find(t => t.id === deletingTemplate.id);
      const isCustom = template?.is_custom || false;
      
      await deleteTemplate(deletingTemplate.id, isCustom);
      setDeletingTemplate(null);
    } catch (error) {
      console.error('[TemplateSelectionStep] Error deleting template:', error);
      // Show user-friendly error message
      const errorMessage = error instanceof Error ? error.message : 'Failed to delete template';
      alert(`Error deleting template: ${errorMessage}`);
    } finally {
      setDeleteLoading(false);
    }
  };

  if (loading && templates.length === 0) {
    return (
      <div className="max-w-7xl mx-auto space-y-6">
        <div className="text-center space-y-3">
          <h1 className="text-4xl font-bold text-white">Loading Templates...</h1>
          <p className="text-xl text-white/60">Fetching templates from /merged API</p>
        </div>
        <div className="flex justify-center">
          <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-orange-500"></div>
        </div>
      </div>
    );
  }

  if (error) {
    // Check if this is an authentication error
    const isAuthError = error.includes('Please sign in') || error.includes('Authentication required');
    
    return (
      <div className="max-w-7xl mx-auto space-y-6">
        <div className="text-center space-y-3">
          {isAuthError ? (
            <>
              <div className="flex items-center justify-center space-x-2 text-orange-400">
                <AlertCircle className="h-6 w-6" />
                <h1 className="text-2xl font-bold">Sign In Required</h1>
              </div>
              <p className="text-white/60">{error}</p>
              <div className="flex justify-center space-x-4">
                <Button
                  onClick={() => window.location.href = '/signin'}
                  className="bg-orange-500 hover:bg-orange-400 text-black"
                >
                  Sign In
                </Button>
                <Button
                  onClick={() => {
                    // Try to fetch public templates without user ID
                    fetchTemplatesWithPagination({
                      page: 0,
                      pageSize: paginationState.pageSize,
                      category: selectedCategory,
                      search: searchQuery,
                      resetPagination: true,
                    });
                  }}
                  variant="outline"
                  className="border-white/20 text-white hover:bg-white/10"
                >
                  Browse Public Templates
                </Button>
              </div>
            </>
          ) : (
            <>
              <div className="flex items-center justify-center space-x-2 text-red-400">
                <AlertCircle className="h-6 w-6" />
                <h1 className="text-2xl font-bold">Error Loading Templates</h1>
              </div>
              <p className="text-white/60">{error}</p>
              <Button
                onClick={() =>
                  fetchTemplatesWithPagination({
                    page: 0,
                    pageSize: paginationState.pageSize,
                    category: selectedCategory,
                    search: searchQuery,
                    resetPagination: true,
                  })
                }
                className="bg-orange-500 hover:bg-orange-400 text-black"
              >
                Retry
              </Button>
            </>
          )}
        </div>
      </div>
    );
  }

  // Show custom template form
  if (showCustomForm) {
    return (
      <div className="max-w-4xl mx-auto space-y-6">
        <div className="text-center space-y-3">
          <h1 className="text-4xl font-bold text-white">Create Custom Template</h1>
          <p className="text-xl text-white/60">Design your own project template</p>
        </div>
        <CustomTemplateForm
          onSubmit={async (templateData) => {
            await handleCreateTemplate(templateData);
          }}
          onCancel={() => setShowCustomForm(false)}
        />
      </div>
    )
  }

  // Show edit template form
  if (editingTemplate) {
    return (
      <div className="max-w-4xl mx-auto space-y-6">
        <div className="text-center space-y-3">
          <h1 className="text-4xl font-bold text-white">Edit Template</h1>
          <p className="text-xl text-white/60">Modify your template settings</p>
        </div>
        <EditTemplateForm
          template={editingTemplate}
          onSubmit={handleUpdateTemplate}
          onCancel={() => setEditingTemplate(null)}
        />
      </div>
    )
  }

  // Show delete confirmation dialog
  if (deletingTemplate) {
    return (
      <>
        <div className="max-w-7xl mx-auto space-y-6">
          {/* Header */}
          <div className="text-center space-y-3">
            <h1 className="text-4xl font-bold text-white">Choose Your Project Template</h1>
            <p className="text-xl text-white/60 max-w-3xl mx-auto">
              Select from our comprehensive library of professionally designed templates
            </p>
          </div>
        </div>
        <DeleteConfirmationDialog
          templateTitle={deletingTemplate.title}
          onConfirm={handleDeleteTemplate}
          onCancel={() => setDeletingTemplate(null)}
          loading={deleteLoading}
        />
      </>
    )
  }

  return (
    <div className="max-w-7xl mx-auto space-y-6">
      {/* Header */}
      <div className="text-center space-y-3">
        <h1 className="text-4xl font-bold text-white">Choose Your Project Template</h1>
        <p className="text-xl text-white/60 max-w-3xl mx-auto">
          Select from our comprehensive library of professionally designed templates
        </p>
        {!user?.id && (
          <div className="bg-orange-500/10 border border-orange-500/20 rounded-lg p-4 max-w-2xl mx-auto">
            <p className="text-orange-300 text-sm">
              You&apos;re currently viewing public templates. 
              <Button
                variant="link"
                onClick={() => window.location.href = '/signin'}
                className="text-orange-400 hover:text-orange-300 p-0 h-auto font-semibold ml-1"
              >
                Sign in
              </Button>
              {' '}to access your personal templates and create custom ones.
            </p>
          </div>
        )}
      </div>

      <div className="space-y-4">
        <div className="max-w-2xl mx-auto relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-white/40 h-5 w-5" />
          <Input
            placeholder="Search templates, features, or technologies..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10 h-12 text-lg border border-white/10 bg-white/5 text-white placeholder:text-white/40 focus:border-white/30 focus:ring-white/30 rounded-xl"
          />
          {paginationState.loading && (
            <div className="absolute right-3 top-1/2 -translate-y-1/2">
              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-orange-500"></div>
            </div>
          )}
        </div>

        {(() => {
          const renderChip = (category: { id: string; name: string; icon: React.ComponentType<{ className?: string }>; count: number }) => {
            const Icon = category.icon;
            const active = selectedCategory === category.id;
            const knownCount = category.id === 'all'
              ? Math.max(
                  selectedCategory === 'all' ? (paginationState.total || 0) : 0,
                  categoryCounts['all'] ?? 0
                )
              : categoryCounts[category.id];
            // Fallback to currently visible items count for initial render if unknown
            const fallbackCount = category.id === 'all' ? templates.length : templates.filter((t) => t.category === category.id).length;
            const displayCount = typeof knownCount === 'number' ? knownCount : fallbackCount;
            return (
              <button
                key={`cat-${category.id}`}
                onClick={() => setSelectedCategory(category.id)}
                className={`shrink-0 whitespace-nowrap flex items-center space-x-3 px-6 py-3 rounded-xl border transition-all cursor-pointer ${
                  active ? "bg-orange-500 text-black border-orange-500" : "bg-white/5 text-white/80 border-white/10 hover:bg-white/10"
                }`}
              >
                <div className={`p-2 rounded-lg ${active ? "bg-white/10" : "bg-white/10"}`}>
                  <Icon className="h-5 w-5" />
                </div>
                <div className="text-left">
                  <div className="font-semibold">{category.name}</div>
                  <div className={`text-sm ${active ? "text-black/80" : "text-white/60"}`}>
                    {`${displayCount} templates`}
                  </div>
                </div>
              </button>
            );
          };

          const allChip = categories.find((c) => c.id === 'all');
          const rest = categories.filter((c) => c.id !== 'all');

          return (
            <div className="flex items-center gap-3">
              {allChip && (
                <div className="shrink-0">
                  {renderChip(allChip)}
                </div>
              )}
              <div className="relative overflow-hidden flex-1 pb-2">
                <div className="flex gap-3 whitespace-nowrap animate-scroll-x will-change-transform">
                  {rest.map(renderChip)}
                  {rest.map((c) => ({ ...c, id: `${c.id}-dup` })).map(renderChip)}
                </div>
                <style jsx>{`
                  @keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
                  .animate-scroll-x { animation: scroll-x 20s linear infinite; }
                `}</style>
              </div>
            </div>
          );
        })()}
      </div>

      {templates.length === 0 && !paginationState.loading ? (
        <div className="text-center py-12 text-white/60">
          <p>No templates found for the current filters.</p>
          <Button
            onClick={() =>
              fetchTemplatesWithPagination({
                page: 0,
                pageSize: paginationState.pageSize,
                category: 'all',
                search: '',
                resetPagination: true,
              })
            }
            className="mt-4 bg-orange-500 hover:bg-orange-400 text-black"
          >
            Reset Filters
          </Button>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {templates.map((template) => (
          <Card key={template.id} className="group bg-white/5 border-white/10 hover:border-white/20 rounded-xl shadow-sm hover:shadow-md transition-all">
            <div className="bg-white/5 px-4 py-4 border-b border-white/10">
              <div className="flex items-start justify-between mb-2">
                <div className="space-y-2 flex-1 min-w-0">
                  <CardTitle className="text-xl font-bold text-white group-hover:text-orange-400 transition-colors">
                    <div className="whitespace-nowrap overflow-hidden text-ellipsis max-w-full break-words hyphens-auto">
                      {truncate(template.title, TITLE_MAX_CHARS)}
                    </div>
                  </CardTitle>
                  <div className="flex items-center space-x-2">
                    <Badge className={`${getComplexityColor(template.complexity)} font-medium px-3 py-1 rounded-full`}>{getComplexityLabel(template.complexity)}</Badge>
                    {template.popularity && (
                      <div className="flex items-center space-x-1 bg-white/10 px-2 py-1 rounded-full text-white/80">
                        <Star className="h-4 w-4 text-amber-400 fill-current" />
                        <span className="text-sm font-semibold">{template.popularity}%</span>
                      </div>
                    )}
                  </div>
                </div>
                {/* Edit and Delete buttons - only show for database templates */}
                {template.id && template.id !== "marketing-website" && template.id !== "saas-platform" && (
                  <div className="flex items-center space-x-1 ml-2">
                    <Button
                      size="sm"
                      variant="ghost"
                      onClick={(e) => {
                        e.stopPropagation()
                        setEditingTemplate(template as DatabaseTemplate)
                      }}
                      className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 cursor-pointer"
                    >
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button
                      size="sm"
                      variant="ghost"
                      onClick={(e) => {
                        e.stopPropagation()
                        setDeletingTemplate(template as DatabaseTemplate)
                      }}
                      className="h-8 w-8 p-0 text-white/60 hover:text-red-400 hover:bg-red-400/10 cursor-pointer"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                )}
              </div>
              {(() => {
                const raw = (template.description || '').trim()
                const needsToggle = raw.length > DESC_MAX_CHARS
                const displayText = truncate(template.description, DESC_MAX_CHARS)
                return (
                  <div>
                    <p className={`text-white/80 text-sm leading-relaxed break-words hyphens-auto line-clamp-2 overflow-hidden`}>
                      {displayText}
                    </p>
                    {needsToggle && (
                      <button
                        type="button"
                        onClick={(e) => {
                          e.stopPropagation()
                          setDescDialogData({ title: template.title, description: raw })
                          setDescDialogOpen(true)
                        }}
                        className="mt-1 text-xs text-orange-400 hover:text-orange-300 font-medium"
                      >
                        Show more
                      </button>
                    )}
                  </div>
                )
              })()}

            </div>

            <CardContent className="p-4 flex flex-col h-full text-white/80">
              <div className="flex-1 space-y-4">
                <div className="flex items-center justify-between text-sm bg-white/5 px-3 py-2 rounded-lg">
                  <div className="flex items-center space-x-2">
                    <Clock className="h-4 w-4 text-orange-400" />
                    <span className="font-medium">{template.timeEstimate}</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Layers className="h-4 w-4 text-emerald-400" />
                    <span className="font-medium">{template.featureCount || 0} features</span>
                  </div>
                </div>

                <div className="space-y-2">
                  <div>
                    <h4 className="font-semibold text-sm text-white mb-1 flex items-center">
                      <span className="w-2 h-2 bg-orange-500 rounded-full mr-2"></span>
                      Key Features
                    </h4>
                    <div className="flex flex-wrap gap-1">
                      {template.features.slice(0, 3).map((feature, index) => (
                        <Badge key={index} variant="outline" className="text-xs bg-white/5 border-white/10 text-white/80 px-3 py-2 rounded-full">
                          {feature}
                        </Badge>
                      ))}
                      {template.features.length > 3 && (
                        <Badge variant="outline" className="text-xs bg-white/5 border-white/10 text-white/70 px-3 py-2 rounded-full">
                          +{template.features.length - 3} more
                        </Badge>
                      )}
                    </div>
                  </div>
                </div>
              </div>

              <div className="mt-4">
                <Button onClick={() => onNext(template)} className="w-full bg-orange-500 hover:bg-orange-400 text-black font-semibold py-2 rounded-lg shadow">
                  <span className="flex items-center justify-center cursor-pointer">
                    Select Template
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </span>
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
        </div>
      )}

      <div className="flex justify-center pt-6">
        <div className="flex items-center space-x-2">
          <Button
            onClick={() => {
              if (paginationState.currentPage > 0) {
                fetchTemplatesWithPagination({
                  page: paginationState.currentPage - 1,
                  pageSize: paginationState.pageSize,
                  category: paginationState.selectedCategory,
                  search: paginationState.searchQuery,
                });
              }
            }}
            disabled={paginationState.currentPage === 0 || paginationState.loading}
            variant="outline"
            size="sm"
            className="border-white/20 text-white hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            ‹
          </Button>

          {(() => {
            const totalPages = Math.max(1, Math.ceil(paginationState.total / paginationState.pageSize));
            const currentPage = paginationState.currentPage;
            const pages = [];

            // First page
            pages.push(
              <Button
                key={1}
                onClick={() => {
                  if (currentPage !== 0) {
                    fetchTemplatesWithPagination({
                      page: 0,
                      pageSize: paginationState.pageSize,
                      category: paginationState.selectedCategory,
                      search: paginationState.searchQuery,
                    });
                  }
                }}
                variant={currentPage === 0 ? "default" : "outline"}
                size="sm"
                className={currentPage === 0 ? "bg-orange-500 text-black border-orange-500 hover:bg-orange-400" : "border-white/20 text-white hover:bg-white/10"}
              >
                1
              </Button>
            );

            // Ellipsis before current page
            if (currentPage > 3) {
              pages.push(<span key="ellipsis1" className="px-2 text-white/40">...</span>);
            }

            // Pages around current
            for (let i = Math.max(1, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {
              if (i > 0 && i < totalPages) {
                pages.push(
                  <Button
                    key={i + 1}
                    onClick={() => {
                      fetchTemplatesWithPagination({
                        page: i,
                        pageSize: paginationState.pageSize,
                        category: paginationState.selectedCategory,
                        search: paginationState.searchQuery,
                      });
                    }}
                    variant={currentPage === i ? "default" : "outline"}
                    size="sm"
                    className={currentPage === i ? "bg-orange-500 text-black border-orange-500 hover:bg-orange-400" : "border-white/20 text-white hover:bg-white/10"}
                  >
                    {i + 1}
                  </Button>
                );
              }
            }

            // Ellipsis after current page
            if (currentPage < totalPages - 3) {
              pages.push(<span key="ellipsis2" className="px-2 text-white/40">...</span>);
            }

            // Last page (only if not already rendered by the middle range)
            if (totalPages > 1 && currentPage < totalPages - 2) {
              pages.push(
                <Button
                  key={totalPages}
                  onClick={() => {
                    fetchTemplatesWithPagination({
                      page: totalPages - 1,
                      pageSize: paginationState.pageSize,
                      category: paginationState.selectedCategory,
                      search: paginationState.searchQuery,
                    });
                  }}
                  variant={currentPage === totalPages - 1 ? "default" : "outline"}
                  size="sm"
                  className={currentPage === totalPages - 1 ? "bg-orange-500 text-black border-orange-500 hover:bg-orange-400" : "border-white/20 text-white hover:bg-white/10"}
                >
                  {totalPages}
                </Button>
              );
            }

            return pages;
          })()}

          <Button
            onClick={() => loadMoreTemplates()}
            disabled={paginationState.total <= paginationState.pageSize || !paginationState.hasMore || paginationState.loading}
            variant="outline"
            size="sm"
            className="border-white/20 text-white hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            ›
          </Button>
        </div>
      </div>

      <Card className="group border-dashed border-2 border-white/15 bg-white/5 hover:border-white/25 transition-all cursor-pointer" onClick={() => user?.id ? setShowCustomForm(true) : window.location.href = '/signin'}>
        <CardContent className="text-center py-16 px-8 text-white/80">
          <div className="w-20 h-20 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6">
            <Plus className="h-10 w-10 text-orange-400" />
          </div>
          <h3 className="text-2xl font-bold text-white mb-3">
            {user?.id ? 'Create Custom Template' : 'Sign In to Create Templates'}
          </h3>
          <p className="mb-8 max-w-md mx-auto text-lg leading-relaxed">
            {user?.id 
              ? "Don't worry, we'll guide you through each step. a custom project type with your specific requirements and tech stack."
              : "Sign in to create custom project templates with your specific requirements and tech stack."
            }
          </p>
          <Button variant="outline" className="border-white/20 text-white hover:bg-white/10">
            {user?.id ? (
              <>
                <Plus className="mr-2 h-5 w-5" />
                Create Custom Template
              </>
            ) : (
              <>
                <User className="mr-2 h-5 w-5" />
                Sign In to Create
              </>
            )}
          </Button>
        </CardContent>
      </Card>

      <div className="text-center py-4">
        <p className="text-white/70">
          {searchQuery ? (
            <>
              Showing {templates.length} template{templates.length !== 1 ? "s" : ""} matching &quot;{searchQuery}&quot;
              {paginationState.total > 0 && ` (${paginationState.total} total)`}
            </>
          ) : (
            <>
              Showing {templates.length} template{templates.length !== 1 ? "s" : ""}
              {paginationState.total > 0 && ` of ${paginationState.total} total`}
            </>
          )}
          {paginationState.total > 0 && (
            <span className="block text-sm text-white/50 mt-1">
              Page {paginationState.currentPage + 1} of {Math.ceil(paginationState.total / paginationState.pageSize)}
            </span>
          )}
        </p>
      </div>
      <Dialog open={descDialogOpen} onOpenChange={setDescDialogOpen}>
        <DialogContent className="bg-white/10 border-white/20 text-white" showCloseButton>
          <DialogHeader>
            <DialogTitle className="text-white">{descDialogData.title}</DialogTitle>
            <DialogDescription className="text-white/80 whitespace-pre-wrap">
              {descDialogData.description}
            </DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>
    </div>
  )
}

// Feature Selection Step Component
function FeatureSelectionStep({
  template,
  onNext,
  onBack,
}: { template: Template; onNext: (selected: TemplateFeature[]) => void; onBack: () => void }) {
  const { fetchFeatures, createFeature, updateFeature, deleteFeature } = useTemplates()
  const [features, setFeatures] = useState<TemplateFeature[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
  const [showAIModal, setShowAIModal] = useState(false)
  const [expandedFeatureDescriptions, setExpandedFeatureDescriptions] = useState<Record<string, boolean>>({})
  const [featureDescDialogOpen, setFeatureDescDialogOpen] = useState(false)
  const [featureDescDialogData, setFeatureDescDialogData] = useState<{ title: string; description: string }>({ title: '', description: '' })
  const [rulesDialogOpen, setRulesDialogOpen] = useState(false)
  const [rulesForFeature, setRulesForFeature] = useState<{ featureId: string; featureName: string } | null>(null)
  const [featureRules, setFeatureRules] = useState<Array<string | { requirement?: string; rules?: string[] }>>([])
  const FEATURE_DESC_MAX_CHARS = 180
  const truncateFeatureText = (value: string | undefined | null, max: number) => {
    const v = (value || '').trim()
    if (v.length <= max) return v
    return v.slice(0, Math.max(0, max - 1)) + '…'
  }

  const load = async () => {
    try {
      setLoading(true)
      console.log('[FeatureSelectionStep] Loading features for template:', template.id)
      console.log('[FeatureSelectionStep] Template object:', template)
      const data = await fetchFeatures(template.id)
      console.log('[FeatureSelectionStep] Raw features received:', data)
      console.log('[FeatureSelectionStep] API endpoint called:', `/api/templates/${template.id}/features`)
      console.log('[FeatureSelectionStep] Features by type:', {
        essential: data.filter(f => f.feature_type === 'essential').length,
        suggested: data.filter(f => f.feature_type === 'suggested').length,
        custom: data.filter(f => f.feature_type === 'custom').length,
        total: data.length
      })
      console.log('[FeatureSelectionStep] All features with types:', data.map(f => ({ name: f.name, type: f.feature_type })))
      setFeatures(data)
    } catch (e) {
      console.error('[FeatureSelectionStep] Error loading features:', e)
      setError(e instanceof Error ? e.message : 'Failed to load features')
    } finally {
      setLoading(false)
    }
  }

  // Initial load
  useEffect(() => { load() }, [template.id])


  const handleAddAIAnalyzed = async (payload: { name: string; description: string; complexity: 'low' | 'medium' | 'high'; logic_rules?: string[]; requirements?: Array<{ text: string; rules: string[] }>; business_rules?: Array<{ requirement: string; rules: string[] }> }) => {
    await createFeature(template.id, {
      name: payload.name,
      description: payload.description,
      feature_type: 'custom',
      complexity: payload.complexity,
      is_default: false,
      created_by_user: true,
      // @ts-expect-error backend accepts additional fields
      logic_rules: payload.logic_rules,
      business_rules: payload.business_rules ?? (payload.requirements ? payload.requirements.map(r => ({ requirement: r.text, rules: r.rules || [] })) : undefined),
    })
    await load()
  }

  const [editingFeature, setEditingFeature] = useState<TemplateFeature | null>(null)

  const handleUpdate = async (f: TemplateFeature, updates: Partial<TemplateFeature>) => {
    // Use the actual id field directly (no need to extract from feature_id)
    await updateFeature(f.id, { ...updates, isCustom: f.feature_type === 'custom' })
    await load()
  }

  const handleDelete = async (f: TemplateFeature) => {
    // Use the actual id field directly (no need to extract from feature_id)
    await deleteFeature(f.id, { isCustom: f.feature_type === 'custom' })
    setSelectedIds((prev) => {
      const next = new Set(prev)
      next.delete(f.id)
      return next
    })
    await load()
  }

  const toggleSelect = (f: TemplateFeature) => {
    setSelectedIds((prev) => {
      const next = new Set(prev)
      if (next.has(f.id)) next.delete(f.id)
      else next.add(f.id)
      return next
    })
  }

  const extractRules = (f: TemplateFeature): Array<string | { requirement?: string; rules?: string[] }> => {
    // Prefer structured business_rules if available; fall back to additional_business_rules
    const candidate = (f as any).business_rules ?? (f as any).additional_business_rules ?? []
    if (Array.isArray(candidate)) return candidate
    if (candidate && typeof candidate === 'object') return Object.entries(candidate).map(([k, v]) => `${k}: ${v as string}`)
    if (typeof candidate === 'string') return [candidate]
    return []
  }

  const section = (title: string, list: TemplateFeature[]) => (
    <div>
      <h3 className="text-lg font-semibold text-white mb-3">{title} ({list.length})</h3>
      <div className={`${list.length > 6 ? 'max-h-[480px] overflow-y-auto pr-2' : ''}`}>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {list.map((f) => (
            <Card key={f.id} className={`bg-white/5 ${selectedIds.has(f.id) ? 'border-orange-400' : 'border-white/10'}`}>
              <CardHeader className="pb-3">
                <CardTitle className="text-white flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Checkbox
                      checked={selectedIds.has(f.id)}
                      onCheckedChange={() => toggleSelect(f)}
                      className="border-white/20 data-[state=checked]:bg-orange-500 data-[state=checked]:border-orange-500"
                    />
                    <span>{f.name}</span>
                  </div>
                  {f.feature_type === 'custom' && (
                    <div className="flex gap-2">
                      <Button
                        size="sm"
                        variant="outline"
                        className="border-white/20 text-white hover:bg-white/10"
                        onClick={() => setEditingFeature(f)}
                      >
                        Edit
                      </Button>
                      <Button
                        size="sm"
                        variant="outline"
                        className="border-red-500 text-red-300 hover:bg-red-500/10"
                        onClick={() => handleDelete(f)}
                      >
                        Delete
                      </Button>
                    </div>
                  )}
                </CardTitle>
              </CardHeader>
              <CardContent className="text-white/80 text-sm space-y-2">
                {(() => {
                  const raw = (f.description || 'No description provided.').trim()
                  const needsToggle = raw.length > FEATURE_DESC_MAX_CHARS
                  const displayText = truncateFeatureText(raw, FEATURE_DESC_MAX_CHARS)
                  return (
                    <div>
                      <p className={`leading-relaxed break-words hyphens-auto line-clamp-2 overflow-hidden`}>{displayText}</p>
                      {needsToggle && (
                        <button
                          type="button"
                          onClick={(e) => {
                            e.stopPropagation()
                            setFeatureDescDialogData({ title: f.name, description: raw })
                            setFeatureDescDialogOpen(true)
                          }}
                          className="mt-1 text-xs text-orange-400 hover:text-orange-300 font-medium"
                        >
                          Show more
                        </button>
                      )}
                    </div>
                  )
                })()}
                <div className="flex gap-2 text-xs">
                  <Badge variant="outline" className="bg-white/5 border-white/10">{f.feature_type}</Badge>
                  <Badge variant="outline" className="bg-white/5 border-white/10">{f.complexity}</Badge>
                  {typeof f.usage_count === 'number' && <Badge variant="outline" className="bg-white/5 border-white/10">used {f.usage_count}</Badge>}
                  <Button
                    size="sm"
                    variant="outline"
                    className="ml-auto h-6 px-2 border-orange-500 text-orange-300 hover:bg-orange-500/10"
                    onClick={async (e) => {
                      e.stopPropagation()
                      setRulesForFeature({ featureId: f.id, featureName: f.name })
                      setFeatureRules(extractRules(f))
                      setRulesDialogOpen(true)
                    }}
                  >
                    Rules
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )

  if (loading) {
    return <div className="text-center py-20 text-white/60">Loading features...</div>
  }
  if (error) {
    return <div className="text-center py-20 text-red-400">{error}</div>
  }

  const essentials = features.filter(f => f.feature_type === 'essential')
  const suggested = features.filter(f => f.feature_type === 'suggested')
  const custom = features.filter(f => f.feature_type === 'custom')

  return (
    <div className="max-w-7xl mx-auto space-y-8">
      <div className="text-center space-y-4">
        <h1 className="text-4xl font-bold text-white">Select Features for {template.title}</h1>
        <p className="text-xl text-white/60 max-w-3xl mx-auto">Choose defaults or add your own custom features.</p>
      </div>

      {features.length > 0 && section('Template Features', features)}

      {/* Add custom feature with AI */}
      <div className="bg-white/5 border border-white/10 rounded-xl p-6 space-y-4">
        <div className="text-center space-y-2">
          <h3 className="text-white font-semibold text-lg">Add Custom Feature</h3>
          <p className="text-white/60 text-sm">Use AI to analyze and create custom features for your project</p>
        </div>
        <div className="flex justify-center">
          <Button
            onClick={() => setShowAIModal(true)}
            className="bg-orange-500 hover:bg-orange-400 text-black font-semibold px-8 py-3 rounded-lg cursor-pointer"
          >
            <Zap className="mr-2 h-5 w-5" />
            Analyze with AI
          </Button>
        </div>
        <div className="text-center text-white/60 text-sm">
          AI will analyze your requirements and create optimized features
        </div>
      </div>

      {section('Your Custom Features', custom)}

      {(showAIModal || editingFeature) && (
        <AICustomFeatureCreator
          projectType={template.type || template.title}
          onAdd={async (f) => { 
            if (editingFeature) {
              // Update existing feature
              await handleUpdate(editingFeature, f)
              setEditingFeature(null)
            } else {
              // Add new feature
              await handleAddAIAnalyzed(f)
              setShowAIModal(false)
            }
          }}
          onClose={() => {
            setShowAIModal(false)
            setEditingFeature(null)
          }}
          editingFeature={editingFeature || undefined}
        />
      )}

      <div className="text-center py-4">
        <div className="space-x-4">
          <Button variant="outline" onClick={onBack} className="border-white/20 text-white hover:bg-white/10 cursor-pointer">Back</Button>
          <Button
            onClick={() => onNext(features.filter(f => selectedIds.has(f.id)))}
            disabled={selectedIds.size < 3}
            className={`bg-orange-500 hover:bg-orange-400 text-black cursor-pointer font-semibold py-2 rounded-lg shadow ${selectedIds.size < 3 ? 'opacity-50 cursor-not-allowed' : ''}`}
          >
            Continue
          </Button>
        </div>
        <div className="text-white/60 text-sm mt-2">Select at least 3 features to continue. Selected {selectedIds.size}/3.</div>
      </div>
      <Dialog open={featureDescDialogOpen} onOpenChange={setFeatureDescDialogOpen}>
        <DialogContent className="bg-white/10 border-white/20 text-white" showCloseButton>
          <DialogHeader>
            <DialogTitle className="text-white">{featureDescDialogData.title}</DialogTitle>
            <DialogDescription className="text-white/80 whitespace-pre-wrap">
              {featureDescDialogData.description}
            </DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>
      <Dialog open={rulesDialogOpen} onOpenChange={setRulesDialogOpen}>
        <DialogContent className="bg-white/10 border-white/20 text-white" showCloseButton>
          <DialogHeader>
            <DialogTitle className="text-white">{rulesForFeature?.featureName || 'Feature Rules'}</DialogTitle>
            <DialogDescription className="text-white/80">
              {featureRules.length === 0 ? (
                <div className="py-2">No rules found for this feature.</div>
              ) : (
                <ul className="list-disc pl-5 space-y-2">
                  {featureRules.map((r, idx) => {
                    if (typeof r === 'string') return <li key={idx} className="text-sm leading-relaxed">{r}</li>
                    const req = (r as any).requirement
                    const rules = (r as any).rules
                    return (
                      <li key={idx} className="text-sm leading-relaxed">
                        {req ? <div className="font-medium text-white/90">{req}</div> : null}
                        {Array.isArray(rules) && rules.length > 0 && (
                          <ul className="list-disc pl-5 mt-1 space-y-1">
                            {rules.map((rr: string, j: number) => (
                              <li key={j} className="text-xs text-white/80">{rr}</li>
                            ))}
                          </ul>
                        )}
                      </li>
                    )
                  })}
                </ul>
              )}
            </DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>
    </div>
  )
}

// Business Questions Step Component
function BusinessQuestionsStep({
  template,
  selected,
  onBack,
  onDone,
}: { template: Template; selected: TemplateFeature[]; onBack: () => void; onDone: (completeData: any, recommendations: any) => void }) {
  const [businessQuestions, setBusinessQuestions] = useState<string[]>([])
  const [businessAnswers, setBusinessAnswers] = useState<Record<number, string>>({})
  const [loading, setLoading] = useState(true)
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const selectedKey = selected.map(s => s.id).join(',')

  useEffect(() => {
    const load = async () => {
      try {
        setLoading(true)
        setError(null)
        if (selected.length === 0) {
          setError('No features selected')
          return
        }
        const token = getAccessToken()
        const resp = await fetch(`${BACKEND_URL}/api/questions/generate-comprehensive-business-questions`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) },
          body: JSON.stringify({
            allFeatures: selected,
            projectName: template.title,
            projectType: template.type || template.category,
            totalFeatures: selected.length,
          }),
        })
        if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
        const data = await resp.json()
        const qs: string[] = data?.data?.businessQuestions || []
        setBusinessQuestions(qs)
        const init: Record<number, string> = {}
        qs.forEach((_, i) => (init[i] = ''))
        setBusinessAnswers(init)
      } catch (e: any) {
        setError(e?.message || 'Failed to load questions')
      } finally {
        setLoading(false)
      }
    }
    load()
  }, [template.id, selectedKey])

  const answeredCount = Object.values(businessAnswers).filter((a) => a && a.trim()).length

  if (loading) {
    return (
      <div className="flex items-center justify-center py-24">
        <div className="text-center text-white/80">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-500 mx-auto mb-4"></div>
          <p>AI is generating comprehensive business questions...</p>
          <p className="text-white/50 text-sm mt-2">Analyzing {selected.length} features as integrated system</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="text-center py-20">
        <div className="max-w-md mx-auto bg-red-500/10 border border-red-500/30 rounded-lg p-6 text-red-300">
          <div className="font-semibold mb-2">Error Loading Questions</div>
          <div className="mb-4">{error}</div>
          <div className="space-x-3">
            <Button onClick={() => location.reload()} className="bg-red-500 hover:bg-red-400 text-black">Try Again</Button>
            <Button variant="outline" onClick={onBack} className="border-white/20 text-white hover:bg-white/10">Go Back</Button>
          </div>
        </div>
      </div>
    )
  }

  const handleSubmit = async () => {
    try {
      setSubmitting(true)
      const answeredCount = Object.values(businessAnswers).filter((a) => a && a.trim()).length
      if (answeredCount === 0) return

      const completeData = {
        projectName: template.title,
        projectType: template.type || template.category,
        allFeatures: selected,
        businessQuestions,
        businessAnswers,
        timestamp: new Date().toISOString(),
        featureName: `${template.title} - Integrated System`,
        description: `Complete ${template.type || template.category} system with ${selected.length} integrated features`,
        requirements: (selected as any[]).flatMap((f: any) => f.requirements || []),
        complexity:
          (selected as any[]).some((f: any) => f.complexity === 'high')
            ? 'high'
            : (selected as any[]).some((f: any) => f.complexity === 'medium')
              ? 'medium'
              : 'low',
        logicRules: (selected as any[]).flatMap((f: any) => f.logicRules || []),
      }

      const resp = await fetch(`${BACKEND_URL}/api/v1/select`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(completeData),
      })
      if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
      const recommendations = await resp.json()
      onDone(completeData, recommendations)
    } catch (e) {
      console.error('Tech stack selection failed', e)
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div className="space-y-6">
      <div className="text-center space-y-1">
        <h2 className="text-2xl font-bold text-white">Business Context Questions</h2>
        <p className="text-white/60">Help us refine recommendations by answering these questions.</p>
        <p className="text-sm text-orange-400">Analyzing {selected.length} integrated features</p>
      </div>

      <div className="space-y-4">
        {businessQuestions.map((q, i) => (
          <div key={i} className="bg-white/5 border border-white/10 rounded-lg p-4">
            <label className="block text-sm font-medium text-white mb-2">
              <span className="inline-flex items-center gap-2">
                <span className="bg-orange-500/20 text-orange-300 rounded-full w-6 h-6 flex items-center justify-center text-xs font-semibold">{i + 1}</span>
                <span>{q}</span>
              </span>
            </label>
            <textarea
              rows={3}
              value={businessAnswers[i] || ''}
              onChange={(e) => setBusinessAnswers((prev) => ({ ...prev, [i]: e.target.value }))}
              className="w-full bg-white/10 border border-white/20 text-white rounded-md p-3 placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-orange-400/50"
              placeholder="Your answer..."
            />
          </div>
        ))}
      </div>

      <div className="bg-white/5 border border-white/10 rounded-lg p-4 text-white/80">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
          <div>Questions answered: {answeredCount} of {businessQuestions.length}</div>
          <div>Completion: {businessQuestions.length ? Math.round((answeredCount / businessQuestions.length) * 100) : 0}%</div>
          <div>Features analyzing: {selected.length}</div>
        </div>
      </div>

      <div className="text-center pt-2">
        <div className="space-x-4">
          <Button variant="outline" onClick={onBack} className="border-white/20 text-white hover:bg-white/10">Back</Button>
          <Button
            disabled={submitting || answeredCount === 0}
            onClick={handleSubmit}
            className={`bg-orange-500 hover:bg-orange-400 text-black font-semibold py-2 rounded-lg shadow ${submitting || answeredCount === 0 ? 'opacity-50 cursor-not-allowed' : ''}`}
          >
            {submitting ? 'Getting Recommendations...' : 'Generate Technology Recommendations'}
          </Button>
        </div>
      </div>
    </div>
  )
}

// Tech Stack Summary Step
function TechStackSummaryStep({
  recommendations,
  completeData,
  onBack,
  onGenerate,
}: { recommendations: any; completeData: any; onBack: () => void; onGenerate: () => void }) {
  const functional = recommendations?.functional_requirements || {}
  const claude = recommendations?.claude_recommendations || {}
  const tech = claude?.technology_recommendations || {}

  return (
    <div className="max-w-6xl mx-auto space-y-6">
      <div className="text-center space-y-2">
        <h2 className="text-3xl font-bold text-white">Technology Stack Recommendations</h2>
        <p className="text-white/60">AI-powered recommendations for your project</p>
      </div>

      {functional?.feature_name && (
        <div className="bg-white/5 border border-white/10 rounded-xl p-6">
          <h3 className="text-xl font-bold text-white mb-4">Functional Requirements Analysis</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h4 className="font-semibold text-white/80 mb-2">Core Feature</h4>
              <div className="bg-orange-500 rounded-lg p-4">
                <div className="font-medium text-white-200">{functional.feature_name}</div>
                <div className="text-white-300 text-sm mt-1">{functional.description}</div>
              </div>
            </div>
            <div>
              {/* <h4 className="font-semibold text-white/80 mb-2">Complexity Level</h4>
              <div className="rounded-lg p-4">
                <span className="inline-block px-3 py-1 rounded-full text-sm font-medium bg-white/10 text-white">
                  {(functional.complexity_level || 'medium').toUpperCase()}
                </span>
              </div> */}
            </div>
          </div>

          {Array.isArray(functional.technical_requirements) && functional.technical_requirements.length > 0 && (
            <div className="mt-6">
              <h4 className="font-semibold text-white/80 mb-3">Technical Requirements</h4>
              <div className="flex flex-wrap gap-2">
                {functional.technical_requirements.map((req: string, i: number) => (
                  <span key={i} className="bg-emerald-500/10 text-emerald-200 px-3 py-1 rounded-full text-sm">{req}</span>
                ))}
              </div>
            </div>
          )}

          {Array.isArray(functional.business_logic_rules) && functional.business_logic_rules.length > 0 && (
            <div className="mt-6">
              <h4 className="font-semibold text-white/80 mb-3">Business Logic Rules</h4>
              <div className="space-y-2">
                {functional.business_logic_rules.map((rule: string, i: number) => (
                  <div key={i} className="bg-orange-500/10 border-l-4 border-orange-400 p-3 text-orange-200 text-sm">{rule}</div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      <div className="bg-white/5 border border-white/10 rounded-xl p-6">
        <h3 className="text-xl font-bold text-white mb-6">AI Technology Recommendations</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {tech?.frontend && (
            <div className="bg-blue-500/10 rounded-lg p-5">
              <div className="font-bold text-blue-200 mb-2">Frontend</div>
              <div className="text-blue-300">Framework: {tech.frontend.framework}</div>
              {Array.isArray(tech.frontend.libraries) && (
                <div className="mt-2 text-blue-300 text-sm">Libraries: {tech.frontend.libraries.join(', ')}</div>
              )}
              {tech.frontend.reasoning && <div className="mt-2 text-blue-300 text-sm">{tech.frontend.reasoning}</div>}
            </div>
          )}
          {tech?.backend && (
            <div className="bg-emerald-500/10 rounded-lg p-5">
              <div className="font-bold text-emerald-200 mb-2">Backend</div>
              <div className="text-emerald-300">Language: {tech.backend.language}</div>
              <div className="text-emerald-300">Framework: {tech.backend.framework}</div>
              {Array.isArray(tech.backend.libraries) && (
                <div className="mt-2 text-emerald-300 text-sm">Libraries: {tech.backend.libraries.join(', ')}</div>
              )}
              {tech.backend.reasoning && <div className="mt-2 text-emerald-300 text-sm">{tech.backend.reasoning}</div>}
            </div>
          )}
          {tech?.database && (
            <div className="bg-purple-500/10 rounded-lg p-5">
              <div className="font-bold text-purple-200 mb-2">Database</div>
              <div className="text-purple-300">Primary: {tech.database.primary}</div>
              {Array.isArray(tech.database.secondary) && tech.database.secondary.length > 0 && (
                <div className="mt-2 text-purple-300 text-sm">Secondary: {tech.database.secondary.join(', ')}</div>
              )}
              {tech.database.reasoning && <div className="mt-2 text-purple-300 text-sm">{tech.database.reasoning}</div>}
            </div>
          )}
        </div>
      </div>

      {claude?.implementation_strategy && (
        <div className="bg-white/5 border border-white/10 rounded-xl p-6">
          <h3 className="text-xl font-bold text-white mb-4">Implementation Strategy</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-white/80">
            <div>
              <div className="font-semibold mb-2">Architecture Pattern</div>
              <div className="bg-white/10 rounded-lg p-3">{claude.implementation_strategy.architecture_pattern}</div>
            </div>
            <div>
              <div className="font-semibold mb-2">Deployment Strategy</div>
              <div className="bg-white/10 rounded-lg p-3">{claude.implementation_strategy.deployment_strategy}</div>
            </div>
          </div>
        </div>
      )}

      <div className="text-center py-6">
        <div className="space-x-4">
          <Button variant="outline" onClick={onBack} className="border-white/20 text-white hover:bg-white/10 cursor-pointer">Back</Button>
          <Button onClick={onGenerate} className="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-6 py-2 rounded-lg font-semibold cursor-pointer">Generate Architecture Design →</Button>
        </div>
        <div className="text-white/60 text-sm mt-2">AI will design complete architecture</div>
      </div>
    </div>
  )
}

// AI Mockup Step Component
function AIMockupStep({
  template,
  selectedFeatures,
  onNext,
  onBack,
}: {
  template: Template;
  selectedFeatures: TemplateFeature[];
  onNext: () => void;
  onBack: () => void
}) {
  const [mounted, setMounted] = useState(false)
  const [wireframeData, setWireframeData] = useState<any>(null)
  const [isGenerating, setIsGenerating] = useState(false)
  const [selectedDevice, setSelectedDevice] = useState<'desktop' | 'tablet' | 'mobile'>('desktop')
  const [initialPrompt, setInitialPrompt] = useState<string>("")

  // Load state from localStorage after component mounts
  useEffect(() => {
    setMounted(true)

    if (typeof window !== 'undefined') {
      // Load device type
      const savedDevice = localStorage.getItem('wireframe_device_type')
      if (savedDevice && ['desktop', 'tablet', 'mobile'].includes(savedDevice)) {
        setSelectedDevice(savedDevice as 'desktop' | 'tablet' | 'mobile')
      }

      // Load wireframe data
      const savedWireframeData = localStorage.getItem('wireframe_data')
      if (savedWireframeData) {
        try {
          const parsed = JSON.parse(savedWireframeData)
          setWireframeData(parsed)
        } catch (error) {
          console.error('Failed to parse saved wireframe data:', error)
        }
      }
    }
  }, [])

  // Build prompt from selected features and template
  useEffect(() => {
    if (!template) return
    const featureNames = (selectedFeatures || []).map(f => f.name).filter(Boolean)
    const base = `${template.title} dashboard`
    const parts = featureNames.length > 0 ? ` with ${featureNames.join(', ')}` : ''
    const footer = '. Optimize layout and spacing. Include navigation.'
    const prompt = `${base}${parts}${footer}`
    setInitialPrompt(prompt)
  }, [template, JSON.stringify(selectedFeatures)])

  const handleWireframeGenerated = (data: any) => {
    setWireframeData(data)
    setIsGenerating(false)
  }

  const handleWireframeGenerationStart = () => {
    setIsGenerating(true)
  }

  const handleDeviceChange = (device: 'desktop' | 'tablet' | 'mobile') => {
    console.log('DEBUG: AIMockupStep handleDeviceChange called with:', device)
    console.log('DEBUG: Previous selectedDevice state:', selectedDevice)

    setSelectedDevice(device)

    // Save to localStorage (only after mounting)
    if (mounted) {
      localStorage.setItem('wireframe_device_type', device)
      console.log('DEBUG: Saved device type to localStorage:', device)
    }

    console.log('DEBUG: New selectedDevice state:', device)
  }

  // Save wireframe data to localStorage when it changes (only after mounting)
  useEffect(() => {
    if (wireframeData && mounted) {
      localStorage.setItem('wireframe_data', JSON.stringify(wireframeData))
    }
  }, [wireframeData, mounted])

  // Debug: Log when selectedDevice prop changes
  useEffect(() => {
    console.log('DEBUG: AIMockupStep selectedDevice state changed to:', selectedDevice)
  }, [selectedDevice])

  // Debug: Log when selectedDevice prop changes
  useEffect(() => {
    console.log('DEBUG: WireframeCanvas selectedDevice prop changed to:', selectedDevice)
  }, [selectedDevice])

  return (
    <div className="max-w-7xl mx-auto space-y-6">
      <div className="text-center space-y-4">
        <h1 className="text-4xl font-bold text-white">AI Wireframe Mockup</h1>
        <p className="text-xl text-white/60 max-w-3xl mx-auto">
          Generate and customize wireframes for {template.title} using AI-powered design tools
        </p>
        <div className="flex items-center justify-center gap-2 text-orange-400">
          <Palette className="h-5 w-5" />
          <span className="text-sm font-medium">AI-Powered Wireframe Generation</span>
        </div>
      </div>

      {/* Dual Canvas Editor */}
      <div className="bg-white/5 border border-white/10 rounded-xl overflow-hidden h-[80vh] min-h-[600px]">
        <DualCanvasEditor
          className="h-full w-full"
          onWireframeGenerated={handleWireframeGenerated}
          onGenerationStart={handleWireframeGenerationStart}
          selectedDevice={selectedDevice}
          onDeviceChange={handleDeviceChange}
          initialPrompt={initialPrompt}
        />
      </div>

      {/* Wireframe Status and Controls */}
      <div className="bg-white/5 border border-white/10 rounded-xl p-6">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="text-center">
            <div className="text-2xl font-bold text-white mb-2">
              {wireframeData ? '✅' : '⏳'}
            </div>
            <div className="text-white/80 font-medium">
              {wireframeData ? 'Wireframe Generated' : 'Ready to Generate'}
            </div>
            <div className="text-white/60 text-sm">
              {wireframeData ? 'Click Continue to proceed' : 'Use the AI panel to create wireframes'}
            </div>
          </div>

          <div className="text-center">
            <div className="text-2xl font-bold text-white mb-2">
              {selectedFeatures.length}
            </div>
            <div className="text-white/80 font-medium">Features Selected</div>
            <div className="text-white/60 text-sm">
              {template.title} template
            </div>
          </div>

          <div className="text-center">
            <div className="text-2xl font-bold text-white mb-2">
              {isGenerating ? '🔄' : '🎨'}
            </div>
            <div className="text-white/80 font-medium">
              {isGenerating ? 'Generating...' : 'AI Ready'}
            </div>
            <div className="text-white/60 text-sm">
              {isGenerating ? 'Creating wireframe layout' : 'Claude AI powered'}
            </div>
          </div>
        </div>
      </div>

      {/* Navigation */}
      <div className="text-center py-6">
        <div className="space-x-4">
          <Button variant="outline" onClick={onBack} className="border-white/20 text-white hover:bg-white/10">
            ← Back to Features
          </Button>
          <Button
            onClick={onNext}
            disabled={!wireframeData}
            className={`bg-orange-500 hover:bg-orange-400 text-black font-semibold py-2 rounded-lg shadow ${!wireframeData ? 'opacity-50 cursor-not-allowed' : ''
              }`}
          >
            Continue to Business Context →
          </Button>
        </div>
        <div className="text-white/60 text-sm mt-2">
          {wireframeData
            ? 'Wireframe generated successfully! Continue to define business requirements.'
            : 'Generate a wireframe first to continue to the next step.'
          }
        </div>
      </div>
    </div>
  )
}

// Main Dashboard Component
export function MainDashboard() {
  const [mounted, setMounted] = useState(false)
  const [currentStep, setCurrentStep] = useState(1)
  const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(() => {
    // Only access localStorage after component mounts to prevent hydration mismatch
    return null
  })
  const [selectedFeatures, setSelectedFeatures] = useState<TemplateFeature[]>(() => {
    // Only access localStorage after component mounts to prevent hydration mismatch
    return []
  })
  const [finalProjectData, setFinalProjectData] = useState<any>(() => {
    // Only access localStorage after component mounts to prevent hydration mismatch
    return null
  })
  const [techStackRecommendations, setTechStackRecommendations] = useState<any>(() => {
    // Only access localStorage after component mounts to prevent hydration mismatch
    return null
  })

  // Load state from localStorage after component mounts
  useEffect(() => {
    setMounted(true)

    if (typeof window !== 'undefined') {
      // Load current step
      const savedStep = localStorage.getItem('dashboard_current_step')
      if (savedStep) {
        setCurrentStep(parseInt(savedStep) || 1)
      }

      // Load selected template
      const savedTemplate = localStorage.getItem('dashboard_selected_template')
      if (savedTemplate) {
        try {
          setSelectedTemplate(JSON.parse(savedTemplate))
        } catch (error) {
          console.error('Failed to parse saved template:', error)
        }
      }

      // Load selected features
      const savedFeatures = localStorage.getItem('dashboard_selected_features')
      if (savedFeatures) {
        try {
          setSelectedFeatures(JSON.parse(savedFeatures))
        } catch (error) {
          console.error('Failed to parse saved features:', error)
        }
      }

      // Load final project data
      const savedProjectData = localStorage.getItem('dashboard_final_project_data')
      if (savedProjectData) {
        try {
          setFinalProjectData(JSON.parse(savedProjectData))
        } catch (error) {
          console.error('Failed to parse saved project data:', error)
        }
      }

      // Load tech stack recommendations
      const savedRecommendations = localStorage.getItem('dashboard_tech_stack_recommendations')
      if (savedRecommendations) {
        try {
          setTechStackRecommendations(JSON.parse(savedRecommendations))
        } catch (error) {
          console.error('Failed to parse saved recommendations:', error)
        }
      }
    }
  }, [])

  const steps = [
    { id: 1, name: "Project Type", description: "Choose template" },
    { id: 2, name: "Features", description: "Select features" },
    { id: 3, name: "AI Mockup", description: "Generate wireframes" },
    { id: 4, name: "Business Context", description: "Define requirements" },
    { id: 5, name: "Generate", description: "Create project" },
    { id: 6, name: "Architecture", description: "Review & deploy" },
  ]

  // Save state to localStorage when it changes (only after mounting)
  useEffect(() => {
    if (mounted) {
      localStorage.setItem('dashboard_current_step', currentStep.toString())
    }
  }, [currentStep, mounted])

  useEffect(() => {
    if (mounted) {
      if (selectedTemplate) {
        localStorage.setItem('dashboard_selected_template', JSON.stringify(selectedTemplate))
      } else {
        localStorage.removeItem('dashboard_selected_template')
      }
    }
  }, [selectedTemplate, mounted])

  useEffect(() => {
    if (mounted) {
      if (selectedFeatures.length > 0) {
        localStorage.setItem('dashboard_selected_features', JSON.stringify(selectedFeatures))
      } else {
        localStorage.removeItem('dashboard_selected_features')
      }
    }
  }, [selectedFeatures, mounted])

  useEffect(() => {
    if (mounted) {
      if (finalProjectData) {
        localStorage.setItem('dashboard_final_project_data', JSON.stringify(finalProjectData))
      } else {
        localStorage.removeItem('dashboard_final_project_data')
      }
    }
  }, [finalProjectData, mounted])

  useEffect(() => {
    if (mounted) {
      if (techStackRecommendations) {
        localStorage.setItem('dashboard_tech_stack_recommendations', JSON.stringify(techStackRecommendations))
      } else {
        localStorage.removeItem('dashboard_tech_stack_recommendations')
      }
    }
  }, [techStackRecommendations, mounted])

  const renderStep = () => {
    switch (currentStep) {
      case 1:
        return (
          <TemplateSelectionStep
            onNext={(template) => {
              setSelectedTemplate(template)
              setCurrentStep(2)
            }}
          />
        )
      case 2:
        return selectedTemplate ? (
          <FeatureSelectionStep
            template={selectedTemplate}
            onNext={(sel) => { setSelectedFeatures(sel); setCurrentStep(3) }}
            onBack={() => setCurrentStep(1)}
          />
        ) : null
      case 3:
        return selectedTemplate ? (
          <AIMockupStep
            template={selectedTemplate}
            selectedFeatures={selectedFeatures}
            onNext={() => setCurrentStep(4)}
            onBack={() => setCurrentStep(2)}
          />
        ) : null
      case 4:
        return selectedTemplate ? (
          <BusinessQuestionsStep
            template={selectedTemplate}
            selected={selectedFeatures}
            onBack={() => setCurrentStep(3)}
            onDone={(data, recs) => { setFinalProjectData(data); setTechStackRecommendations(recs); setCurrentStep(5) }}
          />
        ) : null
      case 5:
        return (
          <TechStackSummaryStep
            recommendations={techStackRecommendations}
            completeData={finalProjectData}
            onBack={() => setCurrentStep(4)}
            onGenerate={() => setCurrentStep(6)}
          />
        )
      case 6:
        return (
          <ArchitectureDesignerStep
            recommendations={techStackRecommendations}
            onBack={() => setCurrentStep(5)}
          />
        )
      default:
        return null
    }
  }

  return (
    <div className="min-h-screen bg-black">

      {/* Progress Steps */}
      {mounted && (
        <div className="bg-white/5 border-b border-white/10">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="py-4">
              <nav className="flex justify-center">
                <ol className="flex items-center space-x-8 text-white/60">
                  {steps.map((step, index) => (
                    <li key={`step-${step.id}`} className="flex items-center">
                      <div className="flex items-center">
                        <div
                          className={`flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${currentStep >= step.id
                            ? "bg-orange-500 border-orange-500 text-white shadow-lg"
                            : currentStep === step.id - 1
                              ? "border-orange-300 text-orange-400"
                              : "border-white/30 text-white/40"
                            }`}
                        >
                          <span className="text-sm font-semibold">{step.id}</span>
                        </div>
                        <div className="ml-4">
                          <p
                            className={`text-sm font-semibold ${currentStep >= step.id ? "text-orange-400" : "text-white/60"
                              }`}
                          >
                            {step.name}
                          </p>
                          <p className="text-xs text-white/40">{step.description}</p>
                        </div>
                      </div>
                      {index < steps.length - 1 && (
                        <ArrowRight
                          key={`arrow-${step.id}`}
                          className={`ml-8 h-5 w-5 ${currentStep > step.id ? "text-orange-400" : "text-white/40"}`}
                        />
                      )}
                    </li>
                  ))}
                </ol>
              </nav>
            </div>
          </div>
        </div>
      )}

      {/* Main Content */}
      <main className="py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {!mounted ? (
            <div className="flex items-center justify-center py-12">
              <div className="text-center space-y-4">
                <div className="animate-spin w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full mx-auto"></div>
                <p className="text-white/60">Loading...</p>
              </div>
            </div>
          ) : (
            renderStep()
          )}
        </div>
      </main>
    </div>
  )
}

function ArchitectureDesignerStep({ recommendations, onBack }: { recommendations: any; onBack: () => void }) {
  const [architectureDesign, setArchitectureDesign] = useState<any>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [activeTab, setActiveTab] = useState<'overview' | 'frontend' | 'backend' | 'database' | 'deployment'>('overview')

  useEffect(() => {
    const generate = async () => {
      if (!recommendations) {
        setError('Missing technology recommendations')
        return
      }
      try {
        setLoading(true)
        setError(null)
        const resp = await fetch(`${BACKEND_URL}/api/v1/design-architecture`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ tech_stack_recommendations: recommendations }),
        })
        if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
        const data = await resp.json()
        setArchitectureDesign(data)
      } catch (e: any) {
        setError(e?.message || 'Failed to generate architecture')
      } finally {
        setLoading(false)
      }
    }
    generate()
  }, [JSON.stringify(recommendations)])

  if (loading) {
    return (
      <div className="flex items-center justify-center py-24">
        <div className="text-center text-white/80">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-500 mx-auto mb-4"></div>
          <div className="font-semibold mb-1">AI Designing Your Architecture</div>
          <div className="text-white/60 text-sm">Creating React components, Node.js APIs, and PostgreSQL schema…</div>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="text-center py-20">
        <div className="max-w-md mx-auto bg-red-500/10 border border-red-500/30 rounded-lg p-6 text-red-300">
          <div className="font-semibold mb-2">Architecture Generation Failed</div>
          <div className="mb-4">{error}</div>
          <div className="space-x-3">
            <Button onClick={() => location.reload()} className="bg-red-500 hover:bg-red-400 text-black">Try Again</Button>
            <Button variant="outline" onClick={onBack} className="border-white/20 text-white hover:bg-white/10">Back</Button>
          </div>
        </div>
      </div>
    )
  }

  if (!architectureDesign) {
    return (
      <div className="text-center py-20">
        <div className="max-w-md mx-auto bg-white/5 border border-white/10 rounded-lg p-6 text-white/80">
          <div className="font-semibold mb-2">No Architecture Data</div>
          <div className="mb-4">Please complete the tech stack selection first.</div>
          <Button variant="outline" onClick={onBack} className="border-white/20 text-white hover:bg-white/10">Go Back</Button>
        </div>
      </div>
    )
  }

  const projectMeta = architectureDesign?.project_metadata
  const arch = architectureDesign?.architecture_design
  const tech = architectureDesign?.technology_specifications

  return (
    <div className="space-y-6">
      <div className="bg-white/5 border-b border-white/10">
        <div className="max-w-7xl mx-auto px-4 py-6 flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-white">Architecture Design</h1>
            <p className="text-white/60">AI-generated architecture for <span className="text-orange-400 font-semibold">{projectMeta?.project_name}</span></p>
          </div>
          <div className="space-x-3">
            <Button variant="outline" onClick={onBack} className="border-white/20 text-white hover:bg-white/10">Back</Button>
            <Button onClick={() => location.reload()} className="bg-orange-500 hover:bg-orange-400 text-black">Regenerate</Button>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4">
        <div className="border-b border-white/10 mb-6">
          <nav className="-mb-px flex space-x-8">
            {[
              { id: 'overview', name: 'Overview' },
              { id: 'frontend', name: 'Frontend (React)' },
              { id: 'backend', name: 'Backend (Node.js)' },
              { id: 'database', name: 'Database (PostgreSQL)' },
              { id: 'deployment', name: 'Deployment' },
            ].map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id as any)}
                className={`py-2 px-1 border-b-2 text-sm transition-colors ${activeTab === (tab.id as any)
                  ? 'border-orange-400 text-orange-400'
                  : 'border-transparent text-white/60 hover:text-white/80 hover:border-white/20'
                  }`}
              >
                {tab.name}
              </button>
            ))}
          </nav>
        </div>

        {activeTab === 'overview' && (
          <div className="space-y-6">
            <div className="bg-white/5 border border-white/10 rounded-xl p-6">
              <h3 className="text-xl font-bold text-white mb-4">Project Overview</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-white/80">
                <div className="bg-white/5 rounded-lg p-4">
                  <div className="font-semibold">Project Name</div>
                  <div>{projectMeta?.project_name}</div>
                </div>
                <div className="bg-white/5 rounded-lg p-4">
                  <div className="font-semibold">Complexity</div>
                  <div className="capitalize">{projectMeta?.complexity}</div>
                </div>
                <div className="bg-white/5 rounded-lg p-4">
                  <div className="font-semibold">Generated</div>
                  <div>{projectMeta?.architecture_generated_at ? new Date(projectMeta.architecture_generated_at).toLocaleDateString() : '-'}</div>
                </div>
              </div>
            </div>

            <div className="bg-white/5 border border-white/10 rounded-xl p-6">
              <h3 className="text-xl font-bold text-white mb-4">Technology Stack</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-white/80">
                <div className="bg-white/5 rounded-lg p-4">
                  <div className="font-semibold">Frontend</div>
                  <div>{tech?.frontend_framework}</div>
                </div>
                <div className="bg-white/5 rounded-lg p-4">
                  <div className="font-semibold">Backend</div>
                  <div>{tech?.backend_language}</div>
                </div>
                <div className="bg-white/5 rounded-lg p-4">
                  <div className="font-semibold">Database</div>
                  <div>{tech?.database_system}</div>
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'frontend' && (
          <div className="bg-white/5 border border-white/10 rounded-xl p-6">
            <h3 className="text-xl font-bold text-white mb-4">React Architecture</h3>
            <pre className="bg-black/30 rounded-lg p-4 overflow-x-auto text-sm text-white/80">{JSON.stringify(arch?.frontend_architecture, null, 2)}</pre>
          </div>
        )}
        {activeTab === 'backend' && (
          <div className="bg-white/5 border border-white/10 rounded-xl p-6">
            <h3 className="text-xl font-bold text-white mb-4">Node.js Architecture</h3>
            <pre className="bg-black/30 rounded-lg p-4 overflow-x-auto text-sm text-white/80">{JSON.stringify(arch?.backend_architecture, null, 2)}</pre>
          </div>
        )}
        {activeTab === 'database' && (
          <div className="bg-white/5 border border-white/10 rounded-xl p-6">
            <h3 className="text-xl font-bold text-white mb-4">PostgreSQL Architecture</h3>
            <pre className="bg-black/30 rounded-lg p-4 overflow-x-auto text-sm text-white/80">{JSON.stringify(arch?.database_architecture, null, 2)}</pre>
          </div>
        )}
        {activeTab === 'deployment' && (
          <div className="bg-white/5 border border-white/10 rounded-xl p-6 text-white/80">
            <h3 className="text-xl font-bold text-white mb-4">Deployment Configuration</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="bg-white/5 rounded-lg p-4">
                <div className="font-semibold mb-2">Frontend Deployment</div>
                <ul className="text-sm space-y-1">
                  <li>• Vercel/Netlify hosting</li>
                  <li>• React build optimization</li>
                  <li>• CDN distribution</li>
                </ul>
              </div>
              <div className="bg-white/5 rounded-lg p-4">
                <div className="font-semibold mb-2">Backend Deployment</div>
                <ul className="text-sm space-y-1">
                  <li>• Docker containerization</li>
                  <li>• AWS/GCP hosting</li>
                  <li>• Auto-scaling setup</li>
                </ul>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}