import React, { useState } from 'react';
import { ChevronLeft, Braces, List, Type, Hash, ToggleLeft, Minus, Eye, Code, Copy, Check } from 'lucide-react';

const PostmanTable = ({ data, title = "JSON Data" }) => {
  const [currentPath, setCurrentPath] = useState([]);
  const [renderHtml, setRenderHtml] = useState(true);
  const [copiedItems, setCopiedItems] = useState(new Set());

  // Get current data based on path
  const getCurrentData = () => {
    let current = data;
    for (const pathSegment of currentPath) {
      if (current && typeof current === 'object') {
        current = current[pathSegment];
      }
    }
    return current;
  };

  const currentData = getCurrentData();

  // Check if current data is an array for horizontal table display
  const isArrayView = Array.isArray(currentData);
  const isObjectView = currentData && typeof currentData === 'object' && !Array.isArray(currentData);

  // Generate table headers for array view
  const getArrayHeaders = () => {
    if (!isArrayView || currentData.length === 0) return [];
    
    // Check if array contains objects or primitives
    const firstItem = currentData[0];
    if (firstItem && typeof firstItem === 'object' && !Array.isArray(firstItem)) {
      // Array of objects - get all possible keys
      const headers = new Set();
      currentData.forEach(item => {
        if (item && typeof item === 'object') {
          Object.keys(item).forEach(key => headers.add(key));
        }
      });
      return Array.from(headers);
    } else {
      // Array of primitives - use "Value" as header
      return ['Value'];
    }
  };

  const headers = getArrayHeaders();

  // Check if value contains HTML
  const isHtmlContent = (value) => {
    return value && typeof value === 'string' && 
           (value.includes('<') && value.includes('>')) &&
           /<[^>]+>/.test(value);
  };

  // Copy value to clipboard
  const copyToClipboard = async (value, itemId) => {
    try {
      const textValue = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
      await navigator.clipboard.writeText(textValue);
      
      // Show feedback
      setCopiedItems(prev => new Set([...prev, itemId]));
      setTimeout(() => {
        setCopiedItems(prev => {
          const newSet = new Set(prev);
          newSet.delete(itemId);
          return newSet;
        });
      }, 2500);
    } catch (err) {
      // Fallback for older browsers
      const textArea = document.createElement('textarea');
      textArea.value = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand('copy');
      document.body.removeChild(textArea);
      
      // Show feedback for fallback too
      setCopiedItems(prev => new Set([...prev, itemId]));
      setTimeout(() => {
        setCopiedItems(prev => {
          const newSet = new Set(prev);
          newSet.delete(itemId);
          return newSet;
        });
      }, 2500);
    }
  };

  // Handle row click - navigate to item details
  const handleRowClick = (index, key = null) => {
    if (isArrayView) {
      setCurrentPath([...currentPath, index]);
    } else if (isObjectView && key) {
      // Navigate into object property
      setCurrentPath([...currentPath, key]);
    }
  };

  // Handle back navigation
  const handleBack = () => {
    if (currentPath.length > 0) {
      const newPath = currentPath.slice(0, -1);
      setCurrentPath(newPath);
    }
  };

  // Handle breadcrumb navigation
  const handleBreadcrumbClick = (index) => {
    if (index === 0) {
      // Click on "Root" - go to root
      setCurrentPath([]);
    } else {
      // Click on specific breadcrumb - navigate to that level
      const newPath = currentPath.slice(0, index);
      setCurrentPath(newPath);
    }
  };

  // Generate breadcrumb
  const getBreadcrumb = () => {
    const parts = ['Root'];
    currentPath.forEach((segment, index) => {
      if (typeof segment === 'number') {
        parts.push(segment.toString());
      } else {
        parts.push(segment);
      }
    });
    return parts;
  };

  // Format value for display in table (truncated)
  const formatValue = (value) => {
    if (value === null) return 'null';
    if (value === undefined) return 'undefined';
    if (typeof value === 'string') {
      // Truncate long strings for table display
      if (value.length > 100) {
        return value.substring(0, 100) + '...';
      }
      // Replace newlines with spaces for single-line display
      return value.replace(/\n/g, ' ').replace(/\s+/g, ' ');
    }
    if (typeof value === 'boolean') return value.toString();
    if (typeof value === 'number') return value.toString();
    if (typeof value === 'object') {
      if (Array.isArray(value)) return `Array(${value.length})`;
      return `Object(${Object.keys(value).length})`;
    }
    return String(value);
  };

  // Format value for display in details view (full text)
  const formatFullValue = (value) => {
    if (value === null) return 'null';
    if (value === undefined) return 'undefined';
    if (typeof value === 'string') return value; // Show full string without truncation
    if (typeof value === 'boolean') return value.toString();
    if (typeof value === 'number') return value.toString();
    if (typeof value === 'object') {
      if (Array.isArray(value)) return `Array(${value.length})`;
      return `Object(${Object.keys(value).length})`;
    }
    return String(value);
  };

  // Get type-specific styling and icon
  const getTypeStyle = (value) => {
    if (value === null) {
      return {
        color: 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-300',
        icon: <Minus className="h-3 w-3" />,
        type: 'null'
      };
    }
    
    if (Array.isArray(value)) {
      return {
        color: 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300',
        icon: <List className="h-3 w-3" />,
        type: 'array'
      };
    }
    
    switch (typeof value) {
      case 'object':
        return {
          color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-300',
          icon: <Braces className="h-3 w-3" />,
          type: 'object'
        };
      case 'string':
        return {
          color: 'bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-300',
          icon: <Type className="h-3 w-3" />,
          type: 'string'
        };
      case 'number':
        return {
          color: 'bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-300',
          icon: <Hash className="h-3 w-3" />,
          type: 'number'
        };
      case 'boolean':
        return {
          color: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300',
          icon: <ToggleLeft className="h-3 w-3" />,
          type: 'boolean'
        };
      default:
        return {
          color: 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-300',
          icon: <Minus className="h-3 w-3" />,
          type: 'unknown'
        };
    }
  };


  // Render value with appropriate styling (for table view)
  const renderValue = (value) => {
    const typeStyle = getTypeStyle(value);
    const formattedValue = formatValue(value);
    
    return (
      <span className={`inline-flex items-center space-x-1 px-2 py-1 rounded text-xs font-medium ${typeStyle.color}`}>
        {typeStyle.icon}
        <span>{formattedValue}</span>
      </span>
    );
  };

  // Render value with full text (for detail view)
  const renderFullValue = (value) => {
    const typeStyle = getTypeStyle(value);
    const formattedValue = formatFullValue(value);
    const hasHtml = isHtmlContent(value);
    
    return (
      <div className="relative">
        <span className={`inline-flex items-start space-x-2 px-2 py-1 rounded text-xs font-medium ${typeStyle.color}`}>
          <span className="flex-shrink-0 mt-0.5">{typeStyle.icon}</span>
          <span className="whitespace-pre-wrap break-words flex-1">
            {hasHtml && renderHtml ? (
              <div dangerouslySetInnerHTML={{ __html: String(value) }} />
            ) : (
              formattedValue
            )}
          </span>
        </span>
        
        {/* HTML Toggle Buttons */}
        {hasHtml && (
          <div className="absolute -top-1 -right-1 flex">
            <button
              onClick={() => setRenderHtml(true)}
              className={`px-1.5 py-0.5 text-xs rounded-l ${
                renderHtml 
                  ? 'bg-blue-500 text-white' 
                  : 'bg-gray-200 text-gray-600 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-500'
              }`}
              title="Render HTML"
            >
              <Eye className="h-3 w-3" />
            </button>
            <button
              onClick={() => setRenderHtml(false)}
              className={`px-1.5 py-0.5 text-xs rounded-r ${
                !renderHtml 
                  ? 'bg-blue-500 text-white' 
                  : 'bg-gray-200 text-gray-600 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-500'
              }`}
              title="Show Raw HTML"
            >
              <Code className="h-3 w-3" />
            </button>
          </div>
        )}
      </div>
    );
  };

  // Get value type
  const getValueType = (value) => {
    if (value === null) return 'null';
    if (Array.isArray(value)) return 'array';
    return typeof value;
  };

  return (
    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 overflow-hidden">
      {/* Header with Breadcrumb */}
      <div className="bg-gray-50 dark:bg-gray-700 px-4 py-3 border-b border-gray-200 dark:border-gray-600">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            {currentPath.length > 0 && (
              <button
                onClick={handleBack}
                className="flex items-center space-x-1 text-blue-600 hover:text-blue-800 transition-colors"
              >
                <ChevronLeft className="w-4 h-4" />
                <span className="text-sm">Back</span>
              </button>
            )}
            <div className="flex items-center space-x-1 text-sm">
              {getBreadcrumb().map((part, index) => (
                <React.Fragment key={index}>
                  {index > 0 && <span className="text-gray-400 dark:text-gray-500">/</span>}
                  <button
                    onClick={() => handleBreadcrumbClick(index)}
                    className={`px-2 py-1 rounded transition-colors ${
                      index === getBreadcrumb().length - 1 
                        ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 font-semibold cursor-default' 
                        : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
                    }`}
                    disabled={index === getBreadcrumb().length - 1}
                  >
                    {part}
                  </button>
                </React.Fragment>
              ))}
            </div>
          </div>
          <div className="text-sm text-gray-500 dark:text-gray-400">
            {isArrayView && `${currentData.length} items`}
            {isObjectView && `${Object.keys(currentData).length} properties`}
          </div>
        </div>
      </div>

      {/* Content */}
      <div className="overflow-auto max-h-96">
        {isArrayView ? (
          // Horizontal table for arrays
          <table className="w-full">
            <thead className="bg-gray-50 dark:bg-gray-700 sticky top-0 z-10">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-12">
                  #
                </th>
                {headers.map(header => (
                  <th key={header} className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                    {header}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
              {currentData.map((item, index) => {
                const isPrimitiveArray = headers.length === 1 && headers[0] === 'Value';
                return (
                  <tr 
                    key={index}
                    onClick={() => handleRowClick(index)}
                    className="hover:bg-blue-50 dark:hover:bg-blue-900/20 cursor-pointer transition-colors duration-150"
                  >
                    <td className="px-4 py-3 text-sm font-mono text-gray-500 dark:text-gray-400">
                      {index}
                    </td>
                    {isPrimitiveArray ? (
                      <td className="px-4 py-3 text-sm">
                        {renderValue(item)}
                      </td>
                    ) : (
                      headers.map(header => (
                        <td key={header} className="px-4 py-3 text-sm">
                          {renderValue(item?.[header])}
                        </td>
                      ))
                    )}
                  </tr>
                );
              })}
            </tbody>
          </table>
        ) : isObjectView ? (
          // Vertical key-value table for objects
          <table className="w-full">
            <thead className="bg-gray-50 dark:bg-gray-700 sticky top-0 z-10">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-1/3">
                  Key
                </th>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                  Value
                </th>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-16">
                  
                </th>
              </tr>
            </thead>
            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
              {Object.entries(currentData).map(([key, value]) => {
                const isClickable = typeof value === 'object' && value !== null;
                return (
                  <tr 
                    key={key} 
                    onClick={() => isClickable && handleRowClick(null, key)}
                    className={`transition-colors duration-150 ${
                      isClickable 
                        ? 'hover:bg-blue-50 dark:hover:bg-blue-900/20 cursor-pointer' 
                        : 'hover:bg-gray-50 dark:hover:bg-gray-700'
                    }`}
                  >
                    <td className="px-4 py-3 text-sm font-mono font-semibold text-gray-900 dark:text-gray-100">
                      {key}
                    </td>
                    <td className="px-4 py-3 text-sm">
                      {renderFullValue(value)}
                    </td>
                    <td className="px-4 py-3 text-sm">
                      <button
                        onClick={(e) => {
                          e.stopPropagation(); // Prevent row click
                          copyToClipboard(value, `${currentPath.join('.')}.${key}`);
                        }}
                        className="p-1 hover:bg-gray-100 dark:hover:bg-gray-600 rounded transition-colors"
                        title={copiedItems.has(`${currentPath.join('.')}.${key}`) ? "Copied!" : "Copy value"}
                      >
                        {copiedItems.has(`${currentPath.join('.')}.${key}`) ? (
                          <Check className="h-3 w-3 text-green-500" />
                        ) : (
                          <Copy className="h-3 w-3 text-gray-500 dark:text-gray-400" />
                        )}
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        ) : (
          // Fallback for primitive values
          <div className="p-4">
            <div className="text-center text-gray-500 dark:text-gray-400">
              <div className="text-lg font-mono text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words">
                {formatFullValue(currentData)}
              </div>
              <div className="text-sm mt-2">
                Type: {getValueType(currentData)}
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Footer */}
      <div className="bg-gray-50 dark:bg-gray-700 px-4 py-2 border-t border-gray-200 dark:border-gray-600">
        <div className="flex items-center justify-between text-sm text-gray-600 dark:text-gray-300">
          <span>
            {isArrayView ? `Array with ${currentData.length} items` : 
             isObjectView ? `Object with ${Object.keys(currentData).length} properties` :
             `Primitive value (${getValueType(currentData)})`}
          </span>
          <span>
            Path: {currentPath.length === 0 ? 'Root' : currentPath.join(' → ')}
          </span>
        </div>
      </div>
    </div>
  );
};

export default PostmanTable;