import type { PenNode } from '@/types/pen'

// ---------------------------------------------------------------------------
// Inputs (additional)
// ---------------------------------------------------------------------------

export const inputSelect: PenNode = {
  id: 'shadcn-input-select',
  type: 'frame',
  name: 'Select',
  reusable: true,
  x: 0,
  y: 720,
  width: 240,
  height: 40,
  layout: 'horizontal',
  justifyContent: 'space_between',
  alignItems: 'center',
  padding: [0, 12, 0, 12],
  cornerRadius: 8,
  fill: [{ type: 'solid', color: '#FFFFFF' }],
  stroke: { thickness: 1, fill: [{ type: 'solid', color: '#E4E4E7' }] },
  children: [
    {
      id: 'shadcn-input-select-value',
      type: 'text',
      name: 'Placeholder',
      content: 'Select an option...',
      fontSize: 14,
      fill: [{ type: 'solid', color: '#A1A1AA' }],
    },
    {
      id: 'shadcn-input-select-chevron',
      type: 'text',
      name: 'Chevron',
      content: '\u25BE',
      fontSize: 12,
      fill: [{ type: 'solid', color: '#71717A' }],
    },
  ],
}

export const inputSlider: PenNode = {
  id: 'shadcn-input-slider',
  type: 'frame',
  name: 'Slider',
  reusable: true,
  x: 260,
  y: 728,
  width: 200,
  height: 24,
  children: [
    {
      id: 'shadcn-input-slider-track',
      type: 'rectangle',
      name: 'Track',
      x: 0,
      y: 10,
      width: 200,
      height: 4,
      cornerRadius: 2,
      fill: [{ type: 'solid', color: '#E4E4E7' }],
    },
    {
      id: 'shadcn-input-slider-fill',
      type: 'rectangle',
      name: 'Fill',
      x: 0,
      y: 10,
      width: 120,
      height: 4,
      cornerRadius: 2,
      fill: [{ type: 'solid', color: '#18181B' }],
    },
    {
      id: 'shadcn-input-slider-thumb',
      type: 'ellipse',
      name: 'Thumb',
      x: 112,
      y: 4,
      width: 16,
      height: 16,
      fill: [{ type: 'solid', color: '#FFFFFF' }],
      stroke: { thickness: 2, fill: [{ type: 'solid', color: '#18181B' }] },
    },
  ],
}

// ---------------------------------------------------------------------------
// Cards (additional)
// ---------------------------------------------------------------------------

export const dialog: PenNode = {
  id: 'shadcn-dialog',
  type: 'frame',
  name: 'Dialog',
  reusable: true,
  x: 0,
  y: 780,
  width: 400,
  height: 200,
  layout: 'vertical',
  gap: 16,
  padding: 24,
  cornerRadius: 12,
  fill: [{ type: 'solid', color: '#FFFFFF' }],
  stroke: { thickness: 1, fill: [{ type: 'solid', color: '#E4E4E7' }] },
  effects: [{ type: 'shadow', offsetX: 0, offsetY: 4, blur: 16, spread: -2, color: 'rgba(0,0,0,0.1)' }],
  children: [
    {
      id: 'shadcn-dialog-title',
      type: 'text',
      name: 'Title',
      content: 'Are you absolutely sure?',
      fontSize: 18,
      fontWeight: 600,
      fill: [{ type: 'solid', color: '#18181B' }],
      width: 'fill_container',
    },
    {
      id: 'shadcn-dialog-desc',
      type: 'text',
      name: 'Description',
      content: 'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',
      fontSize: 14,
      lineHeight: 1.5,
      fill: [{ type: 'solid', color: '#71717A' }],
      width: 'fill_container',
    },
    {
      id: 'shadcn-dialog-footer',
      type: 'frame',
      name: 'Footer',
      width: 'fill_container',
      height: 36,
      layout: 'horizontal',
      gap: 8,
      justifyContent: 'end',
      alignItems: 'center',
      children: [
        {
          id: 'shadcn-dialog-cancel',
          type: 'frame',
          name: 'Cancel',
          width: 80,
          height: 36,
          layout: 'horizontal',
          justifyContent: 'center',
          alignItems: 'center',
          cornerRadius: 8,
          stroke: { thickness: 1, fill: [{ type: 'solid', color: '#E4E4E7' }] },
          children: [
            {
              id: 'shadcn-dialog-cancel-label',
              type: 'text',
              name: 'Label',
              content: 'Cancel',
              fontSize: 14,
              fontWeight: 500,
              fill: [{ type: 'solid', color: '#18181B' }],
            },
          ],
        },
        {
          id: 'shadcn-dialog-confirm',
          type: 'frame',
          name: 'Confirm',
          width: 80,
          height: 36,
          layout: 'horizontal',
          justifyContent: 'center',
          alignItems: 'center',
          cornerRadius: 8,
          fill: [{ type: 'solid', color: '#18181B' }],
          children: [
            {
              id: 'shadcn-dialog-confirm-label',
              type: 'text',
              name: 'Label',
              content: 'Continue',
              fontSize: 14,
              fontWeight: 500,
              fill: [{ type: 'solid', color: '#FAFAFA' }],
            },
          ],
        },
      ],
    },
  ],
}

// ---------------------------------------------------------------------------
// Navigation (additional)
// ---------------------------------------------------------------------------

export const dropdownMenu: PenNode = {
  id: 'shadcn-dropdown-menu',
  type: 'frame',
  name: 'Dropdown Menu',
  reusable: true,
  x: 420,
  y: 780,
  width: 200,
  height: 176,
  layout: 'vertical',
  padding: 4,
  cornerRadius: 8,
  fill: [{ type: 'solid', color: '#FFFFFF' }],
  stroke: { thickness: 1, fill: [{ type: 'solid', color: '#E4E4E7' }] },
  effects: [{ type: 'shadow', offsetX: 0, offsetY: 4, blur: 12, spread: -2, color: 'rgba(0,0,0,0.08)' }],
  children: [
    {
      id: 'shadcn-dropdown-item-1',
      type: 'frame',
      name: 'Item',
      width: 'fill_container',
      height: 32,
      layout: 'horizontal',
      alignItems: 'center',
      padding: [0, 8, 0, 8],
      cornerRadius: 4,
      children: [
        { id: 'shadcn-dropdown-item-1-label', type: 'text', name: 'Label', content: 'Edit', fontSize: 13, fill: [{ type: 'solid', color: '#18181B' }] },
      ],
    },
    {
      id: 'shadcn-dropdown-item-2',
      type: 'frame',
      name: 'Item',
      width: 'fill_container',
      height: 32,
      layout: 'horizontal',
      alignItems: 'center',
      padding: [0, 8, 0, 8],
      cornerRadius: 4,
      children: [
        { id: 'shadcn-dropdown-item-2-label', type: 'text', name: 'Label', content: 'Duplicate', fontSize: 13, fill: [{ type: 'solid', color: '#18181B' }] },
      ],
    },
    {
      id: 'shadcn-dropdown-sep-1',
      type: 'frame',
      name: 'Separator',
      width: 'fill_container',
      height: 1,
      fill: [{ type: 'solid', color: '#E4E4E7' }],
    },
    {
      id: 'shadcn-dropdown-item-3',
      type: 'frame',
      name: 'Item',
      width: 'fill_container',
      height: 32,
      layout: 'horizontal',
      alignItems: 'center',
      padding: [0, 8, 0, 8],
      cornerRadius: 4,
      children: [
        { id: 'shadcn-dropdown-item-3-label', type: 'text', name: 'Label', content: 'Archive', fontSize: 13, fill: [{ type: 'solid', color: '#18181B' }] },
      ],
    },
    {
      id: 'shadcn-dropdown-sep-2',
      type: 'frame',
      name: 'Separator',
      width: 'fill_container',
      height: 1,
      fill: [{ type: 'solid', color: '#E4E4E7' }],
    },
    {
      id: 'shadcn-dropdown-item-delete',
      type: 'frame',
      name: 'Destructive Item',
      width: 'fill_container',
      height: 32,
      layout: 'horizontal',
      alignItems: 'center',
      padding: [0, 8, 0, 8],
      cornerRadius: 4,
      children: [
        { id: 'shadcn-dropdown-item-delete-label', type: 'text', name: 'Label', content: 'Delete', fontSize: 13, fill: [{ type: 'solid', color: '#EF4444' }] },
      ],
    },
  ],
}

export const pagination: PenNode = {
  id: 'shadcn-pagination',
  type: 'frame',
  name: 'Pagination',
  reusable: true,
  x: 0,
  y: 1000,
  width: 220,
  height: 36,
  layout: 'horizontal',
  gap: 4,
  alignItems: 'center',
  children: [
    {
      id: 'shadcn-pagination-prev',
      type: 'frame',
      name: 'Previous',
      width: 36,
      height: 36,
      layout: 'horizontal',
      justifyContent: 'center',
      alignItems: 'center',
      cornerRadius: 8,
      stroke: { thickness: 1, fill: [{ type: 'solid', color: '#E4E4E7' }] },
      children: [
        { id: 'shadcn-pagination-prev-icon', type: 'text', name: 'Icon', content: '\u2039', fontSize: 16, fill: [{ type: 'solid', color: '#18181B' }] },
      ],
    },
    {
      id: 'shadcn-pagination-p1',
      type: 'frame',
      name: 'Page 1',
      width: 36,
      height: 36,
      layout: 'horizontal',
      justifyContent: 'center',
      alignItems: 'center',
      cornerRadius: 8,
      fill: [{ type: 'solid', color: '#18181B' }],
      children: [
        { id: 'shadcn-pagination-p1-label', type: 'text', name: 'Label', content: '1', fontSize: 13, fontWeight: 500, fill: [{ type: 'solid', color: '#FAFAFA' }] },
      ],
    },
    {
      id: 'shadcn-pagination-p2',
      type: 'frame',
      name: 'Page 2',
      width: 36,
      height: 36,
      layout: 'horizontal',
      justifyContent: 'center',
      alignItems: 'center',
      cornerRadius: 8,
      stroke: { thickness: 1, fill: [{ type: 'solid', color: '#E4E4E7' }] },
      children: [
        { id: 'shadcn-pagination-p2-label', type: 'text', name: 'Label', content: '2', fontSize: 13, fill: [{ type: 'solid', color: '#18181B' }] },
      ],
    },
    {
      id: 'shadcn-pagination-p3',
      type: 'frame',
      name: 'Page 3',
      width: 36,
      height: 36,
      layout: 'horizontal',
      justifyContent: 'center',
      alignItems: 'center',
      cornerRadius: 8,
      stroke: { thickness: 1, fill: [{ type: 'solid', color: '#E4E4E7' }] },
      children: [
        { id: 'shadcn-pagination-p3-label', type: 'text', name: 'Label', content: '3', fontSize: 13, fill: [{ type: 'solid', color: '#18181B' }] },
      ],
    },
    {
      id: 'shadcn-pagination-next',
      type: 'frame',
      name: 'Next',
      width: 36,
      height: 36,
      layout: 'horizontal',
      justifyContent: 'center',
      alignItems: 'center',
      cornerRadius: 8,
      stroke: { thickness: 1, fill: [{ type: 'solid', color: '#E4E4E7' }] },
      children: [
        { id: 'shadcn-pagination-next-icon', type: 'text', name: 'Icon', content: '\u203A', fontSize: 16, fill: [{ type: 'solid', color: '#18181B' }] },
      ],
    },
  ],
}

// ---------------------------------------------------------------------------
// Feedback (additional)
// ---------------------------------------------------------------------------

export const toast: PenNode = {
  id: 'shadcn-toast',
  type: 'frame',
  name: 'Toast',
  reusable: true,
  x: 0,
  y: 1060,
  width: 360,
  height: 64,
  layout: 'horizontal',
  gap: 12,
  alignItems: 'center',
  padding: [0, 16, 0, 16],
  cornerRadius: 12,
  fill: [{ type: 'solid', color: '#FFFFFF' }],
  stroke: { thickness: 1, fill: [{ type: 'solid', color: '#E4E4E7' }] },
  effects: [{ type: 'shadow', offsetX: 0, offsetY: 4, blur: 12, spread: -2, color: 'rgba(0,0,0,0.08)' }],
  children: [
    {
      id: 'shadcn-toast-content',
      type: 'frame',
      name: 'Content',
      layout: 'vertical',
      gap: 2,
      children: [
        {
          id: 'shadcn-toast-title',
          type: 'text',
          name: 'Title',
          content: 'Event created',
          fontSize: 14,
          fontWeight: 600,
          fill: [{ type: 'solid', color: '#18181B' }],
        },
        {
          id: 'shadcn-toast-desc',
          type: 'text',
          name: 'Description',
          content: 'Your event has been created successfully.',
          fontSize: 13,
          fill: [{ type: 'solid', color: '#71717A' }],
        },
      ],
    },
  ],
}

export const progress: PenNode = {
  id: 'shadcn-progress',
  type: 'frame',
  name: 'Progress',
  reusable: true,
  x: 0,
  y: 1144,
  width: 240,
  height: 8,
  cornerRadius: 4,
  fill: [{ type: 'solid', color: '#E4E4E7' }],
  children: [
    {
      id: 'shadcn-progress-fill',
      type: 'rectangle',
      name: 'Fill',
      x: 0,
      y: 0,
      width: 156,
      height: 8,
      cornerRadius: 4,
      fill: [{ type: 'solid', color: '#18181B' }],
    },
  ],
}

export const skeleton: PenNode = {
  id: 'shadcn-skeleton',
  type: 'frame',
  name: 'Skeleton',
  reusable: true,
  x: 260,
  y: 1060,
  width: 280,
  height: 92,
  layout: 'vertical',
  gap: 12,
  children: [
    {
      id: 'shadcn-skeleton-line-1',
      type: 'rectangle',
      name: 'Line',
      width: 'fill_container',
      height: 20,
      cornerRadius: 4,
      fill: [{ type: 'solid', color: '#F4F4F5' }],
    },
    {
      id: 'shadcn-skeleton-line-2',
      type: 'rectangle',
      name: 'Line',
      width: 'fill_container',
      height: 16,
      cornerRadius: 4,
      fill: [{ type: 'solid', color: '#F4F4F5' }],
    },
    {
      id: 'shadcn-skeleton-line-3',
      type: 'rectangle',
      name: 'Line',
      width: 180,
      height: 16,
      cornerRadius: 4,
      fill: [{ type: 'solid', color: '#F4F4F5' }],
    },
  ],
}

export const tooltip: PenNode = {
  id: 'shadcn-tooltip',
  type: 'frame',
  name: 'Tooltip',
  reusable: true,
  x: 260,
  y: 1172,
  width: 120,
  height: 32,
  layout: 'horizontal',
  justifyContent: 'center',
  alignItems: 'center',
  padding: [0, 12, 0, 12],
  cornerRadius: 6,
  fill: [{ type: 'solid', color: '#18181B' }],
  children: [
    {
      id: 'shadcn-tooltip-text',
      type: 'text',
      name: 'Text',
      content: 'Tooltip text',
      fontSize: 12,
      fill: [{ type: 'solid', color: '#FAFAFA' }],
    },
  ],
}

// ---------------------------------------------------------------------------
// Layout (additional)
// ---------------------------------------------------------------------------

export const table: PenNode = {
  id: 'shadcn-table',
  type: 'frame',
  name: 'Table',
  reusable: true,
  x: 0,
  y: 1220,
  width: 480,
  height: 148,
  layout: 'vertical',
  cornerRadius: 8,
  fill: [{ type: 'solid', color: '#FFFFFF' }],
  stroke: { thickness: 1, fill: [{ type: 'solid', color: '#E4E4E7' }] },
  children: [
    {
      id: 'shadcn-table-header',
      type: 'frame',
      name: 'Header Row',
      width: 'fill_container',
      height: 40,
      layout: 'horizontal',
      alignItems: 'center',
      padding: [0, 16, 0, 16],
      fill: [{ type: 'solid', color: '#F4F4F5' }],
      cornerRadius: [8, 8, 0, 0],
      children: [
        { id: 'shadcn-table-h1', type: 'text', name: 'Name', content: 'Name', fontSize: 13, fontWeight: 600, fill: [{ type: 'solid', color: '#18181B' }], width: 'fill_container' },
        { id: 'shadcn-table-h2', type: 'text', name: 'Status', content: 'Status', fontSize: 13, fontWeight: 600, fill: [{ type: 'solid', color: '#18181B' }], width: 'fill_container' },
        { id: 'shadcn-table-h3', type: 'text', name: 'Amount', content: 'Amount', fontSize: 13, fontWeight: 600, fill: [{ type: 'solid', color: '#18181B' }], width: 'fill_container' },
      ],
    },
    {
      id: 'shadcn-table-sep-1',
      type: 'frame',
      name: 'Separator',
      width: 'fill_container',
      height: 1,
      fill: [{ type: 'solid', color: '#E4E4E7' }],
    },
    {
      id: 'shadcn-table-row-1',
      type: 'frame',
      name: 'Row',
      width: 'fill_container',
      height: 40,
      layout: 'horizontal',
      alignItems: 'center',
      padding: [0, 16, 0, 16],
      children: [
        { id: 'shadcn-table-r1c1', type: 'text', name: 'Name', content: 'John Doe', fontSize: 13, fill: [{ type: 'solid', color: '#18181B' }], width: 'fill_container' },
        { id: 'shadcn-table-r1c2', type: 'text', name: 'Status', content: 'Active', fontSize: 13, fill: [{ type: 'solid', color: '#71717A' }], width: 'fill_container' },
        { id: 'shadcn-table-r1c3', type: 'text', name: 'Amount', content: '$250.00', fontSize: 13, fill: [{ type: 'solid', color: '#18181B' }], width: 'fill_container' },
      ],
    },
    {
      id: 'shadcn-table-sep-2',
      type: 'frame',
      name: 'Separator',
      width: 'fill_container',
      height: 1,
      fill: [{ type: 'solid', color: '#E4E4E7' }],
    },
    {
      id: 'shadcn-table-row-2',
      type: 'frame',
      name: 'Row',
      width: 'fill_container',
      height: 40,
      layout: 'horizontal',
      alignItems: 'center',
      padding: [0, 16, 0, 16],
      children: [
        { id: 'shadcn-table-r2c1', type: 'text', name: 'Name', content: 'Jane Smith', fontSize: 13, fill: [{ type: 'solid', color: '#18181B' }], width: 'fill_container' },
        { id: 'shadcn-table-r2c2', type: 'text', name: 'Status', content: 'Pending', fontSize: 13, fill: [{ type: 'solid', color: '#71717A' }], width: 'fill_container' },
        { id: 'shadcn-table-r2c3', type: 'text', name: 'Amount', content: '$150.00', fontSize: 13, fill: [{ type: 'solid', color: '#18181B' }], width: 'fill_container' },
      ],
    },
  ],
}

export const btnOutline: PenNode = {
  id: 'shadcn-btn-outline',
  type: 'frame',
  name: 'Outline Button',
  reusable: true,
  x: 560,
  y: 0,
  width: 120,
  height: 40,
  layout: 'horizontal',
  justifyContent: 'center',
  alignItems: 'center',
  padding: [0, 20, 0, 20],
  cornerRadius: 8,
  stroke: { thickness: 1, fill: [{ type: 'solid', color: '#E4E4E7' }] },
  children: [
    {
      id: 'shadcn-btn-outline-label',
      type: 'text',
      name: 'Label',
      content: 'Button',
      fontSize: 14,
      fontWeight: 600,
      fill: [{ type: 'solid', color: '#18181B' }],
    },
  ],
}

export const btnLink: PenNode = {
  id: 'shadcn-btn-link',
  type: 'frame',
  name: 'Link Button',
  reusable: true,
  x: 700,
  y: 0,
  width: 120,
  height: 40,
  layout: 'horizontal',
  justifyContent: 'center',
  alignItems: 'center',
  padding: [0, 20, 0, 20],
  cornerRadius: 8,
  children: [
    {
      id: 'shadcn-btn-link-label',
      type: 'text',
      name: 'Label',
      content: 'Button',
      fontSize: 14,
      fontWeight: 600,
      fill: [{ type: 'solid', color: '#18181B' }],
    },
  ],
}

export const extraComponents: PenNode[] = [
  btnOutline,
  btnLink,
  inputSelect,
  inputSlider,
  dialog,
  dropdownMenu,
  pagination,
  toast,
  progress,
  skeleton,
  tooltip,
  table,
]
