"use client";

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import Link from "next/link";

export default function SwotAnalysisPage() {
  const [isClient, setIsClient] = useState(false);

  // This ensures the PDF viewer only renders on the client side
  useEffect(() => {
    setIsClient(true);
  }, []);

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-6">
        <Link href="/docs">
          <Button variant="outline" className="mb-4">
            ← Back to Documentation
          </Button>
        </Link>
        <h1 className="text-3xl font-bold mb-2">WODEY SWOT Analysis</h1>
        <p className="text-gray-600 mb-6">
          An in-depth analysis of Strengths, Weaknesses, Opportunities, and
          Threats for the WODEY platform.
        </p>
      </div>
      
      <div className="flex justify-end mb-4">
        <a 
          href="/docs/SWOT-Analysis.pdf"
          download="WODEY-SWOT-Analysis.pdf"
          className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded shadow-md"
        >
          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
          </svg>
          Download PDF
        </a>
      </div>
      
      {isClient ? (
        <div className="w-full h-[calc(100vh-200px)] border border-gray-300 rounded-lg overflow-hidden">
          <object
            data="/docs/SWOT-Analysis.pdf#toolbar=0"
            type="application/pdf"
            className="w-full h-full"
            title="SWOT Analysis PDF"
          >
            <p>
              Your browser does not support PDFs. Please download to view.
            </p>
          </object>
        </div>
      ) : (
        <div className="flex items-center justify-center w-full h-[calc(100vh-200px)] bg-gray-100 rounded-lg">
          Loading PDF viewer...
        </div>
      )}
    </div>
  );
}