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

'use client';

import { ResultsSectionProps, ResultStat } from '@/lib/page-builder/types';
import { EditorProps } from '@/lib/page-builder/types';

const iconOptions = [
  { value: 'TrendingUp', label: 'Trending Up' },
  { value: 'Users', label: 'Users' },
  { value: 'Globe', label: 'Globe' },
  { value: 'Award', label: 'Award' },
  { value: 'BarChart', label: 'Bar Chart' },
  { value: 'Target', label: 'Target' },
  { value: 'Zap', label: 'Zap' },
  { value: 'Star', label: 'Star' }
];

export default function ResultsSectionEditor({ props, onUpdate }: EditorProps<ResultsSectionProps>) {

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

  const updateStat = (index: number, field: keyof ResultStat, value: unknown) => {
    const updatedStats = [...(props.stats || [])];
    updatedStats[index] = { ...updatedStats[index], [field]: value };
    handleChange('stats', updatedStats);
  };

  const addStat = () => {
    const newStat: ResultStat = {
      icon: 'TrendingUp',
      value: 100,
      suffix: '+',
      label: 'New Stat',
      description: 'Stat description'
    };
    const updatedStats = [...(props.stats || []), newStat];
    handleChange('stats', updatedStats);
  };

  const removeStat = (index: number) => {
    const updatedStats = props.stats?.filter((_, i) => i !== index) || [];
    handleChange('stats', updatedStats);
  };

  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">Results 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 || 'Proven'}
            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="Proven"
          />
        </div>

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

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Description</label>
          <textarea
            value={props.description || 'Real numbers that showcase the quality and impact of our premium guest posting services'}
            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="Section description..."
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Animation Duration (ms)</label>
          <input
            type="number"
            min={500}
            max={5000}
            step={100}
            value={props.animationDuration || 2000}
            onChange={(e) => handleChange('animationDuration', 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"
            placeholder="2000"
          />
          <p className="text-xs text-var-text-muted mt-1">Duration of the counting animation in milliseconds</p>
        </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.showStats !== false}
            onChange={(e) => handleChange('showStats', e.target.checked)}
            className="mr-2 text-var-primary focus:ring-var-primary rounded"
          />
          <span className="text-sm font-medium text-var-text">Show Stats</span>
        </label>
      </div>

      {/* Stats Editor */}
      {props.showStats !== false && (
        <div className="space-y-4 border-t border-var-border pt-4">
          <div className="flex justify-between items-center">
            <h5 className="font-semibold text-var-text">Statistics</h5>
            <button
              onClick={addStat}
              className="px-3 py-1 bg-var-primary text-white rounded text-sm hover:bg-var-primary-hover transition-colors"
            >
              Add Stat
            </button>
          </div>

          <div className="space-y-4">
            {props.stats?.map((stat, index) => (
              <div key={index} className="border border-var-border rounded-lg p-4 space-y-3 bg-var-surface">
                <div className="flex justify-between items-start">
                  <h6 className="font-medium text-sm text-var-text">Stat {index + 1}</h6>
                  <button
                    onClick={() => removeStat(index)}
                    className="text-var-danger text-sm hover:text-var-danger-hover"
                  >
                    Remove
                  </button>
                </div>

                <div>
                  <label className="block text-xs text-var-text-muted mb-1">Icon</label>
                  <select
                    value={stat.icon}
                    onChange={(e) => updateStat(index, 'icon', e.target.value)}
                    className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                  >
                    {iconOptions.map(icon => (
                      <option key={icon.value} value={icon.value}>{icon.label}</option>
                    ))}
                  </select>
                </div>

                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="block text-xs text-var-text-muted mb-1">Value</label>
                    <input
                      type="number"
                      value={stat.value}
                      onChange={(e) => updateStat(index, 'value', parseInt(e.target.value))}
                      className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                    />
                  </div>
                  <div>
                    <label className="block text-xs text-var-text-muted mb-1">Suffix</label>
                    <input
                      type="text"
                      value={stat.suffix}
                      onChange={(e) => updateStat(index, 'suffix', e.target.value)}
                      className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                      placeholder="+ or %"
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-xs text-var-text-muted mb-1">Label</label>
                  <input
                    type="text"
                    value={stat.label}
                    onChange={(e) => updateStat(index, 'label', e.target.value)}
                    className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                  />
                </div>

                <div>
                  <label className="block text-xs text-var-text-muted mb-1">Description</label>
                  <input
                    type="text"
                    value={stat.description}
                    onChange={(e) => updateStat(index, 'description', e.target.value)}
                    className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                  />
                </div>
              </div>
            ))}
          </div>

          {(!props.stats || props.stats.length === 0) && (
            <div className="text-center py-8 text-var-text-muted">
              No stats added. Click Add Stat to get started.
            </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">• Stats count: {props.stats?.length || 0}</p>
        <p className="text-var-text-muted">• Show stats: {props.showStats !== false ? 'Yes' : 'No'}</p>
        <p className="text-var-text-muted">• Animation duration: {props.animationDuration || 2000}ms</p>
      </div>
    </div>
  );
}