// src/app/components/admin/editors/PortfolioSectionEditor.tsx

'use client';

import { PortfolioSectionProps } from '@/lib/page-builder/types';
import { EditorProps } from '@/lib/page-builder/types';

const columnOptions = [
  { value: 2, label: '2 Columns' },
  { value: 3, label: '3 Columns' },
  { value: 4, label: '4 Columns' }
];

export default function PortfolioSectionEditor({ props, onUpdate }: EditorProps<PortfolioSectionProps>) {

  const handleChange = (field: keyof PortfolioSectionProps, value: unknown) => {
    onUpdate({ ...props, [field]: value });
  };

  return (
    <div className="space-y-6 max-h-[70vh] overflow-y-auto p-1">
      <h4 className="font-semibold text-lg text-var-text border-b border-var-border pb-2">Portfolio Section Configuration</h4>
      
      {/* Basic Settings */}
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Section Title</label>
          <input
            type="text"
            value={props.title || 'Featured On'}
            onChange={(e) => handleChange('title', e.target.value)}
            className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
            placeholder="Featured On"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Description</label>
          <textarea
            value={props.description || 'Get featured on authoritative websites trusted by millions of readers worldwide.'}
            onChange={(e) => handleChange('description', e.target.value)}
            className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
            rows={2}
            placeholder="Get featured on authoritative websites..."
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Badge Text</label>
          <input
            type="text"
            value={props.badgeText || 'Premium Publishing Network'}
            onChange={(e) => handleChange('badgeText', e.target.value)}
            className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
            placeholder="Premium Publishing Network"
          />
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-var-text mb-2">Columns</label>
            <select
              value={props.columns || 4}
              onChange={(e) => handleChange('columns', parseInt(e.target.value))}
              className="w-full p-2 bg-var-input border border-var-border rounded text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
            >
              {columnOptions.map(opt => (
                <option key={opt.value} value={opt.value}>{opt.label}</option>
              ))}
            </select>
          </div>
        </div>
      </div>

      {/* Visibility Toggles */}
      <div className="space-y-3 border-t border-var-border pt-4">
        <label className="flex items-center cursor-pointer">
          <input
            type="checkbox"
            checked={props.showBadge !== false}
            onChange={(e) => handleChange('showBadge', e.target.checked)}
            className="mr-2 text-var-primary focus:ring-var-primary rounded"
          />
          <span className="text-sm font-medium text-var-text">Show Badge</span>
        </label>

        <label className="flex items-center cursor-pointer">
          <input
            type="checkbox"
            checked={props.showViewAllButton !== false}
            onChange={(e) => handleChange('showViewAllButton', e.target.checked)}
            className="mr-2 text-var-primary focus:ring-var-primary rounded"
          />
          <span className="text-sm font-medium text-var-text">Show View All Button</span>
        </label>

        <label className="flex items-center cursor-pointer">
          <input
            type="checkbox"
            checked={props.showBottomCTA !== false}
            onChange={(e) => handleChange('showBottomCTA', e.target.checked)}
            className="mr-2 text-var-primary focus:ring-var-primary rounded"
          />
          <span className="text-sm font-medium text-var-text">Show Bottom CTA Section</span>
        </label>
      </div>

      {/* Data Source */}
      <div className="space-y-3 border-t border-var-border pt-4">
        <label className="block text-sm font-medium text-var-text">Data Source</label>
        <div className="flex gap-4">
          <label className="flex items-center cursor-pointer">
            <input
              type="radio"
              checked={props.source === 'api'}
              onChange={() => handleChange('source', 'api')}
              className="mr-2 text-var-primary focus:ring-var-primary"
            />
            <span className="text-sm text-var-text">API (Live Data)</span>
          </label>
          <label className="flex items-center cursor-pointer">
            <input
              type="radio"
              checked={props.source === 'mock'}
              onChange={() => handleChange('source', 'mock')}
              className="mr-2 text-var-primary focus:ring-var-primary"
            />
            <span className="text-sm text-var-text">Mock Data</span>
          </label>
          <label className="flex items-center cursor-pointer">
            <input
              type="radio"
              checked={!props.source}
              onChange={() => handleChange('source', undefined)}
              className="mr-2 text-var-primary focus:ring-var-primary"
            />
            <span className="text-sm text-var-text">Default (Built-in)</span>
          </label>
        </div>

        {props.source === 'api' && (
          <div>
            <label className="block text-sm font-medium text-var-text mb-2">API Endpoint</label>
            <input
              type="text"
              value={props.apiEndpoint || '/api/frontend/websites'}
              onChange={(e) => handleChange('apiEndpoint', e.target.value)}
              className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
              placeholder="/api/frontend/websites"
            />
          </div>
        )}
      </div>

      {/* Button Settings */}
      <div className="space-y-4 border-t border-var-border pt-4">
        <h5 className="font-semibold text-var-text">View All Button</h5>
        
        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Button Text</label>
          <input
            type="text"
            value={props.viewAllButtonText || 'View All Websites'}
            onChange={(e) => handleChange('viewAllButtonText', e.target.value)}
            className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Button Link</label>
          <input
            type="text"
            value={props.viewAllButtonLink || '/websites'}
            onChange={(e) => handleChange('viewAllButtonLink', e.target.value)}
            className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
          />
        </div>

        <h5 className="font-semibold text-var-text mt-4">Bottom CTA Section</h5>
        
        <div>
          <label className="block text-sm font-medium text-var-text mb-2">CTA Title</label>
          <input
            type="text"
            value={props.bottomCTATitle || 'Ready to Boost Your Authority?'}
            onChange={(e) => handleChange('bottomCTATitle', e.target.value)}
            className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">CTA Description</label>
          <textarea
            value={props.bottomCTADescription || 'Join thousands of brands that have increased their visibility and credibility through our premium publishing network.'}
            onChange={(e) => handleChange('bottomCTADescription', e.target.value)}
            className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
            rows={2}
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">CTA Button Text</label>
          <input
            type="text"
            value={props.bottomCTAButtonText || 'View All Websites'}
            onChange={(e) => handleChange('bottomCTAButtonText', e.target.value)}
            className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">CTA Button Link</label>
          <input
            type="text"
            value={props.bottomCTAButtonLink || '/websites'}
            onChange={(e) => handleChange('bottomCTAButtonLink', e.target.value)}
            className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Trust Text</label>
          <input
            type="text"
            value={props.trustText || 'Trusted by 5,000+ businesses worldwide • 98% client satisfaction'}
            onChange={(e) => handleChange('trustText', e.target.value)}
            className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
          />
        </div>
      </div>

      {/* Preview Info */}
      <div className="bg-var-surface-hover border border-var-border rounded-lg p-4 text-sm">
        <p className="font-medium mb-1 text-var-text">Preview Info:</p>
        <p className="text-var-text-muted">• Data source: {props.source === 'api' ? 'Live API' : props.source === 'mock' ? 'Mock Data' : 'Built-in Default'}</p>
        <p className="text-var-text-muted">• Columns: {props.columns || 4}</p>
        <p className="text-var-text-muted">• Show badge: {props.showBadge !== false ? 'Yes' : 'No'}</p>
        <p className="text-var-text-muted">• Show view all button: {props.showViewAllButton !== false ? 'Yes' : 'No'}</p>
        <p className="text-var-text-muted">• Show bottom CTA: {props.showBottomCTA !== false ? 'Yes' : 'No'}</p>
      </div>
    </div>
  );
}