'use client';

import { Bot, User } from 'lucide-react';
import { useLanguage } from '@client/contexts/LanguageContext';

interface Props {
  name: string;
  greeting: string;
  systemPrompt: string;
  closing: string;
}

export default function AgentPreview({ name, greeting, systemPrompt, closing }: Props) {
  const { t } = useLanguage();
  return (
    <div className="card p-5 h-fit sticky top-4">
      <h3 className="font-semibold mb-1 text-sm" style={{ color: 'hsl(var(--foreground))' }}>{t('aiAgentConfig.preview.title', 'Agent Preview')}</h3>
      <p className="text-xs mb-4" style={{ color: 'hsl(var(--muted-foreground))' }}>
        {t('aiAgentConfig.preview.subtitle', 'Preview how {{name}} will interact', { name: name || t('aiAgentConfig.preview.theAgent', 'the agent') })}
      </p>

      <div className="space-y-3 max-h-[400px] overflow-y-auto">
        {systemPrompt && (
          <div className="p-3 rounded-lg text-xs" style={{ backgroundColor: 'hsl(var(--muted))', color: 'hsl(var(--muted-foreground))' }}>
            <p className="font-semibold mb-1 uppercase tracking-wider text-[10px]">{t('aiAgentConfig.preview.systemPrompt', 'System Prompt')}</p>
            <p className="whitespace-pre-wrap line-clamp-6">{systemPrompt}</p>
          </div>
        )}

        {greeting && (
          <div className="flex gap-2">
            <div className="w-6 h-6 rounded-full flex items-center justify-center shrink-0"
              style={{ backgroundColor: 'hsl(var(--primary-light))' }}>
              <Bot size={13} style={{ color: 'hsl(var(--primary))' }} />
            </div>
            <div className="p-3 rounded-xl rounded-tl-sm flex-1 text-xs"
              style={{ backgroundColor: 'hsl(var(--primary-light))', color: 'hsl(var(--foreground))' }}>
              {greeting}
            </div>
          </div>
        )}

        <div className="border-t border-dashed my-2 flex items-center gap-2" style={{ borderColor: 'hsl(var(--border))' }}>
          <span className="text-[10px] uppercase tracking-wider px-1 shrink-0" style={{ color: 'hsl(var(--muted-foreground))' }}>{t('aiAgentConfig.preview.sampleFlow', 'Sample flow')}</span>
        </div>

        <div className="flex gap-2 justify-end">
          <div className="p-3 rounded-xl rounded-tr-sm text-xs"
            style={{ backgroundColor: 'hsl(var(--muted))', color: 'hsl(var(--muted-foreground))' }}>
            {t('aiAgentConfig.preview.sampleUserMsg', 'Hi, can I place an order?')}
          </div>
          <div className="w-6 h-6 rounded-full flex items-center justify-center shrink-0"
            style={{ backgroundColor: 'hsl(var(--muted))' }}>
            <User size={13} style={{ color: 'hsl(var(--muted-foreground))' }} />
          </div>
        </div>

        <div className="flex gap-2">
          <div className="w-6 h-6 rounded-full flex items-center justify-center shrink-0"
            style={{ backgroundColor: 'hsl(var(--primary-light))' }}>
            <Bot size={13} style={{ color: 'hsl(var(--primary))' }} />
          </div>
          <div className="p-3 rounded-xl rounded-tl-sm flex-1 text-xs"
            style={{ backgroundColor: 'hsl(var(--primary-light))', color: 'hsl(var(--foreground))' }}>
            {t('aiAgentConfig.preview.sampleAgentMsg', "Sure! I'd be happy to help. What would you like to order today?")}
          </div>
        </div>

        {closing && (
          <>
            <div className="border-t my-2" style={{ borderColor: 'hsl(var(--border))' }} />
            <div className="flex gap-2">
              <div className="w-6 h-6 rounded-full flex items-center justify-center shrink-0"
                style={{ backgroundColor: 'hsl(var(--primary-light))' }}>
                <Bot size={13} style={{ color: 'hsl(var(--primary))' }} />
              </div>
              <div className="p-3 rounded-xl rounded-tl-sm flex-1 text-xs italic"
                style={{ backgroundColor: 'hsl(var(--muted))', color: 'hsl(var(--muted-foreground))' }}>
                {closing}
              </div>
            </div>
          </>
        )}
      </div>

      {!greeting && !systemPrompt && !closing && (
        <p className="text-xs text-center py-6" style={{ color: 'hsl(var(--muted-foreground))' }}>
          {t('aiAgentConfig.preview.empty', 'Add a greeting or system prompt to see a preview')}
        </p>
      )}
    </div>
  );
}