import React, { useState, useEffect, FormEvent, useCallback } from 'react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { ScheduledJob } from '../../schedule';
import { CronPicker } from './CronPicker';
import { Recipe, decodeRecipe } from '../../recipe';
import { getStorageDirectory } from '../../recipe/recipe_management';
import ClockIcon from '../../assets/clock-icon.svg';
import * as yaml from 'yaml';

export interface NewSchedulePayload {
  id: string;
  recipe_source: string;
  cron: string;
  execution_mode?: string;
}

interface ScheduleModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (payload: NewSchedulePayload | string) => Promise<void>;
  schedule: ScheduledJob | null;
  isLoadingExternally: boolean;
  apiErrorExternally: string | null;
  initialDeepLink: string | null;
}

type SourceType = 'file' | 'deeplink';

interface CleanExtension {
  name: string;
  type: 'stdio' | 'sse' | 'builtin' | 'frontend' | 'streamable_http';
  cmd?: string;
  args?: string[];
  uri?: string;
  display_name?: string;
  tools?: unknown[];
  instructions?: string;
  env_keys?: string[];
  timeout?: number;
  description?: string;
  bundled?: boolean;
}

interface CleanRecipe {
  title: string;
  description: string;
  instructions?: string;
  prompt?: string;
  activities?: string[];
  extensions?: CleanExtension[];
  author?: {
    contact?: string;
    metadata?: string;
  };
  schedule?: {
    window_title?: string;
    working_directory?: string;
  };
}

async function parseDeepLink(deepLink: string): Promise<Recipe | null> {
  try {
    const url = new URL(deepLink);
    if (url.protocol !== 'goose:' || (url.hostname !== 'bot' && url.hostname !== 'recipe')) {
      return null;
    }

    const recipeParam = url.searchParams.get('config');
    if (!recipeParam) {
      return null;
    }

    return await decodeRecipe(recipeParam);
  } catch (error) {
    console.error('Failed to parse deep link:', error);
    return null;
  }
}

function recipeToYaml(recipe: Recipe): string {
  const cleanRecipe: CleanRecipe = {
    title: recipe.title,
    description: recipe.description,
  };

  if (recipe.instructions) {
    cleanRecipe.instructions = recipe.instructions;
  }

  if (recipe.prompt) {
    cleanRecipe.prompt = recipe.prompt;
  }

  if (recipe.activities && recipe.activities.length > 0) {
    cleanRecipe.activities = recipe.activities;
  }

  if (recipe.extensions && recipe.extensions.length > 0) {
    cleanRecipe.extensions = recipe.extensions.map((ext) => {
      const cleanExt: CleanExtension = {
        name: ext.name,
        type: 'builtin',
      };

      if ('type' in ext && ext.type) {
        cleanExt.type = ext.type as CleanExtension['type'];

        const extAny = ext as Record<string, unknown>;

        if (ext.type === 'sse' && extAny.uri) {
          cleanExt.uri = extAny.uri as string;
        } else if (ext.type === 'streamable_http' && extAny.uri) {
          cleanExt.uri = extAny.uri as string;
        } else if (ext.type === 'stdio') {
          if (extAny.cmd) {
            cleanExt.cmd = extAny.cmd as string;
          }
          if (extAny.args) {
            cleanExt.args = extAny.args as string[];
          }
        } else if (ext.type === 'builtin' && extAny.display_name) {
          cleanExt.display_name = extAny.display_name as string;
        }

        if ((ext.type as string) === 'frontend') {
          if (extAny.tools) {
            cleanExt.tools = extAny.tools as unknown[];
          }
          if (extAny.instructions) {
            cleanExt.instructions = extAny.instructions as string;
          }
        }
      } else {
        const extAny = ext as Record<string, unknown>;

        if (extAny.cmd) {
          cleanExt.type = 'stdio';
          cleanExt.cmd = extAny.cmd as string;
          if (extAny.args) {
            cleanExt.args = extAny.args as string[];
          }
        } else if (extAny.command) {
          cleanExt.type = 'stdio';
          cleanExt.cmd = extAny.command as string;
        } else if (extAny.uri) {
          cleanExt.type = 'streamable_http';
          cleanExt.uri = extAny.uri as string;
        } else if (extAny.tools) {
          cleanExt.type = 'frontend';
          cleanExt.tools = extAny.tools as unknown[];
          if (extAny.instructions) {
            cleanExt.instructions = extAny.instructions as string;
          }
        } else {
          cleanExt.type = 'builtin';
        }
      }

      if ('env_keys' in ext && ext.env_keys && ext.env_keys.length > 0) {
        cleanExt.env_keys = ext.env_keys;
      }

      if ('timeout' in ext && ext.timeout) {
        cleanExt.timeout = ext.timeout as number;
      }

      if ('description' in ext && ext.description) {
        cleanExt.description = ext.description as string;
      }

      if ('bundled' in ext && ext.bundled !== undefined) {
        cleanExt.bundled = ext.bundled as boolean;
      }

      return cleanExt;
    });
  }

  if (recipe.author) {
    cleanRecipe.author = {
      contact: recipe.author.contact || undefined,
      metadata: recipe.author.metadata || undefined,
    };
  }

  cleanRecipe.schedule = {
    window_title: `${recipe.title} - Scheduled`,
  };

  return yaml.stringify(cleanRecipe);
}

const modalLabelClassName = 'block text-sm font-medium text-text-prominent mb-1';

export const ScheduleModal: React.FC<ScheduleModalProps> = ({
  isOpen,
  onClose,
  onSubmit,
  schedule,
  isLoadingExternally,
  apiErrorExternally,
  initialDeepLink,
}) => {
  const isEditMode = !!schedule;

  const [scheduleId, setScheduleId] = useState<string>('');
  const [sourceType, setSourceType] = useState<SourceType>('file');
  const [recipeSourcePath, setRecipeSourcePath] = useState<string>('');
  const [deepLinkInput, setDeepLinkInput] = useState<string>('');
  const [parsedRecipe, setParsedRecipe] = useState<Recipe | null>(null);
  const [cronExpression, setCronExpression] = useState<string>('0 0 14 * * *');
  const [internalValidationError, setInternalValidationError] = useState<string | null>(null);

  const handleDeepLinkChange = useCallback(async (value: string) => {
    setDeepLinkInput(value);
    setInternalValidationError(null);

    if (value.trim()) {
      try {
        const recipe = await parseDeepLink(value.trim());
        if (recipe) {
          setParsedRecipe(recipe);
          if (recipe.title) {
            const cleanId = recipe.title
              .toLowerCase()
              .replace(/[^a-z0-9-]/g, '-')
              .replace(/-+/g, '-');
            setScheduleId(cleanId);
          }
        } else {
          setParsedRecipe(null);
          setInternalValidationError(
            'Invalid deep link format. Please use a goose://bot or goose://recipe link.'
          );
        }
      } catch {
        setParsedRecipe(null);
        setInternalValidationError(
          'Failed to parse deep link. Please ensure using a goose://bot or goose://recipe link and try again.'
        );
      }
    } else {
      setParsedRecipe(null);
    }
  }, []);

  useEffect(() => {
    if (isOpen) {
      if (schedule) {
        setScheduleId(schedule.id);
        setCronExpression(schedule.cron);
      } else {
        setScheduleId('');
        setSourceType('file');
        setRecipeSourcePath('');
        setDeepLinkInput('');
        setParsedRecipe(null);
        setCronExpression('0 0 14 * * *');
        setInternalValidationError(null);
        if (initialDeepLink) {
          setSourceType('deeplink');
          handleDeepLinkChange(initialDeepLink);
        }
      }
    }
  }, [isOpen, schedule, initialDeepLink, handleDeepLinkChange]);

  const handleBrowseFile = async () => {
    const defaultPath = getStorageDirectory(true);
    const filePath = await window.electron.selectFileOrDirectory(defaultPath);
    if (filePath) {
      if (filePath.endsWith('.yaml') || filePath.endsWith('.yml')) {
        setRecipeSourcePath(filePath);
        setInternalValidationError(null);
      } else {
        setInternalValidationError('Invalid file type: Please select a YAML file (.yaml or .yml)');
      }
    }
  };

  const handleLocalSubmit = async (event: FormEvent) => {
    event.preventDefault();
    setInternalValidationError(null);

    if (isEditMode) {
      await onSubmit(cronExpression);
      return;
    }

    if (!scheduleId.trim()) {
      setInternalValidationError('Schedule ID is required.');
      return;
    }

    let finalRecipeSource = '';

    if (sourceType === 'file') {
      if (!recipeSourcePath) {
        setInternalValidationError('Recipe source file is required.');
        return;
      }
      finalRecipeSource = recipeSourcePath;
    } else if (sourceType === 'deeplink') {
      if (!deepLinkInput.trim()) {
        setInternalValidationError('Deep link is required.');
        return;
      }
      if (!parsedRecipe) {
        setInternalValidationError('Invalid deep link. Please check the format.');
        return;
      }

      try {
        const yamlContent = recipeToYaml(parsedRecipe);
        const tempFileName = `schedule-${scheduleId}-${Date.now()}.yaml`;
        const tempDir = window.electron.getConfig().GOOSE_WORKING_DIR || '.';
        const tempFilePath = `${tempDir}/${tempFileName}`;

        const writeSuccess = await window.electron.writeFile(tempFilePath, yamlContent);
        if (!writeSuccess) {
          setInternalValidationError('Failed to create temporary recipe file.');
          return;
        }

        finalRecipeSource = tempFilePath;
      } catch (error) {
        console.error('Failed to convert recipe to YAML:', error);
        setInternalValidationError('Failed to process the recipe from deep link.');
        return;
      }
    }

    const newSchedulePayload: NewSchedulePayload = {
      id: scheduleId.trim(),
      recipe_source: finalRecipeSource,
      cron: cronExpression,
    };

    await onSubmit(newSchedulePayload);
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/50 z-40 flex items-center justify-center p-4">
      <Card className="w-full max-w-md bg-background-default shadow-xl rounded-3xl z-50 flex flex-col max-h-[90vh] overflow-hidden">
        <div className="px-8 pt-6 pb-4 flex-shrink-0">
          <div className="flex items-center gap-3">
            <img src={ClockIcon} alt="Clock" className="w-8 h-8" />
            <div className="flex-1">
              <h2 className="text-base font-semibold text-text-prominent">
                {isEditMode ? 'Edit Schedule' : 'Create New Schedule'}
              </h2>
              {isEditMode && <p className="text-sm text-text-subtle">{schedule.id}</p>}
            </div>
          </div>
        </div>

        <form
          id="schedule-form"
          onSubmit={handleLocalSubmit}
          className="px-8 py-4 space-y-4 flex-grow overflow-y-auto"
        >
          {apiErrorExternally && (
            <p className="text-text-error text-sm mb-3 p-2 bg-background-error border border-border-error rounded-md">
              {apiErrorExternally}
            </p>
          )}
          {internalValidationError && (
            <p className="text-text-error text-sm mb-3 p-2 bg-background-error border border-border-error rounded-md">
              {internalValidationError}
            </p>
          )}

          {!isEditMode && (
            <>
              <div>
                <label htmlFor="scheduleId-modal" className={modalLabelClassName}>
                  Name:
                </label>
                <Input
                  type="text"
                  id="scheduleId-modal"
                  value={scheduleId}
                  onChange={(e) => setScheduleId(e.target.value)}
                  placeholder="e.g., daily-summary-job"
                  required
                />
              </div>

              <div>
                <label className={modalLabelClassName}>Source:</label>
                <div className="space-y-2">
                  <div className="flex bg-gray-100 dark:bg-gray-700 rounded-full p-1">
                    <button
                      type="button"
                      onClick={() => setSourceType('file')}
                      className={`flex-1 px-4 py-2 text-sm font-medium rounded-full transition-all ${
                        sourceType === 'file'
                          ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-sm'
                          : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
                      }`}
                    >
                      YAML
                    </button>
                    <button
                      type="button"
                      onClick={() => setSourceType('deeplink')}
                      className={`flex-1 px-4 py-2 text-sm font-medium rounded-full transition-all ${
                        sourceType === 'deeplink'
                          ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-sm'
                          : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
                      }`}
                    >
                      Deep link
                    </button>
                  </div>

                  {sourceType === 'file' && (
                    <div>
                      <Button
                        type="button"
                        variant="outline"
                        onClick={handleBrowseFile}
                        className="w-full justify-center rounded-full"
                      >
                        Browse for YAML file...
                      </Button>
                      {recipeSourcePath && (
                        <p className="mt-2 text-xs text-gray-500 dark:text-gray-400 italic">
                          Selected: {recipeSourcePath}
                        </p>
                      )}
                    </div>
                  )}

                  {sourceType === 'deeplink' && (
                    <div>
                      <Input
                        type="text"
                        value={deepLinkInput}
                        onChange={(e) => handleDeepLinkChange(e.target.value)}
                        placeholder="Paste goose://bot or goose://recipe link here..."
                        className="rounded-full"
                      />
                      {parsedRecipe && (
                        <div className="mt-2 p-2 bg-green-100 dark:bg-green-900/30 rounded-md border border-green-500/50">
                          <p className="text-xs text-green-700 dark:text-green-300 font-medium">
                            ✓ Recipe parsed successfully
                          </p>
                          <p className="text-xs text-green-600 dark:text-green-400">
                            Title: {parsedRecipe.title}
                          </p>
                          <p className="text-xs text-green-600 dark:text-green-400">
                            Description: {parsedRecipe.description}
                          </p>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </div>
            </>
          )}

          <div>
            <label className={modalLabelClassName}>Schedule:</label>
            <CronPicker schedule={schedule} onChange={setCronExpression} />
          </div>
        </form>

        <div className="flex gap-2 px-8 py-4 border-t border-border-subtle">
          <Button
            type="button"
            variant="ghost"
            onClick={onClose}
            disabled={isLoadingExternally}
            className="flex-1 text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800"
          >
            Cancel
          </Button>
          <Button
            type="submit"
            form="schedule-form"
            disabled={isLoadingExternally}
            className="flex-1"
          >
            {isLoadingExternally
              ? isEditMode
                ? 'Updating...'
                : 'Creating...'
              : isEditMode
                ? 'Update Schedule'
                : 'Create Schedule'}
          </Button>
        </div>
      </Card>
    </div>
  );
};