import React, { useState, useEffect } from "react";
import { View, Text, TextInput, Pressable, StyleSheet } from "react-native";
import {
  WHISPER_FILES,
  WhisperFile,
  download_status_t,
  whisper_tag_t,
} from "@/app/lib/whisper";
import { Settings } from "@/app/lib/settings";
import { Picker } from "@react-native-picker/picker";
import {
  LanguageServer,
  language_matrix,
  language_matrix_entry,
} from "@/app/i18n/api";
const WHISPER_MODELS = {
  small: new WhisperFile("small"),
  medium: new WhisperFile("medium"),
  large: new WhisperFile("large"),
};

const LIBRETRANSLATE_BASE_URL = "https://translate.argosopentech.com/translate";

const SettingsComponent = () => {
  const [hostLanguage, setHostLanguage] = useState<string | null>(null);
  const [libretranslateBaseUrl, setLibretranslateBaseUrl] = useState<
    string | null
  >(null);
  const [languageOptions, setLanguageOptions] = useState<
    language_matrix | undefined
  >();
  const [langServerConn, setLangServerConn] = useState<{
    success: boolean;
    error?: string;
  } | null>(null);
  const [whisperModel, setWhisperModel] =
    useState<keyof typeof WHISPER_MODELS>("small");
  const [whisperFile, setWhisperFile] = useState<WhisperFile | undefined>();
  const [downloader, setDownloader] = useState<any>(null);
  const [bytesDone, setBytesDone] = useState<number | undefined>();
  const [bytesRemaining, setBytesRemaining] = useState<number | undefined>();
  const [statusTimeout, setStatusTimeout] = useState<
    NodeJS.Timeout | undefined
  >();

  useEffect(() => {
    (async function () {
      const settings = await Settings.getDefault();
      setHostLanguage((await settings.getHostLanguage()) || "en");
      setLibretranslateBaseUrl(
        (await settings.getLibretranslateBaseUrl()) || LIBRETRANSLATE_BASE_URL
      );
      setWhisperModel((await settings.getWhisperModel()) || "small");
      setWhisperFile(WHISPER_FILES[whisperModel]);
      if (!whisperFile) {
        throw new Error("Invalid Whisper file!");
      }
      await whisperFile.syncHfMetadata();
      await whisperFile.updateTargetExistence();
      await whisperFile.updateTargetHash();
      console.log("Does %s exist? part=%s, target=%s", whisperFile.label, whisperFile.does_part_target_exist, whisperFile.does_target_exist)
    })();
  }, [whisperFile]);

  const getLanguageOptions = async () => {
    const languageServer = await LanguageServer.getDefault();
    setLanguageOptions(await languageServer.fetchLanguages());
  };

  const handleHostLanguageChange = async (lang: string) => {
    const settings = await Settings.getDefault();
    setHostLanguage(lang);
    await settings.setHostLanguage(lang);
  };

  const handleLibretranslateBaseUrlChange = async (url: string) => {
    const settings = await Settings.getDefault();
    setLibretranslateBaseUrl(url);
    await settings.setLibretranslateBaseUrl(url);
    checkLangServerConnection(url);
  };

  const checkLangServerConnection = async (baseUrl: string) => {
    try {
      // Replace with actual connection check logic
      setLangServerConn({ success: true });
    } catch (error) {
      setLangServerConn({ success: false, error: `${error}` });
    }
  };

  const handleWhisperModelChange = async (model: whisper_tag_t) => {
    const settings = await Settings.getDefault();
    await settings.setWhisperModel(model);
    setWhisperModel(model);
    const wFile = WHISPER_FILES[whisperModel];
    await wFile.syncHfMetadata();
    await wFile.updateTargetExistence();
    // await wFile.updateTargetHash();
    // setIsWhisperHashValid(wFile.isHashValid);
    setWhisperFile(wFile);
  };

  const doSetDownloadStatus = (arg0: WhisperFile) => {
    // console.log("Downloading ....");
    setBytesDone(arg0.download_data?.totalBytesWritten);
    setBytesRemaining(arg0.download_data?.totalBytesExpectedToWrite);
  };

  const doOnComplete = async (arg0: WhisperFile) => {
    console.log("✅ Download complete.");
    setDownloader(undefined);
    await arg0.updateTargetExistence();
    setWhisperFile(arg0);
    await whisperFile?.updateTargetExistence();
  };

  const doDownload = async () => {
    if (!whisperModel) {
      throw new Error("Could not start download because whisperModel not set.");
    }

    console.log("Starting download of %s", whisperModel);

    if (!whisperFile) throw new Error("No whisper file");

    try {
      const resumable = await whisperFile.createDownloadResumable({
        onData: doSetDownloadStatus,
        onComplete: doOnComplete,
      });
      setDownloader(resumable);
      if (!resumable) throw new Error("Could not construct resumable");
      await resumable.resumeAsync();
    } catch (error) {
      console.error("Failed to download whisper model:", error);
    }
  };

  const doStopDownload = async () => {
    downloader.cancelAsync();
    setDownloader(null);
  };

  const doDelete = async () => {
    const whisperFile = WHISPER_MODELS[whisperModel];
    whisperFile.delete();
    await whisperFile.updateTargetExistence();
  };

  return hostLanguage && libretranslateBaseUrl ? (
    <View style={styles.container}>
      <Text style={styles.label}>Host Language:</Text>
      {
        <Picker
          selectedValue={hostLanguage}
          style={{ height: 50, width: "100%" }}
          onValueChange={handleHostLanguageChange}
          accessibilityHint="host language"
        >
          {languageOptions &&
            Object.entries(languageOptions).map(([key, value]) => {
              return <Picker.Item label={value.name} value={value.code} />;
            })}
        </Picker>
      }

      <Text style={styles.label}>LibreTranslate Base URL:</Text>
      <TextInput
        style={styles.input}
        value={libretranslateBaseUrl || LIBRETRANSLATE_BASE_URL}
        onChangeText={handleLibretranslateBaseUrlChange}
        accessibilityHint="libretranslate base url"
      />
      {langServerConn &&
        (langServerConn.success ? (
          <Text>Success connecting to {libretranslateBaseUrl}</Text>
        ) : (
          <Text>
            Error connecting to {libretranslateBaseUrl}: {langServerConn.error}
          </Text>
        ))}
      <Picker
        selectedValue={whisperModel}
        style={{ height: 50, width: "100%" }}
        onValueChange={handleWhisperModelChange}
        accessibilityHint="whisper models"
      >
        {Object.entries(WHISPER_MODELS).map(([key, whisperFile]) => (
          <Picker.Item
            key={whisperFile.tag}
            label={whisperFile.label}
            value={key}
          />
        ))}
      </Picker>
      <View style={styles.downloadButtonWrapper}>
        {/* The target is completely downloaded */}
        {!downloader && whisperFile?.does_target_exist && (
          <Pressable onPress={doDelete} style={styles.deleteButton}>
            <Text style={styles.buttonText}>
              DELETE {whisperModel.toUpperCase()}
            </Text>
          </Pressable>
        )}

        {/* The target "part" is present and is downloading */}

        {downloader && whisperFile?.does_part_target_exist && (
          <Pressable
            onPress={doStopDownload}
            style={styles.pauseDownloadButton}
          >
            <Text style={styles.buttonText}>STOP DOWNLOAD</Text>
          </Pressable>
        )}

        {/* The target "part" is present and we are NOT downloading */}

        {!downloader && whisperFile?.does_part_target_exist && (
          <>
            <Pressable onPress={doDownload} style={styles.downloadButton}>
              <Text style={styles.buttonText}>RESUME DOWNLOAD</Text>
            </Pressable>
            <Pressable onPress={doDelete} style={styles.deleteButton}>
              <Text style={styles.buttonText}>
                DELETE {whisperModel.toUpperCase()}
              </Text>
            </Pressable>
          </>
        )}

        {/* Anything else -- usually if the file has not yet been downloaded */}

        {!(
          downloader ||
          whisperFile?.does_target_exist ||
          whisperFile?.does_part_target_exist
        ) && (
          <Pressable onPress={doDownload} style={styles.downloadButton}>
            <Text style={styles.buttonText}>
              DOWNLOAD {whisperModel.toUpperCase()}
            </Text>
          </Pressable>
        )}

        {downloader &&
          bytesDone &&
          bytesRemaining &&
          whisperFile?.does_part_target_exist && (
            <View>
              {whisperFile && (
                <Text>Downloading to {whisperFile.targetPath}</Text>
              )}
              <Text>
                {bytesDone} of {bytesRemaining} (
                {(bytesDone / bytesRemaining) * 100} %){" "}
              </Text>
            </View>
          )}
      </View>

      <View>
        <Text>Debug Panel</Text>
        <Text>downloader is null? {downloader ? "no" : "yes"}</Text>
        <Text>
          whisperFile.does_target_exist{" "}
          {whisperFile?.does_target_exist ? "yes" : "no"}
        </Text>
        <Text>
          whisperFile.does_part_target_exist{" "}
          {whisperFile?.does_part_target_exist ? "yes" : "no"}
        </Text>
      </View>
    </View>
  ) : (
    <View>
      <Text>Loading ...</Text>
    </View>
  );
};

// Create styles for the component
const styles = StyleSheet.create({
  downloadButtonWrapper: {
    flexDirection: "row",
  },
  downloadButton: {
    backgroundColor: "#236b9f",
    padding: 20,
    margin: 10,
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
  },
  deleteButton: {
    backgroundColor: "darkred",
    flex: 1,
    flexDirection: "column",
    padding: 10,
    margin: 10,
    height: 50,
  },
  pauseDownloadButton: {
    backgroundColor: "#444444",
    padding: 10,
    margin: 10,
    height: 50,
  },
  buttonText: {
    color: "#fff",
    // flex: 1,
    // fontSize: 16,
    // alignSelf: "center",
    // textAlign: "center",
    // textAlignVertical: "top",
  },
  container: {
    flex: 1,
    padding: 20,
  },
  label: {
    fontSize: 16,
    marginBottom: 8,
  },
  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    marginBottom: 20,
    paddingHorizontal: 8,
  },
});

export default SettingsComponent;