import React, { useState, useEffect } from 'react';

const MashinaCMS = () => {
  const [activeTab, setActiveTab] = useState(1);
  const [currentEditItem, setCurrentEditItem] = useState(null);
  const [formData, setFormData] = useState({});
  const [validationErrors, setValidationErrors] = useState({});
  const [charCount, setCharCount] = useState(0);
  const [successMessage, setSuccessMessage] = useState('');
  const [showRawData, setShowRawData] = useState(false);
  
  const [season1Data, setSeason1Data] = useState([
    // נתונים שלך כאן...
  ]);
  
  const [season2Data, setSeason2Data] = useState([
    // נתונים שלך כאן...
  ]);

  const formatDateToCMS = (dateStr) => {
    if (!dateStr) return '';
    const parts = dateStr.split('/');
    if (parts.length !== 3) return dateStr;
    return `${parts[2]}-${parts[1]}-${parts[0]} 12:00:00`;
  };

  const validateExternalDescription = (text) => {
    if (!text) return 0;
    return text.length <= 72;
  };
  
  const countExternalDescriptionChars = (text) => {
    if (!text) return 0;
    return text.length;
  };
  
  const getCharCountColor = (count) => {
    if (count > 72) return 'text-red-500 font-bold animate-pulse';
    if (count > 65) return 'text-red-500';
    if (count > 50) return 'text-yellow-500';
    return 'text-green-500';
  };
  
  const handleInputChange = (field, value) => {
    const newFormData = { ...formData, [field]: value };
    if (field === 'episodeName') {
      newFormData.episodeTitle = value;
    }
    if (field === 'externalDescription') {
      setCharCount(countExternalDescriptionChars(value));
    }
    setFormData(newFormData);
    
    const errors = {};
    if (field === 'externalDescription' && !validateExternalDescription(value)) {
      errors.externalDescription = 'התיאור החיצוני חורג מהמגבלה של 72 תווים';
    }
    setValidationErrors({ ...validationErrors, [field]: errors[field] });
  };
  
  const saveItem = () => {
    if (currentEditItem && currentEditItem.startsWith('1-')) {
      const newData = [...season1Data];
      const index = newData.findIndex(item => item.id === currentEditItem);
      if (index !== -1) {
        newData[index] = { ...newData[index], ...formData };
        setSeason1Data(newData);
      }
    } else if (currentEditItem && currentEditItem.startsWith('2-')) {
      const newData = [...season2Data];
      const index = newData.findIndex(item => item.id === currentEditItem);
      if (index !== -1) {
        newData[index] = { ...newData[index], ...formData };
        setSeason2Data(newData);
      }
    }
    setSuccessMessage('השינויים נשמרו בהצלחה!');
    setTimeout(() => setSuccessMessage(''), 3000);
    setCurrentEditItem(null);
    setFormData({});
    setCharCount(0);
  };
  
  const cancelEdit = () => {
    setCurrentEditItem(null);
    setFormData({});
    setCharCount(0);
    setValidationErrors({});
  };
  
  const editItem = (item) => {
    setCurrentEditItem(item.id);
    setFormData({ ...item });
    if (item.externalDescription) {
      setCharCount(countExternalDescriptionChars(item.externalDescription));
    }
  };
  
  const copyToClipboard = (text) => {
    navigator.clipboard.writeText(text)
      .then(() => {
        setSuccessMessage('הטקסט הועתק ללוח!');
        setTimeout(() => setSuccessMessage(''), 2000);
      })
      .catch(err => {
        console.error('Error copying text: ', err);
      });
  };

  const toggleRawData = () => {
    setShowRawData(!showRawData);
  };

  const getCurrentSeasonData = () => {
    return activeTab === 1 ? season1Data : season2Data;
  };

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">Mashina CMS</h1>
      <div className="flex space-x-2 mb-4">
        <button onClick={() => setActiveTab(1)} className={activeTab === 1 ? 'font-bold' : ''}>
          עונה 1
        </button>
        <button onClick={() => setActiveTab(2)} className={activeTab === 2 ? 'font-bold' : ''}>
          עונה 2
        </button>
      </div>

      {successMessage && <div className="text-green-600">{successMessage}</div>}

      {showRawData ? (
        <pre className="bg-gray-100 p-4">{JSON.stringify(getCurrentSeasonData(), null, 2)}</pre>
      ) : (
        <div className="grid grid-cols-1 gap-4">
          {getCurrentSeasonData().map(item => (
            <div key={item.id} className="border p-4 rounded shadow">
              <h2 className="text-xl">{item.episodeName}</h2>
              <p>{item.externalDescription}</p>
              <div className="flex space-x-2 mt-2">
                <button onClick={() => editItem(item)} className="text-blue-600">עריכה</button>
                <button onClick={() => copyToClipboard(item.kalturaId)} className="text-green-600">העתק מזהה</button>
              </div>
            </div>
          ))}
        </div>
      )}

      {currentEditItem && (
        <div className="mt-6">
          <h2 className="text-xl font-bold mb-2">עריכת פריט</h2>
          <div className="space-y-2">
            <input
              type="text"
              placeholder="שם פרק"
              value={formData.episodeName || ''}
              onChange={(e) => handleInputChange('episodeName', e.target.value)}
              className="border p-2 w-full"
            />
            <input
              type="text"
              placeholder="תיאור חיצוני"
              value={formData.externalDescription || ''}
              onChange={(e) => handleInputChange('externalDescription', e.target.value)}
              className="border p-2 w-full"
            />
            <div className={getCharCountColor(charCount)}>
              {charCount} תווים (מקסימום 72)
            </div>
            {validationErrors.externalDescription && (
              <div className="text-red-500">{validationErrors.externalDescription}</div>
            )}
            <div className="flex space-x-2">
              <button onClick={saveItem} className="bg-green-500 text-white px-4 py-2 rounded">שמור</button>
              <button onClick={cancelEdit} className="bg-gray-500 text-white px-4 py-2 rounded">בטל</button>
            </div>
          </div>
        </div>
      )}

      <div className="mt-6">
        <button onClick={toggleRawData} className="text-purple-600 underline">
          {showRawData ? 'הסתר נתונים גולמיים' : 'הצג נתונים גולמיים'}
        </button>
      </div>
    </div>
  );
};

export default MashinaCMS;