<template>
  <div class="export-options" :class="containerClass">
    <div class="export-content">
      <div class="export-section">
        <div class="export-buttons">
          <UButton
            @click="copyToClipboard"
            class="export-btn"
            :disabled="isProcessing"
            ref="copyButton"
          >
            <UIcon name="i-heroicons-clipboard" />
            <span>Copy as Text</span>
            <UIcon v-if="showCopySuccess" name="i-heroicons-check" class="success-icon" />
          </UButton>

          <UButton
            @click="downloadAsMarkdown"
            class="export-btn"
            :disabled="isProcessing"
            ref="downloadButton"
          >
            <UIcon name="i-heroicons-arrow-down-tray" />
            <span>Download Markdown</span>
            <UIcon
              v-if="showDownloadSuccess"
              name="i-heroicons-check"
              class="success-icon"
            />
          </UButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  exportData: any;
  filename?: string;
  title?: string;
  containerClass?: string;
}

const props = withDefaults(defineProps<Props>(), {
  filename: "export",
  title: "Export Data",
  containerClass: "centered",
});

const isProcessing = ref(false);
const showCopySuccess = ref(false);
const showDownloadSuccess = ref(false);

const copyButton = ref<HTMLButtonElement>();
const downloadButton = ref<HTMLButtonElement>();

// Success feedback animation
const showSuccessFeedback = (
  buttonRef: Ref<HTMLButtonElement | undefined>,
  successRef: Ref<boolean>
) => {
  if (!buttonRef.value) return;

  successRef.value = true;

  // Add checkmark overlay animation
  const button = buttonRef.value;
  button.classList.add("success-state");

  setTimeout(() => {
    successRef.value = false;
    button.classList.remove("success-state");
  }, 2000);
};

const copyToClipboard = async () => {
  if (isProcessing.value) return;

  isProcessing.value = true;

  try {
    const textContent = extractTextContent();

    if (navigator.clipboard && navigator.clipboard.writeText) {
      await navigator.clipboard.writeText(textContent);
    } else {
      // Fallback for browsers without clipboard API
      const textarea = document.createElement("textarea");
      textarea.value = textContent;
      textarea.style.position = "fixed";
      textarea.style.opacity = "0";
      document.body.appendChild(textarea);
      textarea.focus();
      textarea.select();

      const successful = document.execCommand("copy");
      document.body.removeChild(textarea);

      if (!successful) {
        throw new Error("execCommand copy failed");
      }
    }

    showSuccessFeedback(copyButton, showCopySuccess);
  } catch (error) {
    console.error("Copy failed:", error);
    alert("Copy failed. Please try again or use the download option.");
  } finally {
    isProcessing.value = false;
  }
};

const downloadAsMarkdown = () => {
  if (isProcessing.value) return;

  isProcessing.value = true;

  try {
    const content = convertToMarkdown();
    downloadFile(content, `${props.filename}.md`, "text/markdown");
    showSuccessFeedback(downloadButton, showDownloadSuccess);
  } catch (error) {
    console.error("Markdown download failed:", error);
    alert("Download failed. Please try again.");
  } finally {
    isProcessing.value = false;
  }
};

const extractTextContent = (): string => {
  const today = new Date().toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  let content = `${props.title.toUpperCase()}\n${"=".repeat(
    props.title.length
  )}\n\nExported ${today}\n\n`;

  // Convert data to readable text format
  if (props.exportData) {
    content += formatDataAsText(props.exportData);
  }

  return content;
};

const convertToMarkdown = (): string => {
  const today = new Date().toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  let content = `# ${props.title}\n\n*Exported ${today}*\n\n`;

  // Convert data to markdown format
  if (props.exportData) {
    content += formatDataAsMarkdown(props.exportData);
  }

  return content;
};

const formatDataAsText = (data: any): string => {
  // Special handling for different template types
  if (data.section === "tech-charter") {
    return formatTechCharterAsText(data);
  } else if (data.section === "membership-agreement") {
    return formatMembershipAgreementAsText(data);
  } else if (data.section === "conflict-resolution-framework") {
    return formatConflictResolutionAsText(data);
  } else if (data.section === "decision-framework") {
    return formatDecisionFrameworkAsText(data);
  }

  if (Array.isArray(data)) {
    return data
      .map((item, index) => `${index + 1}. ${formatObjectAsText(item)}`)
      .join("\n");
  } else if (typeof data === "object" && data !== null) {
    return formatObjectAsText(data);
  }
  return String(data);
};

const formatDataAsMarkdown = (data: any): string => {
  // Special handling for different template types
  if (data.section === "tech-charter") {
    return formatTechCharterAsMarkdown(data);
  } else if (data.section === "membership-agreement") {
    return formatMembershipAgreementAsMarkdown(data);
  } else if (data.section === "conflict-resolution-framework") {
    return formatConflictResolutionAsMarkdown(data);
  } else if (data.section === "decision-framework") {
    return formatDecisionFrameworkAsMarkdown(data);
  }

  if (Array.isArray(data)) {
    return data
      .map((item, index) => `${index + 1}. ${formatObjectAsMarkdown(item)}`)
      .join("\n\n");
  } else if (typeof data === "object" && data !== null) {
    return formatObjectAsMarkdown(data);
  }
  return String(data);
};

const formatTechCharterAsText = (data: any): string => {
  let content = `PURPOSE\n-------\n\n${data.charterPurpose}\n\n`;

  const selectedPrinciples = Object.keys(data.principleWeights).filter(
    (p) => data.principleWeights[p] > 0
  );

  if (selectedPrinciples.filter((p) => !data.nonNegotiables.includes(p)).length > 0) {
    content += `CORE PRINCIPLES\n---------------\n\n`;
    selectedPrinciples
      .filter((p) => !data.nonNegotiables.includes(p))
      .forEach((pId) => {
        const principle = data.principles.find((p: any) => p.id === pId);
        if (principle) {
          content += `• ${principle.name}\n`;
        }
      });
    content += "\n";
  }

  if (data.nonNegotiables.length > 0) {
    content += `NON-NEGOTIABLE REQUIREMENTS\n---------------------------\n\nAny vendor failing these requirements is automatically disqualified.\n\n`;
    data.nonNegotiables.forEach((pId: string) => {
      const principle = data.principles.find((p: any) => p.id === pId);
      if (principle) {
        content += `• ${principle.name}\n`;
      }
    });
    content += "\n";
  }

  content += `TECHNICAL CONSTRAINTS\n---------------------\n\n`;
  content += `• Authentication: ${data.constraints.sso}\n`;
  content += `• Hosting: ${data.constraints.hosting}\n`;
  if (data.constraints.integrations.length > 0) {
    content += `• Required Integrations: ${data.constraints.integrations.join(", ")}\n`;
  }
  content += `• Support Level: ${data.constraints.support}\n`;
  content += `• Migration Timeline: ${data.constraints.timeline}\n\n`;

  if (data.sortedWeights.length > 0) {
    content += `EVALUATION RUBRIC\n-----------------\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
    data.sortedWeights.forEach((principle: any) => {
      content += `${principle.name} (Weight: ${data.principleWeights[principle.id]})\n${
        principle.rubricDescription
      }\n\n`;
    });
  }

  return content;
};

const formatTechCharterAsMarkdown = (data: any): string => {
  let content = `## Purpose\n\n${data.charterPurpose}\n\n`;

  const selectedPrinciples = Object.keys(data.principleWeights).filter(
    (p) => data.principleWeights[p] > 0
  );

  if (selectedPrinciples.filter((p) => !data.nonNegotiables.includes(p)).length > 0) {
    content += `## Core Principles\n\n`;
    selectedPrinciples
      .filter((p) => !data.nonNegotiables.includes(p))
      .forEach((pId) => {
        const principle = data.principles.find((p: any) => p.id === pId);
        if (principle) {
          content += `- ${principle.name}\n`;
        }
      });
    content += "\n";
  }

  if (data.nonNegotiables.length > 0) {
    content += `## Non-Negotiable Requirements\n\n**Any vendor failing these requirements is automatically disqualified.**\n\n`;
    data.nonNegotiables.forEach((pId: string) => {
      const principle = data.principles.find((p: any) => p.id === pId);
      if (principle) {
        content += `- **${principle.name}**\n`;
      }
    });
    content += "\n";
  }

  content += `## Technical Constraints\n\n`;
  content += `- Authentication: ${data.constraints.sso}\n`;
  content += `- Hosting: ${data.constraints.hosting}\n`;
  if (data.constraints.integrations.length > 0) {
    content += `- Required Integrations: ${data.constraints.integrations.join(", ")}\n`;
  }
  content += `- Support Level: ${data.constraints.support}\n`;
  content += `- Migration Timeline: ${data.constraints.timeline}\n\n`;

  if (data.sortedWeights.length > 0) {
    content += `## Evaluation Rubric\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
    content += `| Criterion | Description | Weight |\n`;
    content += `|-----------|-------------|--------|\n`;
    data.sortedWeights.forEach((principle: any) => {
      content += `| ${principle.name} | ${principle.rubricDescription} | ${
        data.principleWeights[principle.id]
      } |\n`;
    });
  }

  return content;
};

const formatObjectAsText = (obj: any): string => {
  if (!obj || typeof obj !== "object") return String(obj);

  return Object.entries(obj)
    .filter(([key, value]) => value !== null && value !== undefined && key !== "id")
    .map(([key, value]) => {
      const formattedKey = key
        .replace(/([A-Z])/g, " $1")
        .replace(/^./, (str) => str.toUpperCase());
      if (typeof value === "object") {
        return `${formattedKey}: ${JSON.stringify(value)}`;
      }
      return `${formattedKey}: ${value}`;
    })
    .join("\n");
};

const formatObjectAsMarkdown = (obj: any): string => {
  if (!obj || typeof obj !== "object") return String(obj);

  return Object.entries(obj)
    .filter(([key, value]) => value !== null && value !== undefined && key !== "id")
    .map(([key, value]) => {
      const formattedKey = key
        .replace(/([A-Z])/g, " $1")
        .replace(/^./, (str) => str.toUpperCase());
      if (typeof value === "object") {
        return `**${formattedKey}**: \`${JSON.stringify(value)}\``;
      }
      return `**${formattedKey}**: ${value}`;
    })
    .join("  \n");
};

// Membership Agreement formatting
const formatMembershipAgreementAsText = (data: any): string => {
  let content = `MEMBERSHIP AGREEMENT\n====================\n\n`;
  content += `Cooperative Name: ${data.cooperativeName}\n`;
  content += `Member Name: ${data.formData.memberName || "[Member Name]"}\n`;
  content += `Effective Date: ${data.formData.effectiveDate || "[Date]"}\n\n`;

  if (data.formData.purpose) {
    content += `PURPOSE\n-------\n${data.formData.purpose}\n\n`;
  }

  if (data.formData.membershipRequirements) {
    content += `MEMBERSHIP REQUIREMENTS\n----------------------\n${data.formData.membershipRequirements}\n\n`;
  }

  if (data.formData.rightsAndResponsibilities) {
    content += `RIGHTS AND RESPONSIBILITIES\n--------------------------\n${data.formData.rightsAndResponsibilities}\n\n`;
  }

  return content;
};

const formatMembershipAgreementAsMarkdown = (data: any): string => {
  let content = `## Membership Agreement\n\n`;
  content += `**Cooperative Name:** ${data.cooperativeName}  \n`;
  content += `**Member Name:** ${data.formData.memberName || "[Member Name]"}  \n`;
  content += `**Effective Date:** ${data.formData.effectiveDate || "[Date]"}  \n\n`;

  if (data.formData.purpose) {
    content += `### Purpose\n\n${data.formData.purpose}\n\n`;
  }

  if (data.formData.membershipRequirements) {
    content += `### Membership Requirements\n\n${data.formData.membershipRequirements}\n\n`;
  }

  if (data.formData.rightsAndResponsibilities) {
    content += `### Rights and Responsibilities\n\n${data.formData.rightsAndResponsibilities}\n\n`;
  }

  return content;
};

// Conflict Resolution Framework formatting
const formatConflictResolutionAsText = (data: any): string => {
  let content = `CONFLICT RESOLUTION FRAMEWORK\n=============================\n\n`;
  content += `Organization: ${data.orgName}\n`;
  content += `Organization Type: ${data.orgType}\n`;
  content += `Member Count: ${data.memberCount}\n\n`;

  if (data.coreValues?.length > 0) {
    content += `CORE VALUES\n-----------\n`;
    data.coreValues.forEach((value: string, index: number) => {
      content += `${index + 1}. ${value}\n`;
    });
    content += "\n";
  }

  if (data.principles?.length > 0) {
    content += `PRINCIPLES\n----------\n`;
    data.principles.forEach((principle: string, index: number) => {
      content += `${index + 1}. ${principle}\n`;
    });
    content += "\n";
  }

  if (data.policies) {
    content += `POLICIES\n--------\n`;
    Object.entries(data.policies).forEach(([key, value]) => {
      if (value) {
        const formattedKey = key
          .replace(/([A-Z])/g, " $1")
          .replace(/^./, (str) => str.toUpperCase());
        content += `${formattedKey}: ${value}\n`;
      }
    });
  }

  return content;
};

const formatConflictResolutionAsMarkdown = (data: any): string => {
  let content = `## Conflict Resolution Framework\n\n`;
  content += `**Organization:** ${data.orgName}  \n`;
  content += `**Organization Type:** ${data.orgType}  \n`;
  content += `**Member Count:** ${data.memberCount}  \n\n`;

  if (data.coreValues?.length > 0) {
    content += `### Core Values\n\n`;
    data.coreValues.forEach((value: string, index: number) => {
      content += `${index + 1}. ${value}\n`;
    });
    content += "\n";
  }

  if (data.principles?.length > 0) {
    content += `### Principles\n\n`;
    data.principles.forEach((principle: string, index: number) => {
      content += `${index + 1}. ${principle}\n`;
    });
    content += "\n";
  }

  if (data.policies) {
    content += `### Policies\n\n`;
    Object.entries(data.policies).forEach(([key, value]) => {
      if (value) {
        const formattedKey = key
          .replace(/([A-Z])/g, " $1")
          .replace(/^./, (str) => str.toUpperCase());
        content += `**${formattedKey}:** ${value}  \n`;
      }
    });
  }

  return content;
};

// Decision Framework formatting
const formatDecisionFrameworkAsText = (data: any): string => {
  let content = `DECISION FRAMEWORK RESULTS\n=========================\n\n`;

  if (data.surveyResponses) {
    content += `SURVEY RESPONSES\n----------------\n`;
    content += `Urgency: ${data.surveyResponses.urgency}\n`;
    content += `Reversible: ${data.surveyResponses.reversible}\n`;
    content += `Expertise: ${data.surveyResponses.expertise}\n`;
    content += `Impact: ${data.surveyResponses.impact}\n`;
    content += `Options: ${data.surveyResponses.options}\n`;
    content += `Investment: ${data.surveyResponses.investment}\n`;
    content += `Team Size: ${data.surveyResponses.teamSize}\n\n`;
  }

  if (data.recommendedFramework) {
    const framework = data.recommendedFramework;
    content += `RECOMMENDED FRAMEWORK\n--------------------\n`;
    content += `Method: ${framework.method}\n`;
    content += `Tagline: ${framework.tagline}\n\n`;
    content += `Reasoning: ${framework.reasoning}\n\n`;

    if (framework.steps) {
      content += `IMPLEMENTATION STEPS\n-------------------\n`;
      framework.steps.forEach((step: string, index: number) => {
        content += `${index + 1}. ${step}\n`;
      });
      content += "\n";
    }

    if (framework.tips) {
      content += `PRO TIPS\n--------\n`;
      framework.tips.forEach((tip: string, index: number) => {
        content += `${index + 1}. ${tip}\n`;
      });
      content += "\n";
    }
  }

  return content;
};

const formatDecisionFrameworkAsMarkdown = (data: any): string => {
  let content = `## Decision Framework Results\n\n`;

  if (data.surveyResponses) {
    content += `### Survey Responses\n\n`;
    content += `**Urgency:** ${data.surveyResponses.urgency}  \n`;
    content += `**Reversible:** ${data.surveyResponses.reversible}  \n`;
    content += `**Expertise:** ${data.surveyResponses.expertise}  \n`;
    content += `**Impact:** ${data.surveyResponses.impact}  \n`;
    content += `**Options:** ${data.surveyResponses.options}  \n`;
    content += `**Investment:** ${data.surveyResponses.investment}  \n`;
    content += `**Team Size:** ${data.surveyResponses.teamSize}  \n\n`;
  }

  if (data.recommendedFramework) {
    const framework = data.recommendedFramework;
    content += `### Recommended Framework\n\n`;
    content += `**Method:** ${framework.method}  \n`;
    content += `**Tagline:** ${framework.tagline}  \n\n`;
    content += `**Reasoning:** ${framework.reasoning}\n\n`;

    if (framework.steps) {
      content += `#### Implementation Steps\n\n`;
      framework.steps.forEach((step: string, index: number) => {
        content += `${index + 1}. ${step}\n`;
      });
      content += "\n";
    }

    if (framework.tips) {
      content += `#### Pro Tips\n\n`;
      framework.tips.forEach((tip: string, index: number) => {
        content += `${index + 1}. ${tip}\n`;
      });
      content += "\n";
    }
  }

  return content;
};

const downloadFile = (content: string, filename: string, type: string) => {
  const blob = new Blob([content], { type });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
};
</script>

<style scoped>
@reference "tailwindcss";
.export-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  gap: 1rem;
}

.export-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.export-buttons {
  @apply font-mono;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.export-btn {
  @apply bg-neutral-100 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-white;
}

.export-btn:hover:not(:disabled) {
  background: #000;
  color: #fff;
  transform: translateY(-2px) translateX(-2px);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
}

.export-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.export-btn.success-state {
  background: #10b981 !important;
  color: white !important;
  border-color: #10b981 !important;
}

.success-icon {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  animation: successPulse 2s ease-out;
  color: #10b981;
}

.export-btn.success-state .success-icon {
  color: white;
}

@keyframes successPulse {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
  }
  40% {
    transform: translateY(-50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(1);
  }
}
/* Mobile responsive */
@media (max-width: 768px) {
  .export-content {
    flex-direction: column;
    align-items: stretch;
  }

  .export-section {
    justify-content: center;
  }

  .export-buttons {
    justify-content: center;
  }

  .export-btn {
    flex: 1;
    justify-content: center;
    min-width: 140px;
  }
}
</style>
