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

'use client';

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

export default function PricingSectionEditor({ props, onUpdate }: EditorProps<PricingSectionProps>) {

  const handleChange = (field: keyof PricingSectionProps, 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">Pricing 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 || 'Choose Your Growth Plan'}
            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="Choose Your Growth Plan"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Description</label>
          <textarea
            value={props.description || 'Scale your SEO with our proven guest posting packages.'}
            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="Scale your SEO with our proven guest posting packages."
          />
        </div>
      </div>

      {/* Toggle Settings */}
      <div className="space-y-3 border-t border-var-border pt-4">
        <label className="flex items-center cursor-pointer">
          <input
            type="checkbox"
            checked={props.showToggle !== false}
            onChange={(e) => handleChange('showToggle', e.target.checked)}
            className="mr-2 text-var-primary focus:ring-var-primary rounded"
          />
          <span className="text-sm font-medium text-var-text">Show Package Type Toggle (Standard/Special Niches)</span>
        </label>
        
        {props.showToggle !== false && (
          <div>
            <label className="block text-sm font-medium text-var-text mb-2">Default Package Type</label>
            <select
              value={props.defaultPackageType || 'standard'}
              onChange={(e) => handleChange('defaultPackageType', e.target.value as 'standard' | 'special_niche')}
              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"
            >
              <option value="standard">Standard Packages</option>
              <option value="special_niche">Special Niches</option>
            </select>
          </div>
        )}
      </div>

      {/* CTA Settings */}
      <div className="space-y-3 border-t border-var-border pt-4">
        <label className="flex items-center cursor-pointer">
          <input
            type="checkbox"
            checked={props.showCustomPlanCTA !== false}
            onChange={(e) => handleChange('showCustomPlanCTA', e.target.checked)}
            className="mr-2 text-var-primary focus:ring-var-primary rounded"
          />
          <span className="text-sm font-medium text-var-text">Show Custom Plan 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/packages'}
              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/packages"
            />
            <p className="text-xs text-var-text-muted mt-1">Endpoint will receive ?type=standard or ?type=special_niche</p>
          </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">• Show toggle: {props.showToggle !== false ? 'Yes' : 'No'}</p>
        <p className="text-var-text-muted">• Show custom CTA: {props.showCustomPlanCTA !== false ? 'Yes' : 'No'}</p>
        {props.source === 'api' && <p className="text-var-text-muted">• API Endpoint: {props.apiEndpoint || '/api/frontend/packages'}</p>}
      </div>
    </div>
  );
}