import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Plus, Trash2 } from 'lucide-react';
import type { PdfFormField } from './types';

interface Props {
  field: PdfFormField;
  onChange: (updated: PdfFormField) => void;
}

export function PdfFormFieldEditor({ field, onChange }: Props) {
  const update = (patch: Partial<PdfFormField>) => onChange({ ...field, ...patch });

  return (
    <div className="space-y-4">
      <h3 className="text-xs font-semibold text-foreground">Field Properties</h3>

      {field.type !== 'spacer' && (
        <div className="space-y-1.5">
          <Label className="text-[11px]">Label</Label>
          <Input
            value={field.label}
            onChange={(e) => update({ label: e.target.value })}
            className="h-8 text-xs"
          />
        </div>
      )}

      {field.type === 'text-line' && (
        <>
          <div className="space-y-1.5">
            <Label className="text-[11px]">Number of Lines</Label>
            <Select value={String(field.lineCount || 1)} onValueChange={(v) => update({ lineCount: Number(v) })}>
              <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
              <SelectContent>
                {[1, 2, 3, 4, 5, 6, 8, 10].map((n) => (
                  <SelectItem key={n} value={String(n)}>{n}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-1.5">
            <Label className="text-[11px]">Line Spacing (px)</Label>
            <Input
              type="number"
              value={field.lineSpacing || 28}
              onChange={(e) => update({ lineSpacing: Number(e.target.value) })}
              className="h-8 text-xs"
              min={16}
              max={60}
            />
          </div>
        </>
      )}

      {field.type === 'signature-line' && (
        <>
          <div className="flex items-center justify-between">
            <Label className="text-[11px]">Show Date Line</Label>
            <Switch checked={field.showDate ?? true} onCheckedChange={(v) => update({ showDate: v })} />
          </div>
          <div className="flex items-center justify-between">
            <Label className="text-[11px]">Show Printed Name</Label>
            <Switch checked={field.showPrintedName ?? true} onCheckedChange={(v) => update({ showPrintedName: v })} />
          </div>
        </>
      )}

      {field.type === 'checkbox' && (
        <>
          <div className="space-y-1.5">
            <Label className="text-[11px]">Options</Label>
            {(field.options || []).map((opt, i) => (
              <div key={i} className="flex items-center gap-1.5">
                <Input
                  value={opt}
                  onChange={(e) => {
                    const opts = [...(field.options || [])];
                    opts[i] = e.target.value;
                    update({ options: opts });
                  }}
                  className="h-8 text-xs flex-1"
                />
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8 shrink-0"
                  onClick={() => update({ options: (field.options || []).filter((_, j) => j !== i) })}
                >
                  <Trash2 className="h-3.5 w-3.5 text-destructive" />
                </Button>
              </div>
            ))}
            <Button
              variant="outline"
              size="sm"
              className="text-xs h-7 gap-1"
              onClick={() => update({ options: [...(field.options || []), `Option ${(field.options?.length || 0) + 1}`] })}
            >
              <Plus className="h-3 w-3" /> Add Option
            </Button>
          </div>
          <div className="space-y-1.5">
            <Label className="text-[11px]">Columns</Label>
            <Select value={String(field.columns || 1)} onValueChange={(v) => update({ columns: Number(v) })}>
              <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
              <SelectContent>
                {[1, 2, 3, 4].map((n) => (
                  <SelectItem key={n} value={String(n)}>{n}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </>
      )}

      {field.type === 'text-block' && (
        <>
          <div className="space-y-1.5">
            <Label className="text-[11px]">Content</Label>
            <Textarea
              value={field.content || ''}
              onChange={(e) => update({ content: e.target.value })}
              className="text-xs min-h-[80px]"
            />
          </div>
          <div className="space-y-1.5">
            <Label className="text-[11px]">Font Size</Label>
            <Select value={String(field.fontSize || 10)} onValueChange={(v) => update({ fontSize: Number(v) })}>
              <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
              <SelectContent>
                {[8, 9, 10, 11, 12, 14, 16, 18, 20, 24].map((n) => (
                  <SelectItem key={n} value={String(n)}>{n}pt</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <Switch checked={field.bold ?? false} onCheckedChange={(v) => update({ bold: v })} />
              <Label className="text-[11px]">Bold</Label>
            </div>
            <div className="flex items-center gap-2">
              <Switch checked={field.italic ?? false} onCheckedChange={(v) => update({ italic: v })} />
              <Label className="text-[11px]">Italic</Label>
            </div>
          </div>
          <div className="space-y-1.5">
            <Label className="text-[11px]">Alignment</Label>
            <Select value={field.alignment || 'left'} onValueChange={(v: any) => update({ alignment: v })}>
              <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="left">Left</SelectItem>
                <SelectItem value="center">Center</SelectItem>
                <SelectItem value="right">Right</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </>
      )}

      {field.type === 'spacer' && (
        <div className="space-y-1.5">
          <Label className="text-[11px]">Height (px)</Label>
          <Input
            type="number"
            value={field.height || 20}
            onChange={(e) => update({ height: Number(e.target.value) })}
            className="h-8 text-xs"
            min={5}
            max={200}
          />
        </div>
      )}
    </div>
  );
}
