import React from 'react';
import { useShallow } from 'zustand/react/shallow';
import { useSettingsStore, type PluginSettingsTab } from './store';
import { getNativeSettingsTabComponent } from './native-settings-tabs';
import { t } from './helpers';
import styles from './Settings.module.css';

function TabIcon({ d }: { d: string }) {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: d }} />
  );
}

const TAB_ITEMS = [
  { id: 'agent', key: 'settings.tabs.agent', d: '<path d="M12 2a5 5 0 0 1 5 5c0 2.76-2.24 5-5 5s-5-2.24-5-5a5 5 0 0 1 5-5z"/><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>' },
  { id: 'me', key: 'settings.tabs.me', d: '<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>' },
  { id: 'interface', key: 'settings.tabs.interface', d: '<circle cx="12" cy="12" r="3"/><path d="M3 12h3"/><path d="M18 12h3"/><path d="M12 3v3"/><path d="M12 18v3"/><path d="m5.64 5.64 2.12 2.12"/><path d="m16.24 16.24 2.12 2.12"/><path d="m18.36 5.64-2.12 2.12"/><path d="m7.76 16.24-2.12 2.12"/>' },
  { id: 'general', key: 'settings.tabs.general', d: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>' },
  { id: 'browser', key: 'settings.tabs.browser', d: '<circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 0 20"/><path d="M12 2a15.3 15.3 0 0 0 0 20"/>' },
  { id: 'work', key: 'settings.tabs.work', d: '<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>' },
  { id: 'skills', key: 'settings.tabs.skills', d: '<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>' },
  { id: 'bridge', key: 'settings.tabs.bridge', d: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>' },
  { id: 'providers', key: 'settings.tabs.providers', d: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>' },
  { id: 'media', key: 'settings.tabs.media', d: '<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>' },
  { id: 'sharing', key: 'settings.tabs.sharing', d: '<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/>' },
  { id: 'access', key: 'settings.tabs.access', d: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M8 12h8"/><path d="M12 8v8"/><path d="M7 19v2"/><path d="M17 19v2"/>' },
  { id: 'plugins', key: 'settings.tabs.plugins', d: '<path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"/><line x1="16" y1="8" x2="2" y2="22"/><line x1="17.5" y1="15" x2="9" y2="15"/>' },
  { id: 'experiments', key: 'settings.tabs.experiments', d: '<path d="M10 2v6.5L5.5 18a3 3 0 0 0 2.7 4h7.6a3 3 0 0 0 2.7-4L14 8.5V2"/><path d="M8 2h8"/><path d="M7.5 15h9"/>' },
  { id: 'security', key: 'settings.tabs.security', d: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>' },
  { id: 'about', key: 'settings.tabs.about', d: '<circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>' },
];

const FALLBACK_PLUGIN_ICON = '<path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/><circle cx="8" cy="6" r="1.5"/><circle cx="16" cy="12" r="1.5"/><circle cx="10" cy="18" r="1.5"/>';

interface SettingsNavProps {
  onTabChange?: (tab: string) => void;
}

function titleToLabel(title: PluginSettingsTab['title']): string {
  if (typeof title === 'string') return title;
  const locale = window.i18n?.locale || 'zh-CN';
  return title[locale] || title[locale.split('-')[0]] || title.zh || title.en || Object.values(title)[0] || '';
}

function buildNavItems(pluginSettingsTabs: PluginSettingsTab[]) {
  const tabItems = TAB_ITEMS;
  const nativeTabs = pluginSettingsTabs
    .filter(tab => getNativeSettingsTabComponent(tab.nativeComponent))
    .map(tab => ({
      id: tab.id,
      label: titleToLabel(tab.title),
      d: tab.icon || FALLBACK_PLUGIN_ICON,
    }));
  if (nativeTabs.length === 0) return tabItems.map(item => ({ ...item, label: t(item.key) }));

  const items = tabItems.map(item => ({ ...item, label: t(item.key) }));
  const skillIndex = items.findIndex(item => item.id === 'skills');
  const insertAt = skillIndex === -1 ? items.length : skillIndex + 1;
  return [
    ...items.slice(0, insertAt),
    ...nativeTabs,
    ...items.slice(insertAt),
  ];
}

export function SettingsNav({ onTabChange }: SettingsNavProps) {
  const { activeTab, pluginSettingsTabs } = useSettingsStore(
    useShallow(s => ({ activeTab: s.activeTab, pluginSettingsTabs: s.pluginSettingsTabs }))
  );
  const set = useSettingsStore(s => s.set);
  const navItems = buildNavItems(pluginSettingsTabs || []);
  const activeNavTab = activeTab === 'plugin-marketplace' ? 'plugins' : activeTab;

  return (
    <nav className={styles['settings-nav']}>
      {navItems.map(item => (
        <button
          key={item.id}
          className={`${styles['settings-nav-item']}${activeNavTab === item.id ? ' ' + styles['active'] : ''}`}
          data-tab={item.id}
          onClick={() => {
            set({ activeTab: item.id });
            onTabChange?.(item.id);
          }}
        >
          <TabIcon d={item.d} />
          <span>{item.label}</span>
        </button>
      ))}
    </nav>
  );
}
