/**
 * LinkPreview Component
 *
 * Live preview of how quick links will appear on the dealer page.
 * Shows two-column balanced layout with responsive toggle.
 */

'use client';

import { useState } from 'react';
import { LinkItem } from './LinkEditorContent';

interface LinkPreviewProps {
  links: LinkItem[];
}

export function LinkPreview({ links }: LinkPreviewProps) {
  const [viewMode, setViewMode] = useState<'desktop' | 'mobile'>('desktop');

  return (
    <div
      style={{
        background: 'rgba(30, 41, 59, 0.6)',
        border: '1px solid rgba(148, 163, 184, 0.2)',
        borderRadius: '20px',
        padding: '24px',
      }}
    >
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginBottom: '20px',
        }}
      >
        <h2
          style={{
            fontSize: '18px',
            fontWeight: 600,
            color: '#f8fafc',
            margin: 0,
          }}
        >
          Preview
        </h2>
        <div
          style={{
            display: 'flex',
            gap: '4px',
            background: 'rgba(15, 23, 42, 0.5)',
            borderRadius: '8px',
            padding: '4px',
          }}
        >
          <button
            onClick={() => setViewMode('desktop')}
            style={{
              padding: '6px 12px',
              fontSize: '12px',
              fontWeight: 500,
              borderRadius: '6px',
              border: 'none',
              cursor: 'pointer',
              transition: 'all 0.2s ease',
              background: viewMode === 'desktop' ? '#38bdf8' : 'transparent',
              color: viewMode === 'desktop' ? '#0f172a' : 'rgba(148, 163, 184, 0.85)',
            }}
          >
            Desktop
          </button>
          <button
            onClick={() => setViewMode('mobile')}
            style={{
              padding: '6px 12px',
              fontSize: '12px',
              fontWeight: 500,
              borderRadius: '6px',
              border: 'none',
              cursor: 'pointer',
              transition: 'all 0.2s ease',
              background: viewMode === 'mobile' ? '#38bdf8' : 'transparent',
              color: viewMode === 'mobile' ? '#0f172a' : 'rgba(148, 163, 184, 0.85)',
            }}
          >
            Mobile
          </button>
        </div>
      </div>

      {/* Preview container - simulates dealer page */}
      <div
        style={{
          background: 'rgba(15, 23, 42, 0.75)',
          border: '1px solid rgba(148, 163, 184, 0.15)',
          borderRadius: '16px',
          padding: '32px',
          maxWidth: viewMode === 'mobile' ? '320px' : 'none',
          margin: viewMode === 'mobile' ? '0 auto' : '0',
        }}
      >
        {links.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '32px 0' }}>
            <p style={{ color: 'rgba(148, 163, 184, 0.85)', fontSize: '16px', margin: 0 }}>
              No links yet
            </p>
            <p
              style={{
                color: 'rgba(148, 163, 184, 0.6)',
                fontSize: '14px',
                marginTop: '8px',
              }}
            >
              Add links to see preview
            </p>
          </div>
        ) : (
          <div>
            <h3
              style={{
                fontSize: '20px',
                fontWeight: 600,
                color: '#f8fafc',
                textAlign: 'center',
                marginBottom: '24px',
                margin: '0 0 24px 0',
              }}
            >
              Quick Links
            </h3>
            <ul
              style={{
                listStyle: 'none',
                padding: 0,
                margin: 0,
                columnCount: viewMode === 'desktop' ? 2 : 1,
                columnFill: 'balance',
                columnGap: '32px',
              }}
            >
              {links.map((link) => (
                <li
                  key={link.id}
                  style={{
                    breakInside: 'avoid',
                    padding: '8px 0',
                  }}
                >
                  <span
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: '8px',
                      color: '#38bdf8',
                      fontSize: '15px',
                    }}
                  >
                    <span style={{ color: 'rgba(148, 163, 184, 0.6)' }}>•</span>
                    <span
                      style={{
                        cursor: 'pointer',
                        transition: 'color 0.15s ease',
                      }}
                      onMouseEnter={(e) => (e.currentTarget.style.textDecoration = 'underline')}
                      onMouseLeave={(e) => (e.currentTarget.style.textDecoration = 'none')}
                    >
                      {link.label}
                    </span>
                    {link.openInNewTab && (
                      <svg
                        width="12"
                        height="12"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="rgba(148, 163, 184, 0.6)"
                        strokeWidth="2"
                      >
                        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
                        <polyline points="15 3 21 3 21 9" />
                        <line x1="10" y1="14" x2="21" y2="3" />
                      </svg>
                    )}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>

      {/* Info text */}
      <p
        style={{
          fontSize: '12px',
          color: 'rgba(148, 163, 184, 0.6)',
          marginTop: '16px',
          textAlign: 'center',
          margin: '16px 0 0 0',
        }}
      >
        Links automatically balance across columns
      </p>
    </div>
  );
}