'use client';
import React, { useState, useEffect } from 'react';
import { Trash2, Edit, Save, X, ChevronDown, ChevronRight, Download, Upload, Trash } from 'lucide-react';
import { useRouter } from "next/navigation"; // Ændret fra next/router til next/navigation

// Definition af konfigurationer, der kan indlæses fra serveren
const serverConfigs = [
  { name: 'Sample Data', filename: 'sample.json' },
];

const LocalStorageExplorer = () => {
  const [storageItems, setStorageItems] = useState([]);
  const [expandedItems, setExpandedItems] = useState({});
  const [editingKey, setEditingKey] = useState(null);
  const [editValue, setEditValue] = useState('');
  const [selectedConfig, setSelectedConfig] = useState(''); // State til at håndtere dropdown-valg
  const router = useRouter(); // Brug useRouter fra next/navigation

  useEffect(() => {
    refreshItems();
  }, []);

  const refreshItems = () => {
    // Tjek om vi er i en browser-miljø (for at undgå problemer under server-side rendering)
    if (typeof window !== 'undefined') {
      const items = [];
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key === 'ally-supports-cache') continue; // Skip this key
        const value = localStorage.getItem(key);
        let parsedValue = value;
        try {
          parsedValue = JSON.parse(value);
        } catch (e) {
          // Value is not JSON, keep as string
        }
        items.push({ key, value: parsedValue, rawValue: value });
      }

      // Sort items alphabetically by key
      items.sort((a, b) => a.key.localeCompare(b.key));

      setStorageItems(items);
    }
  };

  const handleDelete = (key) => {
    if (window.confirm(`Are you sure you want to delete "${key}"?`)) {
      localStorage.removeItem(key);
      refreshItems();
    }
  };

  const handleEdit = (item) => {
    setEditingKey(item.key);
    setEditValue(item.rawValue);
  };

  const handleSave = () => {
    try {
      localStorage.setItem(editingKey, editValue);
      setEditingKey(null);
      refreshItems();
    } catch (e) {
      alert('Error saving value: ' + e.message);
    }
  };

  const toggleExpand = (key) => {
    setExpandedItems(prev => ({
      ...prev,
      [key]: !prev[key]
    }));
  };

  const formatValue = (value) => {
    if (typeof value === 'object' && value !== null) {
      return JSON.stringify(value, null, 2);
    }
    return value;
  };

  const renderValue = (item) => {
    const isObject = typeof item.value === 'object' && item.value !== null;

    if (!isObject) {
      return <span className="text-gray-600">{formatValue(item.value)}</span>;
    }

    return (
      <div>
        <button
          onClick={() => toggleExpand(item.key)}
          className="flex items-center gap-1 text-gray-700 hover:text-gray-900"
        >
          {expandedItems[item.key] ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
          {`{...} `}
          <span className="text-gray-500 text-sm">
            ({Object.keys(item.value).length} properties)
          </span>
        </button>

        {expandedItems[item.key] && (
          <pre className="mt-2 p-2 bg-gray-50 rounded text-sm overflow-auto">
            {formatValue(item.value)}
          </pre>
        )}
      </div>
    );
  };

  const estimateStorageUsage = () => {
    let totalBytes = 0;
    storageItems.forEach(item => {
      totalBytes += item.key.length * 2; // key length in bytes (UTF-16)
      totalBytes += item.rawValue.length * 2; // value length in bytes (UTF-16)
    });
    return (totalBytes / 1024).toFixed(2) + ' KB';
  };

  // Export localStorage to a JSON file
  const handleExport = () => {
    const exportData = {};
    storageItems.forEach(item => {
      exportData[item.key] = item.value;
    });
    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'localStorage-export.json';
    a.click();
    URL.revokeObjectURL(url);
  };

  // Import JSON file and merge into localStorage
  const handleImport = (event) => {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const importedData = JSON.parse(e.target.result);
        Object.entries(importedData).forEach(([key, value]) => {
          if (key !== 'ally-supports-cache') {
            localStorage.setItem(key, JSON.stringify(value));
          }
        });
        refreshItems();
        setSelectedConfig(''); // Nulstil dropdown til standardvalg
        alert('Import successful!');
      } catch (e) {
        alert('Error importing file: ' + e.message);
      }
    };
    reader.readAsText(file);
  };

  // Clear all localStorage items except 'ally-supports-cache'
  const handleClear = () => {
    if (window.confirm('Are you sure you want to clear all items ?')) {
      storageItems.forEach(item => {
        if (item.key !== 'ally-supports-cache') {
          localStorage.removeItem(item.key);
        }
      });
      refreshItems();
    }
  };

  // Load configuration from server
  const handleLoadConfig = async (filename) => {
    try {
      const response = await fetch(`/configs/${filename}`);
      if (!response.ok) {
        throw new Error('Failed to load configuration');
      }
      const configData = await response.json();

      // Clear current localStorage except 'ally-supports-cache'
      storageItems.forEach(item => {
        if (item.key !== 'ally-supports-cache') {
          localStorage.removeItem(item.key);
        }
      });

      // Load new configuration
      Object.entries(configData).forEach(([key, value]) => {
        localStorage.setItem(key, JSON.stringify(value));
      });

      refreshItems();
      setSelectedConfig(''); // Nulstil dropdown til standardvalg
      alert('Configuration loaded successfully!');
    } catch (error) {
      console.error('Error loading configuration:', error);
      alert('Error loading configuration');
    }
  };

  // Funktion til at håndtere klik på "Open Mock IDP"-knappen
  const handleOpenMockIdp = () => {
    // Erstat dette med den rette metode til routing i App Router
    router.push('?page=mock-idp.js&app=sdm');
  };

  return (
    <div className="p-6 w-full">
      <header className="mb-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-3xl font-bold mb-2">localStorage Explorer</h1>
            <p className="text-gray-600">
              {storageItems.length} items stored in your own browser localStorage ({estimateStorageUsage()})
            </p>
          </div>
          <div className="flex gap-2 items-center">

            {/* Export, Import, and Clear buttons */}
            <button
              onClick={handleExport}
              className="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 flex items-center gap-2"
            >
              <Download size={16} /> Export
            </button>
            <label className="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 flex items-center gap-2 cursor-pointer">
              <Upload size={16} /> Import
              <input
                type="file"
                accept=".json"
                onChange={handleImport}
                className="hidden"
              />
            </label>
            <button
              onClick={handleClear}
              className="px-4 py-2 bg-red-200 rounded-md hover:bg-red-300 flex items-center gap-2"
            >
              <Trash size={16} /> Clear
            </button>
          </div>
        </div>
      </header>

      <div className="border rounded-lg overflow-hidden">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Key
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Value
              </th>
              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                Actions
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {storageItems.map((item) => (
              <tr key={item.key} className="hover:bg-gray-50">
                <td className="px-6 py-4 whitespace-nowrap font-medium">
                  {item.key}
                </td>
                <td className="px-6 py-4">
                  {editingKey === item.key ? (
                    <textarea
                      value={editValue}
                      onChange={(e) => setEditValue(e.target.value)}
                      className="w-full p-2 border rounded-md font-mono text-sm"
                      rows={5}
                    />
                  ) : (
                    renderValue(item)
                  )}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  {editingKey === item.key ? (
                    <div className="flex justify-end gap-2">
                      <button
                        onClick={handleSave}
                        className="text-green-600 hover:text-green-900"
                      >
                        <Save size={16} />
                      </button>
                      <button
                        onClick={() => setEditingKey(null)}
                        className="text-gray-600 hover:text-gray-900"
                      >
                        <X size={16} />
                      </button>
                    </div>
                  ) : (
                    <div className="flex justify-end gap-2">
                      <button
                        onClick={() => handleEdit(item)}
                        className="text-blue-600 hover:text-blue-900"
                      >
                        <Edit size={16} />
                      </button>
                      <button
                        onClick={() => handleDelete(item.key)}
                        className="text-red-600 hover:text-red-900"
                      >
                        <Trash2 size={16} />
                      </button>
                    </div>
                  )}
                </td>
              </tr>
            ))}
            {storageItems.length === 0 && (
              <tr>
                <td colSpan={3} className="px-6 py-4 text-center text-gray-500">
                  No items in localStorage
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default LocalStorageExplorer;