let clientId = "879452483765-7idfp3b7f0nji1du3iffiu4d8t3276io.apps.googleusercontent.com";
let project_id = "script-analysis-a2lcle";
let scopes = "https://www.googleapis.com/auth/bigquery.readonly https://www.googleapis.com/auth/pubsub";

google.load("visualization", "1", {packages: ["table"]});

gapi.load("client");

let dateObj = new Date();
let month = dateObj.getUTCMonth() + 1; //months from 1-12
let day = dateObj.getUTCDate();
let year = dateObj.getUTCFullYear();

let newdate = year + "-" + month + "-" + day;

var auth_token;

const client = google.accounts.oauth2.initTokenClient({
    client_id: clientId,
    scope: scopes,
    callback: (tokenResponse) => {
       if (tokenResponse && tokenResponse.access_token) {
          auth_token = tokenResponse.access_token
          console.log("token response")
          gapi.client.load("bigquery", "v2")
          console.log("loaded bq client")
          $("#client_initiated").html("Authenticated successfully!");
          $("#listScreenplays").fadeIn();
          $("#retrieveScreenplayAll").fadeIn();
          $("#displaySubmissionForm").fadeIn();
       }
    },
});

//get all screenplays
function retrieveScreenplayAll() {
    let request = gapi.client.bigquery.jobs.query({
        "query": "SELECT Content.uuid, Content.script_name, Content.content_retrieved, Content.script_content, Analysis.prompt_name, Analysis.prompt_response, Analysis.prompt_text, Analysis.model_version FROM script_analysis.script_content AS Content INNER JOIN script_analysis.script_analysis AS Analysis ON Content.uuid=Analysis.uuid",

        "timeoutMs": 30000,
        "projectId": project_id,
        "useLegacySql": false
    });
    document.getElementById("result_box").innerHTML = "<h3>DEBUG - All Database Fields</h3>";
    request.execute(response => {
        var stateValues = [["Script Name", "Script Prompt Name", "Prompt Response", "Prompt Text", "Model Name", "Date Retrieved"]];
        $.each(response.result.rows, function(i, item) {
          var uuid = item.f[0].v;
          var script_name = item.f[1].v;
          var date_retrieved = item.f[2].v;
          var script_content = item.f[3].v;
          var prompt_name = item.f[4].v;
          var prompt_text = item.f[6].v;
          var model_name = item.f[7].v;
          if (prompt_name === "scene_breakdown_sheets") {
             var prompt_response = "<a href='https://docs.google.com/spreadsheets/d/" + item.f[5].v + "' target='_blank'>https://docs.google.com/spreadsheets/d/" + item.f[5].v + "</a>";
          }
          else {
             var prompt_response = item.f[5].v;
          }
          var stateValue = [script_name,  prompt_name, prompt_response, prompt_text, model_name, date_retrieved ];
          stateValues.push(stateValue);
        });
        console.log("got data")
        var data = google.visualization.arrayToDataTable(stateValues);
        data.setProperty(0, 2, 'style', 'width:700px');
        console.log("put data into table")
        var table = new google.visualization.Table(document.getElementById("table_div"));
        var options = {
           showRowNumber: true,
           pageSize: 20,
           //width: "100%",
           //height: "100%",
           page:"enable",
           allowHtml: true,
           cssClassNames: {
             tableCell: 'small-font'
           },
  };

        console.log("initialized html table")

        table.draw(data, options);
    });
}

function listScreenplays() {
    document.getElementById("result_box").innerHTML = "<h3>Available Scripts</h3>";
    let request = gapi.client.bigquery.jobs.query({
        "query": "SELECT uuid, script_name FROM script_analysis.script_content",
        "timeoutMs": 30000,
        "projectId": project_id,
        "useLegacySql": false
    });
    request.execute(response => {
        console.log(response)
        var stateValues = [["Script Name"]];
        $.each(response.result.rows, function(i, item) {
          var uuid = item.f[0].v;
          var script_name = item.f[1].v;
          var script_name_html = "<a id='scriptWindow' href='#' onclick=\"getScreenplayDetails('" + uuid + "');\">" + script_name + "</a>";
          //console.log("url: " + script_name_html)
          var stateValue = [script_name_html];
          stateValues.push(stateValue);
        });
        console.log("got data")
        var data = google.visualization.arrayToDataTable(stateValues);
        data.setProperty(0, 0, 'style', 'width:200px');
        console.log("put data into table")
        var table = new google.visualization.Table(document.getElementById("table_div"));
        var options = {
           showRowNumber: false,
           pageSize: 20,
           //width: "100%",
           //height: "100%",
           page:"enable",
           allowHtml: true,
           cssClassNames: {
             tableCell: 'small-font'
           },
        }
        console.log("initialized html table")

        table.draw(data, options);
    });
}

function getScreenplayDetails(uuid) {
    let uuid_query = "SELECT uuid, script_name, prompt_name, prompt_response, prompt_text, model_version FROM script_analysis.script_analysis WHERE uuid = '" + uuid + "'";
    let request = gapi.client.bigquery.jobs.query({
        "query": uuid_query,
        "timeoutMs": 30000,
        "projectId": project_id,
        "useLegacySql": false
    });
    let script_name = '';

    var script_content_logline = "Not Yet Generated";
    var script_content_summary = "Not Yet Generated";
    var script_content_genre = "Not Yet Generated";
    var script_content_audience = "Not Yet Generated";
    var script_content_quality_rating = "Not Yet Generated";
    var script_content_major_characters = "Not Yet Generated";
    var script_content_major_scenes = "Not Yet Generated";
    var script_content_plot_complexity = "Not Yet Generated";
    var script_content_filming_locations = "Not Yet Generated";
    var script_content_props = "Not Yet Generated";
    var script_content_plot_holes = "Not Yet Generated";
    var script_summary_slides = "Not Yet Generated";
    var scene_breakdown_sheets = "Not Yet Generated";
    var script_content_scene_1_summary = "Not Yet Generated";
    var script_content_scene_10_summary = "Not Yet Generated";
    var script_content_scene_20_summary = "Not Yet Generated";
    var script_content_coverage = "Not Yet Generated";
    var script_content_synopsis = "Not Yet Generated";
    var script_content_treatment = "Not Yet Generated";
    var script_content_key_plot_points = "Not Yet Generated";
    var script_content_story_arc_chart = "Not Yet Generated";
    var script_content_character_descriptions = "Not Yet Generated";
    var script_content_critique = "Not Yet Generated";
    var script_content_themes = "Not Yet Generated";
    var script_content_logline_title = "Logline"
    var script_content_summary_title = "Summary"
    var script_content_genre_title = "Genre"
    var script_content_audience_title = "Audience"
    var script_content_quality_rating_title = "Rating"
    var script_content_major_characters_title = "Major Character"
    var script_content_major_scenes_title = "Major Scenes"
    var script_content_plot_complexity_title = "Plot Complexity"
    var script_content_filming_locations_title = "Filming Locations"
    var script_content_props_title = "Props"
    var script_content_plot_holes_title = "Plot Holes"
    var script_summary_slides_title = "Summary Slides"
    var scene_breakdown_sheets_title = "Scene Breakdown"
    var script_content_scene_1_summary_title = "Scene 1 Summary"
    var script_content_scene_10_summary_title = "Scene 10 Summary"
    var script_content_scene_20_summary_title = "Scene 20 Summary"
    var script_content_coverage_title = "Script Coverage"
    var script_content_synopsis_title = "Synopsis"
    var script_content_treatment_title = "Treatment"
    var script_content_key_plot_points_title = "Key Plot Points"
    var script_content_story_arc_chart_title = "Story Arc"
    var script_content_character_descriptions_title = "Character Descriptions"
    var script_content_critique_title = "Critique"
    var script_content_themes_title = "Themes"

    request.execute(response => {
        console.log(response)
        // var stateValues = [["Script Name", "Prompt Name", "Prompt Response", "Prompt Text", "Model Name"]];
        var stateValues = [["Element", "GenAI Response" ]];
        $.each(response.result.rows, function(i, item) {
          uuid = item.f[0].v;
          script_name = item.f[1].v;
          var prompt_name = item.f[2].v;
          var prompt_response = "";
          var prompt_response = item.f[3].v;
          var prompt_text = item.f[4].v;
          var model_name = item.f[5].v;

          if (prompt_name === "script_content_logline") {
            script_content_logline_title = "Logline"
            script_content_logline = prompt_response
          }

          if (prompt_name === "script_content_summary") {
            script_content_summary_title = "Summary"
            script_content_summary = prompt_response
          }

          if (prompt_name === "script_content_genre") {
            script_content_genre_title = "Genre"
            script_content_genre = prompt_response
          }

          if (prompt_name === "script_content_audience") {
            script_content_audience_title = "Audience"
            script_content_audience = prompt_response
          }

          if (prompt_name === "script_content_quality_rating") {
            script_content_quality_rating_title = "Rating"
            script_content_quality_rating = prompt_response
          }

          if (prompt_name === "script_content_major_characters") {
            script_content_major_characters_title = "Major Character"
            script_content_major_characters = prompt_response
          }

          if (prompt_name === "script_content_major_scenes") {
            script_content_major_scenes_title = "Major Scenes"
            script_content_major_scenes = prompt_response
          }

          if (prompt_name === "script_content_plot_complexity") {
            script_content_plot_complexity_title = "Plot Complexity"
            script_content_plot_complexity = prompt_response
          }

          if (prompt_name === "script_content_filming_locations") {
            script_content_filming_locations_title = "Filming Locations"
            script_content_filming_locations = prompt_response
          }

          if (prompt_name === "script_content_props") {
            script_content_props_title = "Props"
            script_content_props = prompt_response
          }

          if (prompt_name === "script_content_plot_holes") {
            script_content_plot_holes_title = "Plot Holes"
            script_content_plot_holes = prompt_response
          }

          if (prompt_name === "script_summary_slides") {
            script_summary_slides_title = "Summary Slides"
            prompt_response = "<a href='https://docs.google.com/presentation/d/" + item.f[3].v + "' target='_blank'>Script Summary - Google Slides</a>";
            script_summary_slides = prompt_response
          }

          if (prompt_name === "scene_breakdown_sheets") {
            scene_breakdown_sheets_title = "Scene Breakdown"
            prompt_response = "<a href='https://docs.google.com/spreadsheets/d/" + item.f[3].v + "' target='_blank'>Scene Breakdown - Google Sheets</a>";
            scene_breakdown_sheets = prompt_response
          }

          if (prompt_name === "script_content_scene_1_summary") {
            script_content_scene_1_summary_title = "Scene 1 Summary"
            script_content_scene_1_summary = prompt_response
          }

          if (prompt_name === "script_content_scene_10_summary") {
            script_content_scene_10_summary_title = "Scene 10 Summary"
            script_content_scene_10_summary = prompt_response
          }

          if (prompt_name === "script_content_scene_20_summary") {
            script_content_scene_20_summary_title = "Scene 20 Summary"
            script_content_scene_20_summary = prompt_response
          }

          if (prompt_name === "script_content_coverage") {
            script_content_coverage_title = "Script Coverage"
            prompt_response = "<a href='https://docs.google.com/document/d/" + item.f[3].v + "' target='_blank'>Script Coverage - Google Docs</a>";
            script_content_coverage = prompt_response
          }

          if (prompt_name === "script_content_synopsis") {
            script_content_synopsis_title = "Synopsis"
            script_content_synopsis = prompt_response.replace(/:\*\*/g, "</b><br><br>")
            script_content_coverage = script_content_coverage.replace(/\*\*/g, "<br><br><b>")
          }

          if (prompt_name === "script_content_treatment") {
            script_content_treatment_title = "Treatment"
            script_content_treatment = prompt_response.replace(/:\*\*/g, "</b><br><br>")
            script_content_treatment = script_content_treatment.replace(/\*\*/g, "<br><br><b>")
          }

          if (prompt_name === "script_content_key_plot_points") {
            script_content_key_plot_points_title = "Key Plot Points"
            script_content_key_plot_points = prompt_response.replace(/:\*\*/g, "</b><br><br>")
            script_content_key_plot_points = script_content_key_plot_points.replace(/\*\*/g, "<br><br><b>")
          }

          if (prompt_name === "script_content_story_arc_chart") {
            script_content_story_arc_chart_title = "Story Arc"
            script_content_story_arc_chart = prompt_response.replace(/:\*\*/g, "</b><br><br>")
            script_content_story_arc_chart = script_content_story_arc_chart.replace(/\*\*/g, "<br><br><b>")
          }

          if (prompt_name === "script_content_character_descriptions") {
            script_content_character_descriptions_title = "Character Descriptions"
            script_content_character_descriptions = prompt_response.replace(/:\*\*/g, "</b><br><br>")
            script_content_character_descriptions = script_content_character_descriptions.replace(/\*\*/g, "<br><br><b>")
          }

          if (prompt_name === "script_content_critique") {
            script_content_critique_title = "Critique"
            script_content_critique = prompt_response.replace(/:\*\*/g, "</b><br><br>")
            script_content_critique = script_content_critique.replace(/\*\*/g, "<br><br><b>")
          }

          if (prompt_name === "script_content_themes") {
            script_content_themes_title = "Themes"
            script_content_themes = prompt_response.replace(/:\*\*/g, "</b><br><br>")
            script_content_themes = script_content_themes.replace(/\*\*/g, "<br><br><b>")
          }

          //var stateValue = [prompt_description, prompt_response];
          //stateValues.push(stateValue);
        });

        //console.log("got data")
        //var data = google.visualization.arrayToDataTable(stateValues);
        //data.setProperty(0, 0, 'style', 'width:200px');
        //console.log("put data into table")
        //var table = new google.visualization.Table(document.getElementById("table_div"));

        var script_name_html = "<a id='scriptWindow' href='#' onclick=\"getScreenplayDetails('" + uuid + "');\">" + script_name + "</a>";
        document.getElementById("result_box").innerHTML = "<h3>Script: " + script_name_html + "</h3>";

        //var options = {
        //   showRowNumber: false,
        //   sortColumn: 0,
        //   pageSize: 20,
        //   //width: "100%",
        //   //height: "100%",
        //   page:"enable",
        //   allowHtml: true,
        //   cssClassNames: {
        //     tableCell: 'small-font'
        //   },
        //}

        console.log("initialized html table")
        let content_output = '<table>' +
'<tr><td> <b>' + script_content_logline_title + '</b></td><td>' + script_content_logline + '</td></tr>' +
'<tr><td> <b>' + script_content_summary_title + '</b></td><td>' + script_content_summary + '</td></tr>' +
'<tr><td> <b>' + script_content_genre_title + '</b></td><td>' + script_content_genre + '</td></tr>' +
'<tr><td> <b>' + script_content_audience_title + '</b></td><td>' + script_content_audience + '</td></tr>' +
'<tr><td> <b>' + script_content_quality_rating_title + '</b></td><td>' + script_content_quality_rating + '</td></tr>' +
'<tr><td> <b>' + script_content_major_characters_title + '</b></td><td>' + script_content_major_characters + '</td></tr>' +
'<tr><td> <b>' + script_content_major_scenes_title + '</b></td><td>' + script_content_major_scenes + '</td></tr>' +
'<tr><td> <b>' + script_content_plot_complexity_title + '</b></td><td>' + script_content_plot_complexity + '</td></tr>' +
'<tr><td> <b>' + script_content_filming_locations_title + '</b></td><td>' + script_content_filming_locations + '</td></tr>' +
'<tr><td> <b>' + script_content_props_title + '</b></td><td>' + script_content_props + '</td></tr>' +
'<tr><td> <b>' + script_content_plot_holes_title + '</b></td><td>' + script_content_plot_holes + '</td></tr>' +
'<tr><td> <b>' + script_summary_slides_title + '</b></td><td>' + script_summary_slides + '</td></tr>' +
'<tr><td> <b>' + scene_breakdown_sheets_title + '</b></td><td>' + scene_breakdown_sheets + '</td></tr>' +
'<tr><td> <b>' + script_content_scene_1_summary_title + '</b></td><td>' + script_content_scene_1_summary + '</td></tr>' +
'<tr><td> <b>' + script_content_scene_10_summary_title + '</b></td><td>' + script_content_scene_10_summary + '</td></tr>' +
'<tr><td> <b>' + script_content_scene_20_summary_title + '</b></td><td>' + script_content_scene_20_summary + '</td></tr>' +
'<tr><td> <b>' + script_content_coverage_title + '</b></td><td>' + script_content_coverage + '</td></tr>' +
'<tr><td> <b>' + script_content_synopsis_title + '</b></td><td>' + script_content_synopsis + '</td></tr>' +
'<tr><td> <b>' + script_content_treatment_title + '</b></td><td>' + script_content_treatment + '</td></tr>' +
'<tr><td> <b>' + script_content_key_plot_points_title + '</b></td><td>' + script_content_key_plot_points + '</td></tr>' +
'<tr><td> <b>' + script_content_story_arc_chart_title + '</b></td><td>' + script_content_story_arc_chart + '</td></tr>' +
'<tr><td> <b>' + script_content_character_descriptions_title + '</b></td><td>' + script_content_character_descriptions + '</td></tr>' +
'<tr><td> <b>' + script_content_critique_title + '</b></td><td>' + script_content_critique + '</td></tr>' +
'<tr><td> <b>' + script_content_themes_title + '</b></td><td>' + script_content_themes + '</td></tr>' +
'</table>';
        document.getElementById("table_div").innerHTML = content_output;

        //table.draw(data, options);
    });
}

function displaySubmissionForm() {
  var submission = document.getElementById("submission");
  document.getElementById("result_box").innerHTML = "<h3>Script Submission</h3>";

  var url_form  = [
    "<iframe name='screenplaySubmission' style='display:none;'></iframe>",
    "<form method='POST' target='screenplaySubmission'> <br>",
    "    Screenplay Name<br><input type='text' id='screenplayName' name='screenplayName' size=20><br>",
    "    Screenplay Content<br>",
    "    <textarea id='screenplayContent' name='screenplayContent' cols=80 rows=20></textarea><br><br>",
    "    <input type='submit' onclick='submitScreenplay();' value='Submit Screenplay'>",
    "</form>"
].join("\n");
  document.getElementById("table_div").innerHTML = url_form;
}

function submitScreenplay() {

  let = document.getElementById("screenplaySubmission");
  let screenplayName = document.getElementById("screenplayName");
  let screenplayContent = document.getElementById("screenplayContent");

  if (screenplayName.value == "") {
     alert("Ensure Screenplay Name is not empty!");
  }
  else if (screenplayContent.value == "") {
     alert("Ensure Screenplay Content is not empty!");
  }
  else {
    // perform operation with form input

    // Publish topic (as a promise)
    topic = "script-content";

    const bearer_token = `Bearer ${auth_token}`;

    const data_vals = {
      screenplay_name: screenplayName.value,
      screenplay_content: screenplayContent.value,
      datetime: newdate
    };
    const data = JSON.stringify(data_vals)

    console.log(data)

    // Create payload to send as per REST specification
    const attrs = { 'sent_by': 'script-analysis.js' };
    let body = { 'messages': [] };
    body['messages'].push({
      //'data': btoa(JSON.stringify(data)),
      'data': btoa(data),
      'attributes': attrs
    });

    // Return
    var request = gapi.client.request({
        "path":"https://pubsub.googleapis.com/v1/projects/" +
                project_id + "/topics/" + topic + ":publish",
        "method":"POST",
        "headers": {
           "Authorization": bearer_token,
        },
        "body": body,
    });

    response = request.execute(function(resp) {
        console.log(resp)
    });

    console.log( "Screenplay Name being submitted: " + screenplayName.value);
  }
}