'use client';

import {useState} from 'react';
import {Icon} from '@astryxdesign/core/Icon';
import {IconButton} from '@astryxdesign/core/IconButton';
import {useToast} from '@astryxdesign/core/Toast';
import {ICONS} from '@/shared/utils/icons';
import {exportData} from '@/shared/utils/export/exportManager';

export function MessageToolbarBlock({
  textToCopy,
  onRegenerate,
}: {
  textToCopy?: string;
  onRegenerate?: () => void;
}) {
  const toast = useToast();
  const [copied, setCopied] = useState(false);
  const [liked, setLiked] = useState<boolean | null>(null);

  const handleCopy = () => {
    if (textToCopy) {
      navigator.clipboard.writeText(textToCopy);
      setCopied(true);
      toast({body: 'Response copied to clipboard'});
      setTimeout(() => setCopied(false), 2000);
    }
  };

  const handleExportPdf = async () => {
    try {
      await exportData({
        filename: 'Loyaly_AI_Response',
        title: 'Loyaly AI Assistant Response Report',
        subtitle: 'Exported from Loyaly AI Assistant',
        columns: [
          {key: 'content', header: 'AI Response Summary'},
        ],
        data: [
          {content: textToCopy || 'Loyaly AI Business Assistant Response'},
        ],
        format: 'pdf',
      });
      toast({body: '✓ PDF downloaded successfully'});
    } catch {
      toast({body: '❌ Download failed'});
    }
  };

  const handleShare = () => {
    toast({body: 'Share link generated and copied'});
  };

  return (
    <div className="pt-3 border-t border-border/40 flex items-center justify-between gap-2 text-secondary w-full">
      <div className="flex items-center gap-1">
        <IconButton
          variant="ghost"
          size="sm"
          label={copied ? 'Copied' : 'Copy'}
          tooltip={copied ? 'Copied' : 'Copy response'}
          icon={<Icon icon={copied ? 'check' : 'copy'} size="xsm" />}
          onClick={handleCopy}
        />
        <IconButton
          variant="ghost"
          size="sm"
          label="Helpful"
          tooltip="Helpful"
          icon={
            <Icon
              icon="arrowUp"
              size="xsm"
              color={liked === true ? 'primary' : 'secondary'}
            />
          }
          onClick={() => {
            setLiked(true);
            toast({body: 'Thank you for your feedback!'});
          }}
        />
        <IconButton
          variant="ghost"
          size="sm"
          label="Unhelpful"
          tooltip="Unhelpful"
          icon={
            <Icon
              icon="arrowDown"
              size="xsm"
              color={liked === false ? 'primary' : 'secondary'}
            />
          }
          onClick={() => {
            setLiked(false);
            toast({body: 'Feedback submitted. We will improve.'});
          }}
        />
        {onRegenerate ? (
          <IconButton
            variant="ghost"
            size="sm"
            label="Regenerate"
            tooltip="Regenerate"
            icon={<Icon icon={ICONS.compare} size="xsm" />}
            onClick={onRegenerate}
          />
        ) : null}
      </div>

      <div className="flex items-center gap-1">
        <IconButton
          variant="ghost"
          size="sm"
          label="Export PDF"
          tooltip="Export PDF"
          icon={<Icon icon={ICONS.download} size="xsm" />}
          onClick={handleExportPdf}
        />
        <IconButton
          variant="ghost"
          size="sm"
          label="Share"
          tooltip="Share response"
          icon={<Icon icon="externalLink" size="xsm" />}
          onClick={handleShare}
        />
      </div>
    </div>
  );
}
