import * as React from 'react';
import { Link } from 'react-router-dom';
import DashboardCard from '../../components/DashboardCard';
import { NodeList } from './NodeList';
import { TypeGroupGrid } from './TypeGroupGrid';

// Node type display order
const NODE_TYPE_ORDER = ['metric', 'cube', 'dimension', 'transform', 'source'];

// Helper to group nodes by type
function groupNodesByType(nodes, hasMoreMap = {}) {
  const groups = {};
  nodes.forEach(node => {
    const type = (node.type || 'unknown').toLowerCase();
    if (!groups[type]) groups[type] = [];
    groups[type].push(node);
  });

  // Return types in defined order, only including types with nodes
  return NODE_TYPE_ORDER.filter(type => groups[type]?.length > 0).map(type => ({
    type,
    nodes: groups[type],
    hasMore: hasMoreMap[type] ?? false,
  }));
}

// My Nodes Section (owned + watched, with tabs)
export function MyNodesSection({
  ownedNodes,
  ownedHasMore = {},
  watchedNodes,
  recentlyEdited,
  editedHasMore = {},
  username,
  loading,
}) {
  const [activeTab, setActiveTab] = React.useState('owned');
  const hasAutoSwitchedTab = React.useRef(false);

  // Once data loads, auto-switch to "edited" if user has no owned nodes but has edits
  React.useEffect(() => {
    if (hasAutoSwitchedTab.current) return;
    if (ownedNodes.length === 0 && recentlyEdited.length > 0) {
      setActiveTab('edited');
      hasAutoSwitchedTab.current = true;
    } else if (ownedNodes.length > 0) {
      hasAutoSwitchedTab.current = true; // owned nodes exist, stick with default
    }
  }, [ownedNodes.length, recentlyEdited.length]);
  const [groupByType, setGroupByType] = React.useState(() => {
    const stored = localStorage.getItem('workspace_groupByType');
    return stored === null ? true : stored === 'true';
  });

  const ownedNames = new Set(ownedNodes.map(n => n.name));
  const watchedOnly = watchedNodes.filter(n => !ownedNames.has(n.name));

  const allMyNodeNames = new Set([
    ...ownedNames,
    ...watchedNodes.map(n => n.name),
  ]);
  const editedOnly = recentlyEdited.filter(n => !allMyNodeNames.has(n.name));

  const getDisplayNodes = () => {
    switch (activeTab) {
      case 'owned':
        return ownedNodes;
      case 'watched':
        return watchedOnly;
      case 'edited':
        return recentlyEdited;
      default:
        return ownedNodes;
    }
  };
  const displayNodes = getDisplayNodes();

  const hasAnyContent =
    ownedNodes.length > 0 ||
    watchedOnly.length > 0 ||
    recentlyEdited.length > 0;
  const maxDisplay = 8;

  // Handle group by type toggle
  const handleGroupByTypeChange = e => {
    const checked = e.target.checked;
    setGroupByType(checked);
    localStorage.setItem('workspace_groupByType', checked.toString());
  };

  // Pick the right hasMore map for the active tab
  const activeHasMore =
    activeTab === 'owned'
      ? ownedHasMore
      : activeTab === 'edited'
      ? editedHasMore
      : {};

  // Group nodes by type if enabled
  const groupedData = groupByType
    ? groupNodesByType(displayNodes, activeHasMore)
    : null;

  return (
    <DashboardCard
      title="My Nodes"
      actionLink={`/?ownedBy=${username}`}
      loading={loading}
      cardStyle={{
        padding: '0.25rem 0.75rem',
      }}
      emptyState={
        <div style={{ padding: '0.75rem 0' }}>
          <p
            style={{ fontSize: '12px', color: '#666', marginBottom: '0.75rem' }}
          >
            No nodes yet.
          </p>
          <div style={{ display: 'flex', gap: '0.75rem' }}>
            <div
              style={{
                flex: 1,
                padding: '0.75rem',
                backgroundColor: 'var(--card-bg, #f8f9fa)',
                border: '1px dashed var(--border-color, #dee2e6)',
                borderRadius: '6px',
                textAlign: 'center',
              }}
            >
              <div style={{ fontSize: '16px', marginBottom: '0.25rem' }}>
                ➕
              </div>
              <div
                style={{
                  fontSize: '11px',
                  fontWeight: '500',
                  marginBottom: '0.25rem',
                }}
              >
                Create a node
              </div>
              <p
                style={{
                  fontSize: '10px',
                  color: '#666',
                  marginBottom: '0.5rem',
                }}
              >
                Build your data model
              </p>
              <Link
                to="/create/source"
                style={{
                  display: 'inline-block',
                  padding: '3px 8px',
                  fontSize: '10px',
                  backgroundColor: 'var(--primary-color, #4a90d9)',
                  color: '#fff',
                  borderRadius: '4px',
                  textDecoration: 'none',
                }}
              >
                Create →
              </Link>
            </div>
            <div
              style={{
                flex: 1,
                padding: '0.75rem',
                backgroundColor: 'var(--card-bg, #f8f9fa)',
                border: '1px dashed var(--border-color, #dee2e6)',
                borderRadius: '6px',
                textAlign: 'center',
              }}
            >
              <div style={{ fontSize: '16px', marginBottom: '0.25rem' }}>
                👤
              </div>
              <div
                style={{
                  fontSize: '11px',
                  fontWeight: '500',
                  marginBottom: '0.25rem',
                }}
              >
                Claim ownership
              </div>
              <p
                style={{
                  fontSize: '10px',
                  color: '#666',
                  marginBottom: '0.5rem',
                }}
              >
                Add yourself as owner
              </p>
              <Link
                to="/"
                style={{
                  display: 'inline-block',
                  padding: '3px 8px',
                  fontSize: '10px',
                  backgroundColor: '#6c757d',
                  color: '#fff',
                  borderRadius: '4px',
                  textDecoration: 'none',
                }}
              >
                Browse →
              </Link>
            </div>
          </div>
        </div>
      }
    >
      {hasAnyContent && (
        <>
          {/* Tabs and Group by Type Toggle */}
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              gap: '0.5rem',
              marginBottom: '0.5rem',
              paddingTop: '0.5rem',
              paddingBottom: displayNodes.length > 0 ? '0.5rem' : '0',
              borderBottom:
                displayNodes.length > 0
                  ? '1px solid var(--border-color, #eee)'
                  : 'none',
            }}
          >
            <div style={{ display: 'flex', gap: '0.5rem' }}>
              <button
                onClick={() => setActiveTab('owned')}
                style={{
                  padding: '4px 10px',
                  fontSize: '11px',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: 'pointer',
                  backgroundColor:
                    activeTab === 'owned'
                      ? 'var(--primary-color, #4a90d9)'
                      : '#e9ecef',
                  color: activeTab === 'owned' ? '#fff' : '#495057',
                }}
              >
                Owned
              </button>
              <button
                onClick={() => setActiveTab('watched')}
                style={{
                  padding: '4px 10px',
                  fontSize: '11px',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: 'pointer',
                  backgroundColor:
                    activeTab === 'watched'
                      ? 'var(--primary-color, #4a90d9)'
                      : '#e9ecef',
                  color: activeTab === 'watched' ? '#fff' : '#495057',
                }}
              >
                Watched ({watchedOnly.length})
              </button>
              <button
                onClick={() => setActiveTab('edited')}
                style={{
                  padding: '4px 10px',
                  fontSize: '11px',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: 'pointer',
                  backgroundColor:
                    activeTab === 'edited'
                      ? 'var(--primary-color, #4a90d9)'
                      : '#e9ecef',
                  color: activeTab === 'edited' ? '#fff' : '#495057',
                }}
              >
                Recent Edits
              </button>
            </div>

            {/* Group by Type Toggle */}
            {displayNodes.length > 0 && (
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: '0.5rem',
                }}
              >
                <input
                  type="checkbox"
                  id="groupByType"
                  checked={groupByType}
                  onChange={handleGroupByTypeChange}
                  style={{ cursor: 'pointer' }}
                />
                <label
                  htmlFor="groupByType"
                  style={{
                    fontSize: '11px',
                    cursor: 'pointer',
                    userSelect: 'none',
                    color: '#495057',
                    fontWeight: '500',
                  }}
                >
                  Group by Type
                </label>
              </div>
            )}
          </div>

          {displayNodes.length > 0 ? (
            <>
              {groupByType ? (
                <TypeGroupGrid
                  groupedData={groupedData}
                  username={username}
                  activeTab={activeTab}
                />
              ) : (
                <>
                  <NodeList
                    nodes={displayNodes.slice(0, maxDisplay)}
                    showUpdatedAt={true}
                  />
                  {displayNodes.length > maxDisplay && (
                    <div
                      style={{
                        textAlign: 'center',
                        padding: '0.5rem',
                        fontSize: '12px',
                        color: '#666',
                      }}
                    >
                      +{displayNodes.length - maxDisplay} more
                    </div>
                  )}
                </>
              )}
            </>
          ) : (
            <div
              style={{
                padding: '1rem',
                textAlign: 'center',
                color: '#666',
                fontSize: '12px',
              }}
            >
              {activeTab === 'owned' && 'No owned nodes'}
              {activeTab === 'watched' && 'No watched nodes'}
              {activeTab === 'edited' && 'No recent edits'}
            </div>
          )}
        </>
      )}
    </DashboardCard>
  );
}