import { useStore, actions } from "@/lib/store";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { getLanguageDisplayName, supportedLanguages } from "@/lib/languageDetect";

export function StatusBar() {
  const store = useStore();
  const activeTab = store.tabs.find((t) => t.path === store.activeTabPath);
  const folderName = store.workspacePath?.split("/").pop() ?? store.workspacePath?.split("\\").pop() ?? "No folder";

  return (
    <div className="flex h-[22px] items-center justify-between bg-[#007acc] px-2 text-[11px] text-white select-none shrink-0">
      <div className="flex items-center gap-3">
        <span>{folderName}</span>
      </div>

      <div className="flex items-center gap-3">
        {activeTab && (
          <>
            <Select
              value={activeTab.language}
              onValueChange={(lang) => actions.updateTabLanguage(activeTab.path, lang)}
            >
              <SelectTrigger className="h-[18px] border-0 bg-transparent text-white text-[11px] gap-1 px-1 hover:bg-white/20 focus:ring-0">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {supportedLanguages.map((lang) => (
                  <SelectItem key={lang} value={lang}>
                    {getLanguageDisplayName(lang)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <span>
              Ln {store.cursorLine}, Col {store.cursorCol}
            </span>
            <span>Spaces: {store.settings.tabSize}</span>
            <span>UTF-8</span>
          </>
        )}
      </div>
    </div>
  );
}
