src/components/AmaniQueryResponse.tsx

/**
 * AmaniQuery v2 Response Display Component
 * 
 * Displays structured JSON responses with persona-specific theming:
 * - wanjiku: Warm orange/green (Kenyan flag vibes)
 * - wakili: Navy blue + gold (legal professional)
 * - mwanahabari: Neutral grey + data visualization
 */

import React, { useState } from 'react';
import { ChevronDown, ChevronUp, ExternalLink, BookOpen, TrendingUp, Users } from 'lucide-react';
import { cn } from "@/lib/utils";
import { ThinkingProcess } from './ThinkingProcess';
import { FactCheckAlert } from './FactCheckAlert';

// ============================================================================
// TYPES
// ============================================================================

export type QueryType = 'public_interest' | 'legal' | 'research';

export interface AmaniQueryResponse {
  query_type: QueryType;
  language_detected: string;
  response: {
    summary_card: {
      title: string;
      content: string;
    };
    detailed_breakdown: {
      points: string[];
    };
    kenyan_context: {
      impact: string;
      related_topic: string | null;
    };
    citations: Array<{
      source: string;
      url: string;
      quote: string | null;
    }>;
  };
  follow_up_suggestions: string[];
  metadata?: {
    reasoning_path?: {
      query: string;
      thoughts: Array<{
        step: number;
        action: string;
        observation: string;
        reasoning: string;
        duration_ms?: number;
        confidence?: number;
      }>;
      total_duration_ms: number;
      final_conclusion: string;
    };
    quality_issues?: string[];
    [key: string]: unknown;
  };
}

interface AmaniQueryResponseProps {
  data: AmaniQueryResponse;
  className?: string;
  onFollowUpClick?: (suggestion: string) => void;
}

// ============================================================================
// THEME CONFIGURATION
// ============================================================================

const PERSONA_THEMES = {
  public_interest: {
    name: 'wanjiku',
    classes: {
      container: 'bg-orange-50/50 dark:bg-orange-950/20',
      card: 'bg-white dark:bg-gray-900 border-orange-100 dark:border-orange-900/50',
      summaryGradient: 'from-orange-600 to-green-600',
      primaryText: 'text-orange-900 dark:text-orange-100',
      secondaryText: 'text-orange-700 dark:text-orange-300',
      accentBg: 'bg-orange-500',
      accentText: 'text-orange-600 dark:text-orange-400',
      border: 'border-orange-200 dark:border-orange-800',
      contextBorder: 'border-green-600 dark:border-green-500',
      iconColor: 'text-green-600 dark:text-green-500',
      buttonHover: 'hover:bg-orange-100 dark:hover:bg-orange-900/50'
    },
    icon: '🇰🇪',
    summaryTitle: 'Kwa Ufupi',
    contextIcon: '🚌' // Matatu
  },
  legal: {
    name: 'wakili',
    classes: {
      container: 'bg-indigo-50/50 dark:bg-indigo-950/20',
      card: 'bg-white dark:bg-gray-900 border-indigo-100 dark:border-indigo-900/50',
      summaryGradient: 'from-indigo-700 to-blue-900',
      primaryText: 'text-indigo-900 dark:text-indigo-100',
      secondaryText: 'text-indigo-700 dark:text-indigo-300',
      accentBg: 'bg-indigo-500',
      accentText: 'text-indigo-600 dark:text-indigo-400',
      border: 'border-indigo-200 dark:border-indigo-800',
      contextBorder: 'border-amber-400 dark:border-amber-500',
      iconColor: 'text-amber-500 dark:text-amber-400',
      buttonHover: 'hover:bg-indigo-100 dark:hover:bg-indigo-900/50'
    },
    icon: '⚖️',
    summaryTitle: 'Legal Summary',
    contextIcon: '📜'
  },
  research: {
    name: 'mwanahabari',
    classes: {
      container: 'bg-slate-50/50 dark:bg-slate-950/20',
      card: 'bg-white dark:bg-gray-900 border-slate-100 dark:border-slate-800',
      summaryGradient: 'from-slate-700 to-teal-700',
      primaryText: 'text-slate-900 dark:text-slate-100',
      secondaryText: 'text-slate-700 dark:text-slate-300',
      accentBg: 'bg-teal-500',
      accentText: 'text-teal-600 dark:text-teal-400',
      border: 'border-slate-200 dark:border-slate-700',
      contextBorder: 'border-teal-500 dark:border-teal-400',
      iconColor: 'text-teal-600 dark:text-teal-500',
      buttonHover: 'hover:bg-slate-100 dark:hover:bg-slate-800'
    },
    icon: '📊',
    summaryTitle: 'The Bottom Line',
    contextIcon: '📈'
  }
};

// ============================================================================
// KENYAN CONTEXT ICONS
// ============================================================================

const KENYAN_CONTEXT_ICONS: Record<string, string> = {
  'transport': '🚌', // Matatu
  'money': '💰',
  'government': '🏛️',
  'food': '🌽', // Maize/ugali
  'housing': '🏘️',
  'health': '🏥',
  'education': '📚',
  'default': '🇰🇪'
};

const getContextIcon = (impact: string): string => {
  const lowercaseImpact = impact.toLowerCase();
  
  if (lowercaseImpact.includes('transport') || lowercaseImpact.includes('matatu') || lowercaseImpact.includes('parking')) {
    return KENYAN_CONTEXT_ICONS.transport;
  }
  if (lowercaseImpact.includes('money') || lowercaseImpact.includes('fee') || lowercaseImpact.includes('cost')) {
    return KENYAN_CONTEXT_ICONS.money;
  }
  if (lowercaseImpact.includes('food') || lowercaseImpact.includes('mama mboga')) {
    return KENYAN_CONTEXT_ICONS.food;
  }
  if (lowercaseImpact.includes('housing') || lowercaseImpact.includes('rent')) {
    return KENYAN_CONTEXT_ICONS.housing;
  }
  
  return KENYAN_CONTEXT_ICONS.default;
};

// ============================================================================
// MAIN COMPONENT
// ============================================================================

export const AmaniQueryResponse: React.FC<AmaniQueryResponseProps> = ({ data, className = '', onFollowUpClick }) => {
  const [citationsExpanded, setCitationsExpanded] = useState(false);
  const [detailsExpanded, setDetailsExpanded] = useState(true);
  
  const theme = PERSONA_THEMES[data.query_type];
  const contextIcon = getContextIcon(data.response.kenyan_context.impact);

  return (
    <div className={cn(
      "rounded-2xl p-5 max-w-3xl mx-auto font-sans transition-colors duration-200",
      theme.classes.container,
      className
    )}>
      {/* THINKING PROCESS - Display if available */}
      {data.metadata?.reasoning_path && (
        <div className="mb-6">
          <ThinkingProcess 
            reasoning={data.metadata.reasoning_path} 
            className="bg-white/50 dark:bg-black/20 backdrop-blur-sm"
          />
        </div>
      )}

      {/* FACT CHECK ALERT - Display if issues found */}
      {data.metadata?.quality_issues && Array.isArray(data.metadata.quality_issues) && data.metadata.quality_issues.length > 0 && (
        <FactCheckAlert issues={data.metadata.quality_issues as string[]} />
      )}

      {/* SUMMARY CARD - HUGE AND PROMINENT */}
      <SummaryCard 
        title={data.response.summary_card.title}
        content={data.response.summary_card.content}
        theme={theme}
      />

      {/* DETAILED BREAKDOWN */}
      <DetailedBreakdown
        points={data.response.detailed_breakdown.points}
        theme={theme}
        isExpanded={detailsExpanded}
        onToggle={() => setDetailsExpanded(!detailsExpanded)}
      />

      {/* KENYAN CONTEXT */}
      <KenyanContext
        impact={data.response.kenyan_context.impact}
        relatedTopic={data.response.kenyan_context.related_topic}
        icon={contextIcon}
        theme={theme}
      />

      {/* CITATIONS */}
      <Citations
        citations={data.response.citations}
        theme={theme}
        isExpanded={citationsExpanded}
        onToggle={() => setCitationsExpanded(!citationsExpanded)}
      />

      {/* FOLLOW-UP SUGGESTIONS */}
      <FollowUpSuggestions
        suggestions={data.follow_up_suggestions}
        theme={theme}
        onFollowUpClick={onFollowUpClick}
      />
    </div>
  );
};

// ============================================================================
// SUB-COMPONENTS
// ============================================================================

interface ThemeProps {
  theme: typeof PERSONA_THEMES[keyof typeof PERSONA_THEMES];
}

// SUMMARY CARD - TikTok-style prominence
const SummaryCard: React.FC<{ title: string; content: string } & ThemeProps> = ({ 
  title, 
  content, 
  theme 
}) => {
  return (
    <div className={cn(
      "relative overflow-hidden rounded-2xl p-8 mb-6 shadow-lg text-white",
      `bg-gradient-to-br ${theme.classes.summaryGradient}`
    )}>
      {/* Background pattern */}
      <div className="absolute top-0 right-0 text-[120px] opacity-10 leading-none pointer-events-none select-none">
        {theme.icon}
      </div>

      {/* Header */}
      <div className="flex items-center gap-3 mb-4 relative z-10">
        <span className="text-3xl">{theme.icon}</span>
        <h2 className="text-lg font-bold uppercase tracking-wide m-0">
          {theme.summaryTitle}
        </h2>
      </div>

      {/* Title - HUGE */}
      <h1 className="text-2xl md:text-3xl font-extrabold leading-tight mb-4 drop-shadow-sm relative z-10">
        {title}
      </h1>

      {/* Content */}
      <p className="text-lg leading-relaxed font-normal opacity-95 m-0 relative z-10">
        {content}
      </p>
    </div>
  );
};

// DETAILED BREAKDOWN
const DetailedBreakdown: React.FC<{
  points: string[];
  isExpanded: boolean;
  onToggle: () => void;
} & ThemeProps> = ({ points, theme, isExpanded, onToggle }) => {
  return (
    <div className={cn(
      "rounded-2xl p-5 mb-4 border shadow-sm transition-all duration-200",
      theme.classes.card
    )}>
      {/* Header */}
      <button
        onClick={onToggle}
        className="w-full flex justify-between items-center bg-transparent border-none cursor-pointer p-0"
      >
        <h3 className={cn(
          "text-lg font-bold flex items-center gap-2 m-0",
          theme.classes.secondaryText
        )}>
          <BookOpen size={20} />
          Detailed Breakdown
        </h3>
        {isExpanded ? (
          <ChevronUp className={theme.classes.secondaryText} />
        ) : (
          <ChevronDown className={theme.classes.secondaryText} />
        )}
      </button>

      {/* Points */}
      {isExpanded && (
        <ul className="list-none p-0 m-0 mt-4 space-y-3">
          {points.map((point, idx) => (
            <li key={idx} className={cn(
              "pl-8 relative text-base leading-relaxed",
              theme.classes.primaryText
            )}>
              <span className={cn(
                "absolute left-0 top-0.5 w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold text-white",
                theme.classes.accentBg
              )}>
                {idx + 1}
              </span>
              {point}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

// KENYAN CONTEXT
const KenyanContext: React.FC<{
  impact: string;
  relatedTopic: string | null;
  icon: string;
} & ThemeProps> = ({ impact, relatedTopic, icon, theme }) => {
  return (
    <div className={cn(
      "rounded-2xl p-5 mb-4 border-2 border-l-[6px] shadow-sm",
      theme.classes.card,
      theme.classes.contextBorder
    )}>
      {/* Header with icon */}
      <div className="flex items-start gap-4 mb-3">
        <div className="text-5xl leading-none flex-shrink-0">
          {icon}
        </div>
        
        <div className="flex-1">
          <h3 className={cn(
            "text-base font-bold uppercase tracking-wide mb-2",
            theme.classes.iconColor
          )}>
            🇰🇪 Kenyan Context
          </h3>
          
          <p className={cn(
            "text-base leading-relaxed m-0",
            theme.classes.primaryText
          )}>
            {impact}
          </p>
        </div>
      </div>

      {/* Related Topic */}
      {relatedTopic && (
        <div className={cn(
          "mt-3 p-3 rounded-lg text-sm flex items-center gap-2",
          theme.classes.container
        )}>
          <TrendingUp size={16} className={theme.classes.secondaryText} />
          <span className={theme.classes.secondaryText}>
            <strong>Related:</strong> {relatedTopic}
          </span>
        </div>
      )}
    </div>
  );
};

// CITATIONS (Collapsible)
const Citations: React.FC<{
  citations: AmaniQueryResponse['response']['citations'];
  isExpanded: boolean;
  onToggle: () => void;
} & ThemeProps> = ({ citations, theme, isExpanded, onToggle }) => {
  return (
    <div className={cn(
      "rounded-2xl p-5 mb-4 border shadow-sm",
      theme.classes.card
    )}>
      {/* Header */}
      <button
        onClick={onToggle}
        className="w-full flex justify-between items-center bg-transparent border-none cursor-pointer p-0"
      >
        <h3 className="text-base font-bold text-muted-foreground flex items-center gap-2 m-0">
          <ExternalLink size={18} />
          Sources ({citations.length})
        </h3>
        {isExpanded ? (
          <ChevronUp className="text-muted-foreground" />
        ) : (
          <ChevronDown className="text-muted-foreground" />
        )}
      </button>

      {/* Citation List */}
      {isExpanded && (
        <div className="mt-4 space-y-2">
          {citations.map((citation, idx) => (
            <div
              key={idx}
              className={cn(
                "p-3 rounded-lg border-l-4 [border-left-color:currentColor]",
                theme.classes.container,
                theme.classes.border
              )}
            >
              <div className={cn(
                "text-sm font-semibold mb-1",
                theme.classes.primaryText
              )}>
                {citation.source}
              </div>
              
              {citation.quote && (
                <blockquote className={cn(
                  "mt-2 mb-0 pl-3 border-l-2 text-sm italic",
                  "border-muted-foreground/30 text-muted-foreground"
                )}>
                  &quot;{citation.quote}&quot;
                </blockquote>
              )}
              
              {citation.url !== 'N/A' && (
                <a
                  href={citation.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className={cn(
                    "text-sm underline decoration-2 underline-offset-2 inline-flex items-center gap-1 mt-2",
                    "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300",
                    "transition-colors duration-200 font-medium"
                  )}
                >
                  View source <ExternalLink size={12} />
                </a>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// FOLLOW-UP SUGGESTIONS
const FollowUpSuggestions: React.FC<{
  suggestions: string[];
  onFollowUpClick?: (suggestion: string) => void;
} & ThemeProps> = ({ suggestions, theme, onFollowUpClick }) => {
  return (
    <div className={cn(
      "rounded-2xl p-5 border shadow-sm",
      theme.classes.card
    )}>
      <h3 className={cn(
        "text-base font-bold mb-3 flex items-center gap-2",
        theme.classes.secondaryText
      )}>
        <Users size={18} />
        Want to know more?
      </h3>

      <div className="flex flex-col gap-2">
        {suggestions.map((suggestion, idx) => (
          <button
            key={idx}
            onClick={() => onFollowUpClick?.(suggestion)}
            className={cn(
              "p-3 md:px-4 rounded-xl text-sm text-left transition-all duration-200 font-medium border-2",
              "bg-transparent cursor-pointer",
              theme.classes.border,
              theme.classes.primaryText,
              theme.classes.buttonHover,
              "hover:translate-x-1 hover:shadow-md active:scale-[0.98]"
            )}
          >
            {suggestion}
          </button>
        ))}
      </div>
    </div>
  );
};

export default AmaniQueryResponse;