import { GripVertical, Trash2 } from 'lucide-react';
import type { PdfFormField } from './types';

interface Props {
  fields: PdfFormField[];
  selectedId: string | null;
  onSelect: (id: string) => void;
  onDelete: (id: string) => void;
  onReorder: (fromIndex: number, toIndex: number) => void;
}

export function PdfFormCanvas({ fields, selectedId, onSelect, onDelete, onReorder }: Props) {
  const moveUp = (i: number) => { if (i > 0) onReorder(i, i - 1); };
  const moveDown = (i: number) => { if (i < fields.length - 1) onReorder(i, i + 1); };

  if (fields.length === 0) {
    return (
      <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm italic border-2 border-dashed border-border rounded-lg m-4">
        Add fields from the left palette to build your form
      </div>
    );
  }

  return (
    <div className="flex-1 overflow-y-auto p-6">
      <div className="max-w-[7in] mx-auto bg-white border border-border shadow-sm rounded p-8 min-h-[9in] space-y-4">
        {fields.map((field, i) => (
          <div
            key={field.id}
            onClick={() => onSelect(field.id)}
            className={`group relative rounded-md p-3 cursor-pointer transition-all ${
              selectedId === field.id
                ? 'ring-2 ring-primary bg-primary/5'
                : 'hover:bg-muted/50 border border-transparent hover:border-border'
            }`}
          >
            {/* Controls */}
            <div className="absolute right-2 top-2 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
              <button onClick={(e) => { e.stopPropagation(); moveUp(i); }} className="p-1 rounded hover:bg-accent text-muted-foreground text-[10px]" title="Move up">↑</button>
              <button onClick={(e) => { e.stopPropagation(); moveDown(i); }} className="p-1 rounded hover:bg-accent text-muted-foreground text-[10px]" title="Move down">↓</button>
              <button onClick={(e) => { e.stopPropagation(); onDelete(field.id); }} className="p-1 rounded hover:bg-destructive/10 text-destructive" title="Remove">
                <Trash2 className="h-3.5 w-3.5" />
              </button>
            </div>

            {/* Field Preview */}
            {field.type === 'text-line' && (
              <div>
                <div className="text-[11px] font-medium text-foreground mb-2">{field.label}</div>
                {Array.from({ length: field.lineCount || 1 }).map((_, li) => (
                  <div key={li} className="border-b border-foreground/30 mb-1" style={{ height: `${field.lineSpacing || 28}px` }} />
                ))}
              </div>
            )}

            {field.type === 'signature-line' && (
              <div className="pt-8">
                <div className="flex gap-6">
                  <div className="flex-1">
                    <div className="border-b border-foreground/50 mb-1 h-6" />
                    <div className="text-[10px] text-muted-foreground">{field.label}</div>
                  </div>
                  {field.showDate && (
                    <div className="w-[140px]">
                      <div className="border-b border-foreground/50 mb-1 h-6" />
                      <div className="text-[10px] text-muted-foreground">Date</div>
                    </div>
                  )}
                </div>
                {field.showPrintedName && (
                  <div className="mt-4">
                    <div className="border-b border-foreground/50 mb-1 h-6" />
                    <div className="text-[10px] text-muted-foreground">Printed Name</div>
                  </div>
                )}
              </div>
            )}

            {field.type === 'checkbox' && (
              <div>
                <div className="text-[11px] font-medium text-foreground mb-2">{field.label}</div>
                <div className={`grid gap-2`} style={{ gridTemplateColumns: `repeat(${field.columns || 1}, 1fr)` }}>
                  {(field.options || []).map((opt, oi) => (
                    <div key={oi} className="flex items-center gap-2">
                      <div className="h-4 w-4 border border-foreground/50 rounded-sm shrink-0" />
                      <span className="text-xs text-foreground">{opt}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {field.type === 'text-block' && (
              <div
                style={{
                  fontSize: `${field.fontSize || 10}pt`,
                  fontWeight: field.bold ? 'bold' : 'normal',
                  fontStyle: field.italic ? 'italic' : 'normal',
                  textAlign: field.alignment || 'left',
                }}
                className="text-foreground whitespace-pre-wrap"
              >
                {field.content || 'Text block...'}
              </div>
            )}

            {field.type === 'spacer' && (
              <div className="flex items-center justify-center text-[10px] text-muted-foreground border border-dashed border-border rounded" style={{ height: `${field.height || 20}px` }}>
                spacer ({field.height || 20}px)
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}
