import { useCallback, useEffect, useRef, useState } from 'react';
import {
  IconAlertCircle,
  IconDownload,
  IconPalette,
  IconRefresh,
  IconRobot,
  IconTrash,
  IconUser,
  IconX,
} from '@tabler/icons-react';
import {
  ActionIcon,
  Alert,
  Badge,
  Button,
  Card,
  ColorSwatch,
  Combobox,
  Divider,
  Group,
  Input,
  InputBase,
  Loader,
  Modal,
  NavLink,
  PasswordInput,
  rem,
  ScrollArea,
  Stack,
  Text,
  TextInput,
  Title,
  Tooltip,
  useCombobox,
  useMantineTheme,
} from '@mantine/core';
import { deleteModel, getInstalledModels, pullModel, type OllamaModel } from '@/app/actions/ollama';

// Type for the scraped models JSON
interface OllamaModelsData {
  generatedAt: string;
  modelCount: number;
  models: Record<string, string[]>;
}

interface User {
  id: string;
  username: string;
  accentColor?: string;
}

interface SettingsModalProps {
  opened: boolean;
  close: () => void;
  primaryColor: string;
  setPrimaryColor: (color: string) => void;
}

// Session-level cache for available models (survives modal close/open)
let availableModelsCache: OllamaModelsData | null = null;
let installedModelsCache: OllamaModel[] | null = null;

export function SettingsModal({
  opened,
  close,
  primaryColor,
  setPrimaryColor,
}: SettingsModalProps) {
  const theme = useMantineTheme();
  const [activeTab, setActiveTab] = useState<'appearance' | 'account' | 'models'>('appearance');

  // Account State
  const [user, setUser] = useState<User | null>(null);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [isLoginMode, setIsLoginMode] = useState(true);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  // Models State
  const [installedModels, setInstalledModels] = useState<OllamaModel[]>(installedModelsCache || []);
  const [availableModels, setAvailableModels] = useState<OllamaModelsData | null>(
    availableModelsCache
  );
  const [loadingInstalled, setLoadingInstalled] = useState(false);
  const [loadingAvailable, setLoadingAvailable] = useState(false);
  const [pullingModel, setPullingModel] = useState<string | null>(null);
  const [pullError, setPullError] = useState('');

  // Selected model and tag for downloading
  const [selectedModel, setSelectedModel] = useState<string>('');
  const [selectedTag, setSelectedTag] = useState<string>('');

  // Combobox states
  const [modelSearch, setModelSearch] = useState('');
  const [tagSearch, setTagSearch] = useState('');

  const modelCombobox = useCombobox({
    onDropdownClose: () => {
      modelCombobox.resetSelectedOption();
      modelCombobox.focusTarget();
      setModelSearch('');
    },
    onDropdownOpen: () => {
      modelCombobox.focusSearchInput();
    },
  });

  const tagCombobox = useCombobox({
    onDropdownClose: () => {
      tagCombobox.resetSelectedOption();
      tagCombobox.focusTarget();
      setTagSearch('');
    },
    onDropdownOpen: () => {
      tagCombobox.focusSearchInput();
    },
  });

  // Track if we've fetched this session
  const hasFetchedInstalled = useRef(false);
  const hasFetchedAvailable = useRef(false);

  // Get list of model names for the dropdown
  const modelNames = availableModels ? Object.keys(availableModels.models).sort() : [];

  // Filter models based on search
  const filteredModels = modelNames.filter((name) =>
    name.toLowerCase().includes(modelSearch.toLowerCase().trim())
  );

  // Get tags for the selected model
  const availableTags =
    selectedModel && availableModels ? availableModels.models[selectedModel] || [] : [];

  // Filter tags based on search
  const filteredTags = availableTags.filter((tag) =>
    tag.toLowerCase().includes(tagSearch.toLowerCase().trim())
  );

  // Fetch available models from the static JSON
  const fetchAvailableModels = useCallback(async (force = false) => {
    if (!force && availableModelsCache) {
      setAvailableModels(availableModelsCache);
      return;
    }

    setLoadingAvailable(true);
    try {
      const response = await fetch('/ollama-models.json');
      if (response.ok) {
        const data: OllamaModelsData = await response.json();
        availableModelsCache = data;
        setAvailableModels(data);
      }
    } catch (e) {
      console.error('Failed to fetch available models:', e);
    } finally {
      setLoadingAvailable(false);
    }
  }, []);

  // Fetch installed models from Ollama
  const fetchInstalledModels = useCallback(async (force = false) => {
    if (!force && installedModelsCache) {
      setInstalledModels(installedModelsCache);
      return;
    }

    setLoadingInstalled(true);
    try {
      const list = await getInstalledModels();
      installedModelsCache = list;
      setInstalledModels(list);
    } catch (e) {
      console.error('Failed to fetch installed models:', e);
    } finally {
      setLoadingInstalled(false);
    }
  }, []);

  // Check login status on mount
  useEffect(() => {
    if (opened) {
      fetchUser();
      if (activeTab === 'models') {
        if (!hasFetchedInstalled.current) {
          fetchInstalledModels();
          hasFetchedInstalled.current = true;
        }
        if (!hasFetchedAvailable.current) {
          fetchAvailableModels();
          hasFetchedAvailable.current = true;
        }
      }
    }
  }, [opened, activeTab, fetchInstalledModels, fetchAvailableModels]);

  const fetchUser = async () => {
    try {
      const res = await fetch('/api/auth/me');
      const data = await res.json();
      if (data.user) {
        setUser(data.user);
      } else {
        setUser(null);
      }
    } catch (e) {
      console.error(e);
    }
  };

  const handlePullModel = async () => {
    if (!selectedModel) {
      return;
    }

    // Build the full model name with tag
    const fullModelName = selectedTag ? `${selectedModel}:${selectedTag}` : selectedModel;

    setPullingModel(fullModelName);
    setPullError('');

    try {
      const result = await pullModel(fullModelName);
      if (result.success) {
        setSelectedModel('');
        setSelectedTag('');
        // Force refresh installed models
        await fetchInstalledModels(true);
      } else {
        setPullError(result.message);
      }
    } catch (e) {
      console.error(e);
      setPullError('An error occurred while pulling the model');
    } finally {
      setPullingModel(null);
    }
  };

  const handleDeleteModel = async (name: string) => {
    if (!confirm(`Are you sure you want to delete ${name}?`)) {
      return;
    }
    try {
      await deleteModel(name);
      // Force refresh installed models
      await fetchInstalledModels(true);
    } catch (e) {
      console.error(e);
    }
  };

  const handleAuth = async () => {
    setError('');
    setLoading(true);
    const endpoint = isLoginMode ? '/api/auth/login' : '/api/auth/register';

    try {
      const res = await fetch(endpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password }),
      });

      const data = await res.json();

      if (!res.ok) {
        throw new Error(data.error || 'Something went wrong');
      }

      // Refresh user state
      await fetchUser();
      setUsername('');
      setPassword('');
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      setLoading(false);
    }
  };

  const handleLogout = async () => {
    await fetch('/api/auth/logout', { method: 'POST' });
    setUser(null);
  };

  const handleAccentColorChange = async (color: string) => {
    // Update local state immediately for responsiveness
    setPrimaryColor(color);

    // If user is logged in, persist to database
    if (user) {
      try {
        await fetch('/api/user/settings', {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ accentColor: color }),
        });
      } catch (e) {
        console.error('Failed to save accent color:', e);
      }
    }
  };

  const colors = Object.keys(theme.colors).filter(
    (color) => color !== 'dark' && color !== 'gray' && color !== 'white' && color !== 'black'
  );

  // When model selection changes, reset tag
  const handleModelSelect = (model: string) => {
    setSelectedModel(model);
    setSelectedTag('');
    modelCombobox.closeDropdown();
  };

  return (
    <Modal
      opened={opened}
      onClose={close}
      withCloseButton={false}
      size="lg"
      padding={0}
      radius="xl"
    >
      <Group align="stretch" gap={0} style={{ minHeight: 400, overflow: 'hidden' }}>
        {/* Left Sidebar */}
        <Stack
          gap="xs"
          w={220}
          p="sm"
          bg="var(--mantine-color-default-hover)"
          style={{
            borderRight: '1px solid var(--mantine-color-default-border)',
          }}
        >
          <NavLink
            active={activeTab === 'appearance'}
            label="Appearance"
            leftSection={<IconPalette size={18} stroke={1.5} />}
            variant="light"
            color={primaryColor}
            onClick={() => setActiveTab('appearance')}
            style={{ borderRadius: 'var(--mantine-radius-lg)' }}
          />
          <NavLink
            active={activeTab === 'models'}
            label="Models"
            leftSection={<IconRobot size={18} stroke={1.5} />}
            variant="light"
            color={primaryColor}
            onClick={() => setActiveTab('models')}
            style={{ borderRadius: 'var(--mantine-radius-lg)' }}
          />
          <NavLink
            active={activeTab === 'account'}
            label="Account"
            leftSection={<IconUser size={18} stroke={1.5} />}
            variant="light"
            color={primaryColor}
            onClick={() => setActiveTab('account')}
            style={{ borderRadius: 'var(--mantine-radius-lg)' }}
          />
        </Stack>

        {/* Right Content */}
        <Stack p="xl" style={{ flex: 1, position: 'relative' }}>
          <ActionIcon
            onClick={close}
            variant="subtle"
            color="gray"
            size="sm"
            style={{ position: 'absolute', top: rem(15), right: rem(15), zIndex: 1 }}
          >
            <IconX size={20} />
          </ActionIcon>

          {activeTab === 'appearance' && (
            <>
              <Title order={4}>Appearance</Title>
              <Text size="sm" c="dimmed">
                Customize the look and feel of the application.
              </Text>

              <Divider my="sm" />

              <Stack gap="xs">
                <Text size="sm" fw={500}>
                  Accent Color
                </Text>
                <Group gap="xs">
                  {colors.map((color) => (
                    <ColorSwatch
                      key={color}
                      component="button"
                      color={theme.colors[color][6]}
                      onClick={() => handleAccentColorChange(color)}
                      style={{ color: '#fff', cursor: 'pointer' }}
                      withShadow
                    >
                      {primaryColor === color && <IconPalette size={12} />}
                    </ColorSwatch>
                  ))}
                </Group>
              </Stack>
            </>
          )}

          {activeTab === 'models' && (
            <>
              <Title order={4}>Models</Title>
              <Text size="sm" c="dimmed">
                Download and manage AI models from the Ollama registry.
              </Text>
              <Divider my="sm" />

              {/* Model Selection */}
              <Text size="sm" fw={500} mb="xs">
                Download New Model
              </Text>

              <Group align="flex-end" gap="sm">
                {/* Model Name Dropdown */}
                <Combobox
                  store={modelCombobox}
                  withinPortal={false}
                  onOptionSubmit={handleModelSelect}
                >
                  <Combobox.Target>
                    <InputBase
                      component="button"
                      type="button"
                      pointer
                      rightSection={loadingAvailable ? <Loader size={14} /> : <Combobox.Chevron />}
                      onClick={() => modelCombobox.toggleDropdown()}
                      rightSectionPointerEvents="none"
                      label="Model"
                      style={{ minWidth: 180 }}
                    >
                      {selectedModel || <Input.Placeholder>Select model</Input.Placeholder>}
                    </InputBase>
                  </Combobox.Target>

                  <Combobox.Dropdown>
                    <Combobox.Search
                      value={modelSearch}
                      onChange={(event) => setModelSearch(event.currentTarget.value)}
                      placeholder="Search models..."
                    />
                    <Combobox.Options>
                      <ScrollArea.Autosize type="scroll" mah={200}>
                        {filteredModels.length > 0 ? (
                          filteredModels.map((name) => (
                            <Combobox.Option value={name} key={name}>
                              {name}
                            </Combobox.Option>
                          ))
                        ) : (
                          <Combobox.Empty>No models found</Combobox.Empty>
                        )}
                      </ScrollArea.Autosize>
                    </Combobox.Options>
                  </Combobox.Dropdown>
                </Combobox>

                {/* Tag/Quantization Dropdown */}
                <Combobox
                  store={tagCombobox}
                  withinPortal={false}
                  onOptionSubmit={(val) => {
                    setSelectedTag(val);
                    tagCombobox.closeDropdown();
                  }}
                >
                  <Combobox.Target>
                    <InputBase
                      component="button"
                      type="button"
                      pointer
                      rightSection={<Combobox.Chevron />}
                      onClick={() => tagCombobox.toggleDropdown()}
                      rightSectionPointerEvents="none"
                      label="Tag"
                      disabled={!selectedModel}
                      style={{ minWidth: 180 }}
                    >
                      {selectedTag || (
                        <Input.Placeholder>
                          {selectedModel ? 'Select tag (optional)' : 'Select model first'}
                        </Input.Placeholder>
                      )}
                    </InputBase>
                  </Combobox.Target>

                  <Combobox.Dropdown>
                    <Combobox.Search
                      value={tagSearch}
                      onChange={(event) => setTagSearch(event.currentTarget.value)}
                      placeholder="Search tags..."
                    />
                    <Combobox.Options>
                      <ScrollArea.Autosize type="scroll" mah={200}>
                        {filteredTags.length > 0 ? (
                          filteredTags.map((tag) => (
                            <Combobox.Option value={tag} key={tag}>
                              {tag}
                            </Combobox.Option>
                          ))
                        ) : (
                          <Combobox.Empty>No tags found</Combobox.Empty>
                        )}
                      </ScrollArea.Autosize>
                    </Combobox.Options>
                  </Combobox.Dropdown>
                </Combobox>

                <Button
                  onClick={handlePullModel}
                  loading={!!pullingModel}
                  disabled={!selectedModel}
                  leftSection={<IconDownload size={16} />}
                  color={primaryColor}
                >
                  Pull
                </Button>
              </Group>

              {pullingModel && (
                <Alert icon={<Loader size={16} />} title="Downloading..." color="blue" mt="md">
                  Pulling {pullingModel}. This may take a while depending on your connection.
                </Alert>
              )}

              {pullError && (
                <Alert
                  icon={<IconAlertCircle size={16} />}
                  title="Error"
                  color="red"
                  mt="md"
                  withCloseButton
                  onClose={() => setPullError('')}
                >
                  {pullError}
                </Alert>
              )}

              {/* Installed Models */}
              <Group justify="space-between" mt="xl" mb="xs">
                <Text size="sm" fw={500}>
                  Installed Models
                </Text>
                <Tooltip label="Refresh">
                  <ActionIcon
                    variant="subtle"
                    color="gray"
                    size="sm"
                    onClick={() => fetchInstalledModels(true)}
                    loading={loadingInstalled}
                  >
                    <IconRefresh size={16} />
                  </ActionIcon>
                </Tooltip>
              </Group>

              {loadingInstalled && installedModels.length === 0 ? (
                <Group justify="center" py="xl">
                  <Loader size="sm" />
                </Group>
              ) : installedModels.length === 0 ? (
                <Text c="dimmed" size="sm" ta="center" py="xl">
                  No models installed. Pull one from above!
                </Text>
              ) : (
                <ScrollArea h={200} offsetScrollbars>
                  <Stack gap="xs">
                    {installedModels.map((model) => (
                      <Card key={model.digest} withBorder padding="sm" radius="md">
                        <Group justify="space-between">
                          <div>
                            <Text fw={500} size="sm">
                              {model.name}
                            </Text>
                            <Group gap="xs">
                              <Badge size="xs" variant="light" color="gray">
                                {(model.size / 1024 / 1024 / 1024).toFixed(2)} GB
                              </Badge>
                              <Badge size="xs" variant="light" color="blue">
                                {model.details.parameter_size}
                              </Badge>
                              <Badge size="xs" variant="light" color="orange">
                                {model.details.quantization_level}
                              </Badge>
                            </Group>
                          </div>
                          <ActionIcon
                            color="red"
                            variant="subtle"
                            onClick={() => handleDeleteModel(model.name)}
                          >
                            <IconTrash size={16} />
                          </ActionIcon>
                        </Group>
                      </Card>
                    ))}
                  </Stack>
                </ScrollArea>
              )}

              {availableModels && (
                <Text size="xs" c="dimmed" mt="md">
                  Model list last updated:{' '}
                  {new Date(availableModels.generatedAt).toLocaleDateString()}
                </Text>
              )}
            </>
          )}

          {activeTab === 'account' && (
            <>
              <Title order={4}>Account</Title>
              <Text size="sm" c="dimmed">
                Manage your account and chat history.
              </Text>
              <Divider my="sm" />

              {user ? (
                <Stack>
                  <Text>
                    Logged in as <b>{user.username}</b>
                  </Text>
                  <Button color="red" variant="light" onClick={handleLogout}>
                    Log out
                  </Button>
                </Stack>
              ) : (
                <Stack>
                  {error && (
                    <Alert icon={<IconAlertCircle size={16} />} title="Error" color="red">
                      {error}
                    </Alert>
                  )}
                  <TextInput
                    label="Username"
                    placeholder="Enter username"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                  />
                  <PasswordInput
                    label="Password"
                    placeholder="Enter password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                  />
                  <Group justify="space-between" mt="md">
                    <Text
                      size="xs"
                      style={{ cursor: 'pointer' }}
                      c="blue"
                      onClick={() => setIsLoginMode(!isLoginMode)}
                    >
                      {isLoginMode ? 'Need an account? Register' : 'Have an account? Login'}
                    </Text>
                    <Button onClick={handleAuth} loading={loading} color={primaryColor}>
                      {isLoginMode ? 'Login' : 'Register'}
                    </Button>
                  </Group>
                </Stack>
              )}
            </>
          )}
        </Stack>
      </Group>
    </Modal>
  );
}