import { Mail, FileText, MessageSquare, ScrollText } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { ScrollArea } from '@/components/ui/scroll-area';

interface CanvasPlaceholderProps {
  content: string | null;
  kind: string | null;
  onContentChange?: (value: string) => void;
}

const KIND_META: Record<string, { label: string; Icon: React.ElementType }> = {
  email:    { label: 'Email Draft',    Icon: Mail },
  document: { label: 'Document Draft', Icon: FileText },
  message:  { label: 'Message Draft',  Icon: MessageSquare },
};

export function CanvasPlaceholder({ content, kind }: CanvasPlaceholderProps) {
  const { t } = useTranslation();
  const meta = kind ? (KIND_META[kind] ?? { label: kind.charAt(0).toUpperCase() + kind.slice(1), Icon: ScrollText }) : null;

  return (
    <div className="flex flex-col h-full px-4 py-4 gap-3">
      {/* Kind badge header */}
      {meta && (
        <div className="shrink-0 flex items-center gap-2 px-1">
          <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-primary/15 text-primary border border-primary/20">
            <meta.Icon size={12} strokeWidth={2} />
            <span className="text-xs font-medium tracking-tight">{meta.label}</span>
          </div>
        </div>
      )}

      {/* Paper surface */}
      <div className="flex-1 min-h-0 rounded-2xl bg-background shadow-sm border border-border/30 overflow-hidden">
        {content ? (
          <ScrollArea className="h-full">
            <div className="px-7 py-6">
              <div className="prose prose-sm dark:prose-invert max-w-none text-foreground leading-relaxed
                prose-p:text-foreground prose-p:leading-relaxed
                prose-headings:text-foreground prose-headings:font-semibold
                prose-strong:text-foreground prose-strong:font-semibold
                prose-li:text-foreground
                prose-a:text-primary prose-a:no-underline hover:prose-a:underline">
                <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
              </div>
            </div>
          </ScrollArea>
        ) : (
          <div className="flex items-center justify-center h-full text-muted-foreground/40 text-sm select-none">
            {t('brief.canvas.empty')}
          </div>
        )}
      </div>
    </div>
  );
}
