import React, { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@alga-psa/ui/components/Card';
import { Button } from '@alga-psa/ui/components/Button';
import { useClientNotes } from '@alga-psa/clients/hooks';
import { DEFAULT_BLOCK, TextEditor } from '@alga-psa/ui/editor';
import { Save, Loader2 } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@alga-psa/ui/components/Alert';
import { PartialBlock } from '@blocknote/core';
import { useTranslation } from '@alga-psa/ui/lib/i18n/client';

interface ClientNotesPanelProps {
  clientId: string;
  /**
   * Legacy plain-text notes from the old system.
   * Displayed read-only above the rich text editor for backward compatibility.
   */
  legacyNotes?: string | null;
}

export const ClientNotesPanel: React.FC<ClientNotesPanelProps> = ({
  clientId,
  legacyNotes
}) => {
  const { t } = useTranslation('msp/clients');
  const {
    noteContent,
    noteDocument,
    lastUpdated,
    isLoading,
    error,
    saveNote,
    refresh,
    isSaving
  } = useClientNotes(clientId);

  // Track local edits for saving (avoid jitter from revalidation).
  const [editorContent, setEditorContent] = useState<PartialBlock[] | null>(null);

  const handleSave = async () => {
    const contentToSave = editorContent ?? noteContent ?? DEFAULT_BLOCK;
    await saveNote(contentToSave);
  };

  if (isLoading) {
    return <Card className="h-64 animate-pulse bg-gray-50" />;
  }

  return (
    <Card className="bg-white">
      <CardHeader className="pb-2">
        <div className="flex flex-row items-center justify-between">
          <CardTitle>{t('clientNotesPanel.title', { defaultValue: 'Notes & Quick Info' })}</CardTitle>
          <Button
            id="save-client-note-btn"
            variant="ghost"
            size="sm"
            className="h-8 gap-2 text-primary-600 hover:text-primary-700 hover:bg-primary-50"
            onClick={handleSave}
            disabled={isSaving || !!error}
          >
            {isSaving ? (
              <Loader2 size={14} className="animate-spin" />
            ) : (
              <Save size={14} />
            )}
            {t('clientNotesPanel.save', { defaultValue: 'Save' })}
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        {/* Legacy notes display for backward compatibility */}
        {legacyNotes && legacyNotes.trim() !== '' && (
          <div className="bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md p-4 mb-4">
            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{t('clientNotesPanel.initialNote', { defaultValue: 'Initial Note' })}</h4>
            <p className="whitespace-pre-wrap text-sm text-gray-600 dark:text-gray-400">{legacyNotes}</p>
          </div>
        )}

        {error && (
          <div className="mb-3">
            <Alert variant="destructive">
              <AlertTitle>{t('clientNotesPanel.loadErrorTitle', { defaultValue: 'Notes failed to load' })}</AlertTitle>
              <AlertDescription>
                <div className="flex items-center justify-between gap-3">
                  <span className="text-sm">
                    {error instanceof Error ? error.message : t('clientNotesPanel.unknownError', { defaultValue: 'Unknown error' })}
                  </span>
                  <Button
                    id="retry-client-notes-btn"
                    variant="outline"
                    size="sm"
                    onClick={() => void refresh()}
                  >
                    {t('clientNotesPanel.retry', { defaultValue: 'Retry' })}
                  </Button>
                </div>
              </AlertDescription>
            </Alert>
          </div>
        )}
        <div className="min-h-[200px]">
          <TextEditor
            id={`client-${clientId}-notes-editor`}
            // Remount when the backing document changes (or first loads) so saved notes show up on open.
            key={`${clientId}-${noteDocument?.document_id ?? 'new'}-${noteContent ? 'loaded' : 'empty'}`}
            initialContent={
              noteContent && Array.isArray(noteContent) && noteContent.length > 0
                ? noteContent
                : typeof noteContent === 'string'
                ? noteContent
                : DEFAULT_BLOCK
            }
            onContentChange={setEditorContent}
          />
        </div>

        {lastUpdated && (
          <div className="flex justify-end mt-2">
            <span className="text-xs text-gray-500">
              {t('clientNotesPanel.lastUpdated', { defaultValue: 'Last updated: {{value}}', value: new Date(lastUpdated).toLocaleString() })}
            </span>
          </div>
        )}
      </CardContent>
    </Card>
  );
};
