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

'use client';

import { BlogGridProps } from '@/lib/page-builder/types';
import { EditorProps } from '@/lib/page-builder/types';
import { mockBlogPosts } from '@/constant/mock-blog-posts';

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

const filterTypeOptions = [
  { value: 'latest', label: 'Latest Posts' },
  { value: 'featured', label: 'Featured Posts Only' }
];

export default function BlogGridEditor({ props, onUpdate }: EditorProps<BlogGridProps>) {

  const handleChange = (field: keyof BlogGridProps, 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">Blog Grid 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 || ''}
            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="Latest Blog Posts"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Description (Optional)</label>
          <textarea
            value={props.description || ''}
            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="Stay updated with our latest articles..."
          />
        </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 || 3}
              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>
            <label className="block text-sm font-medium text-var-text mb-2">Posts to Show</label>
            <input
              type="number"
              min={1}
              max={20}
              value={props.postsToShow || 6}
              onChange={(e) => handleChange('postsToShow', parseInt(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>
      </div>

      {/* Source Selection */}
      <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>
        </div>
      </div>

      {/* Filter Options */}
      <div className="space-y-4 border-t border-var-border pt-4">
        <h5 className="font-medium text-var-text">Filter Options</h5>
        
        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Filter Type</label>
          <select
            value={props.filterType || 'latest'}
            onChange={(e) => handleChange('filterType', e.target.value as 'latest' | 'featured')}
            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"
          >
            {filterTypeOptions.map(opt => (
              <option key={opt.value} value={opt.value}>{opt.label}</option>
            ))}
          </select>
        </div>

        <div>
          <label className="flex items-center cursor-pointer">
            <input
              type="checkbox"
              checked={props.showFeatured || false}
              onChange={(e) => handleChange('showFeatured', e.target.checked)}
              className="mr-2 text-var-primary focus:ring-var-primary rounded"
            />
            <span className="text-sm text-var-text">Show Only Featured Posts</span>
          </label>
          <p className="text-xs text-var-text-muted mt-1 ml-6">Override filter type to show featured posts</p>
        </div>
      </div>

      {/* API Settings */}
      {props.source === 'api' && (
        <div className="space-y-4 border-t border-var-border pt-4">
          <h5 className="font-medium text-var-text">API Settings</h5>
          
          <div>
            <label className="block text-sm font-medium text-var-text mb-2">API Endpoint</label>
            <input
              type="text"
              value={props.apiEndpoint || '/api/frontend/getblogs'}
              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/getblogs"
            />
          </div>
        </div>
      )}

      {/* Mock Data Management */}
      {props.source === 'mock' && (
        <div className="space-y-4 border-t border-var-border pt-4">
          <h5 className="font-medium text-var-text">Mock Data</h5>
          <div className="bg-var-info-bg border border-var-info-border rounded-lg p-4">
            <p className="text-sm text-var-info-text">
              Using {props.mockPosts?.length || 0} mock posts. 
              <button
                onClick={() => handleChange('mockPosts', mockBlogPosts)}
                className="ml-2 text-var-primary underline hover:text-var-primary-hover"
              >
                Reset to default
              </button>
            </p>
          </div>
        </div>
      )}

      {/* View All Button Settings */}
      <div className="space-y-4 border-t border-var-border pt-4">
        <h5 className="font-medium text-var-text">View All Button</h5>
        
        <div>
          <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 text-var-text">Show View All Button</span>
          </label>
        </div>

        {props.showViewAllButton !== false && (
          <>
            <div>
              <label className="block text-sm font-medium text-var-text mb-2">Button Text</label>
              <input
                type="text"
                value={props.viewAllText || 'View All Posts'}
                onChange={(e) => handleChange('viewAllText', 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="View All Posts"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-var-text mb-2">Button Link</label>
              <input
                type="text"
                value={props.viewAllLink || '/blog'}
                onChange={(e) => handleChange('viewAllLink', 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="/blog"
              />
            </div>
          </>
        )}
      </div>

      {/* Preview Info */}
      <div className="bg-var-surface-hover border border-var-border rounded-lg p-4 text-sm text-var-text">
        <p className="font-medium mb-1 text-var-text">Preview:</p>
        <p className="text-var-text-muted">• Posts to show: {props.postsToShow || 6}</p>
        <p className="text-var-text-muted">• Columns: {props.columns || 3}</p>
        <p className="text-var-text-muted">• Filter: {props.filterType === 'featured' ? 'Featured only' : 'Latest'}</p>
        {props.showFeatured && <p className="text-var-text-muted">• Featured posts only (override)</p>}
        <p className="text-var-text-muted">• Data source: {props.source === 'api' ? 'Live API' : 'Mock Data'}</p>
      </div>
    </div>
  );
}