import { ExternalLink, Pencil, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { __, sprintf } from '../lib/i18n';

interface DrawerHeaderBarProps {
  title: string;
  subtitle?: string;
  permalink?: string;
  path?: string;
  postId?: number;
  editUrl?: string;
  thumbnail?: string;
  thumbnailAlt?: string;
  isDirty: boolean;
  isSaving: boolean;
  saveSuccess: boolean;
  onSave: () => void;
  onClose: () => void;
}

export function DrawerHeaderBar({
  title,
  subtitle,
  permalink,
  path,
  postId,
  editUrl,
  thumbnail,
  thumbnailAlt,
  isDirty,
  isSaving,
  saveSuccess,
  onSave,
  onClose,
}: DrawerHeaderBarProps) {
  const linkTarget = path || subtitle;

  return (
    <div
      className="sticky top-0 z-10 shrink-0 border-b border-gray-200 bg-white shadow-sm"
      style={{ paddingTop: '50px' }}
    >
      <div className="flex items-start gap-3 px-4 pb-3 pt-1">
        {thumbnail && (
          <img
            src={thumbnail}
            alt={thumbnailAlt || title}
            className="mt-0.5 h-10 w-10 shrink-0 rounded object-cover ring-1 ring-gray-200"
            onError={(e) => {
              (e.target as HTMLImageElement).style.display = 'none';
            }}
          />
        )}

        <div className="min-w-0 flex-1">
          <h2 className="truncate text-lg font-semibold text-gray-900">{title}</h2>
          <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-gray-500">
            {postId != null && (
              <span>
                {sprintf(__('Post ID: %d', 'llmagnet-llm-txt-generator'), postId)}
              </span>
            )}
            {postId != null && linkTarget && <span aria-hidden="true">·</span>}
            {permalink && linkTarget ? (
              <a
                href={permalink}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex max-w-full items-center gap-1 truncate hover:text-gray-700"
              >
                <span className="truncate">{linkTarget}</span>
                <ExternalLink className="h-3 w-3 shrink-0" aria-hidden="true" />
              </a>
            ) : (
              subtitle && <span className="truncate">{subtitle}</span>
            )}
          </div>
        </div>

        <button
          type="button"
          onClick={onClose}
          className="shrink-0 border-0 bg-transparent p-0 text-gray-500 shadow-none transition-colors hover:bg-transparent hover:text-gray-800"
          aria-label={__('Close drawer', 'llmagnet-llm-txt-generator')}
        >
          <X className="h-5 w-5" aria-hidden="true" />
        </button>
      </div>

      <div className="flex flex-wrap items-center gap-2 border-t border-gray-100 px-4 py-3">
        {editUrl && (
          <Button variant="secondary" size="sm" asChild>
            <a href={editUrl} target="_blank" rel="noopener noreferrer">
              <Pencil className="h-3.5 w-3.5" aria-hidden="true" />
              {__('Edit', 'llmagnet-llm-txt-generator')}
            </a>
          </Button>
        )}

        {permalink && (
          <Button variant="secondary" size="sm" asChild>
            <a href={permalink} target="_blank" rel="noopener noreferrer">
              <ExternalLink className="h-3.5 w-3.5" aria-hidden="true" />
              {__('View', 'llmagnet-llm-txt-generator')}
            </a>
          </Button>
        )}

        <Button
          type="button"
          onClick={onSave}
          disabled={!isDirty || isSaving}
          variant={
            saveSuccess ? 'success' : isDirty ? 'default' : 'muted'
          }
          size="sm"
          className="ml-auto"
        >
          {isSaving ? (
            <span className="flex items-center gap-2">
              <svg className="h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
              </svg>
              {__('Saving...', 'llmagnet-llm-txt-generator')}
            </span>
          ) : saveSuccess ? (
            <span className="flex items-center gap-2">
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
              {__('Saved', 'llmagnet-llm-txt-generator')}
            </span>
          ) : (
            __('Save', 'llmagnet-llm-txt-generator')
          )}
        </Button>
      </div>
    </div>
  );
}