import React, { useState } from "react";
import {
  FileText,
  ZoomIn,
  ZoomOut,
  RotateCcw,
  ShieldCheck,
} from "lucide-react";

interface DocumentPreviewProps {
  title: string;
  documentType: "NDA" | "MSA";
  companyName: string;
  signatureDataUrl?: string;
  signatureDate?: string;
}

export const DocumentPreview: React.FC<DocumentPreviewProps> = ({
  title,
  documentType,
  companyName,
  signatureDataUrl,
  signatureDate,
}) => {
  const [zoom, setZoom] = useState(100);

  const handleZoomIn = () => setZoom((prev) => Math.min(prev + 10, 140));
  const handleZoomOut = () => setZoom((prev) => Math.max(prev - 10, 70));
  const handleZoomReset = () => setZoom(100);

  const formattedDate = signatureDate
    ? new Date(signatureDate).toLocaleDateString("en-US", {
        year: "numeric",
        month: "long",
        day: "numeric",
      })
    : "[Pending Signature]";

  return (
    <div className="flex flex-col rounded-xl border border-ink-200 bg-ink-50 shadow-premium overflow-hidden transition-premium w-full text-ink-900">
      {/* Doc toolbar */}
      <div className="flex flex-wrap items-center justify-between border-b border-ink-200 bg-ink-0 px-6 py-4 gap-4">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-ink-50 border border-ink-200">
            <FileText className="h-5 w-5 text-ink-900" />
          </div>
          <div>
            <span className="block text-sm font-bold text-ink-800">
              {title}
            </span>
            <span className="block text-[10px] text-ink-500 font-mono tracking-wider">
              REF: T4B-{documentType}-
              {companyName.toUpperCase().replace(/[^A-Z0-9]/g, "-")}-2026
            </span>
          </div>
        </div>
        <div className="flex items-center gap-3">
          {signatureDataUrl && (
            <div className="hidden sm:flex items-center gap-1.5 bg-emerald-500/10 border border-emerald-500/20 px-3 py-1 rounded-full text-xs font-semibold text-emerald-600 dark:text-emerald-400">
              <ShieldCheck className="h-3.5 w-3.5" />
              <span>Cryptographically Signed</span>
            </div>
          )}
          <div className="flex items-center gap-1.5 bg-ink-50 rounded-lg p-1 border border-ink-200">
            <button
              type="button"
              onClick={handleZoomOut}
              className="rounded p-1.5 hover:bg-ink-0 text-ink-600 hover:text-ink-800 transition-colors cursor-pointer"
              title="Zoom Out"
            >
              <ZoomOut className="h-4 w-4" />
            </button>
            <span className="px-2 text-xs font-bold text-ink-700 min-w-[3.5rem] text-center">
              {zoom}%
            </span>
            <button
              type="button"
              onClick={handleZoomIn}
              className="rounded p-1.5 hover:bg-ink-0 text-ink-600 hover:text-ink-800 transition-colors cursor-pointer"
              title="Zoom In"
            >
              <ZoomIn className="h-4 w-4" />
            </button>
            <button
              type="button"
              onClick={handleZoomReset}
              className="rounded p-1.5 hover:bg-ink-0 text-ink-600 hover:text-ink-800 transition-colors cursor-pointer"
              title="Reset Zoom"
            >
              <RotateCcw className="h-4 w-4" />
            </button>
          </div>
        </div>
      </div>

      {/* Doc page area */}
      <div className="flex-1 overflow-auto p-6 md:p-8 max-h-[750px] min-h-[600px] flex justify-center bg-ink-100/40 custom-scrollbar">
        <div
          className="bg-white p-12 md:p-16 shadow-lg border border-ink-250 rounded-md text-sm leading-relaxed text-ink-800 font-serif origin-top transition-all duration-200 w-full h-fit self-start"
          style={{
            maxWidth: "780px",
            transform: `scale(${zoom / 100})`,
            transformOrigin: "top center",
            marginBottom: zoom > 100 ? `${(zoom - 100) * 6}px` : "0px",
          }}
        >
          {/* Document Header / Letterhead */}
          <div className="text-center mb-10 pb-6 border-b-2 border-ink-900">
            <h1 className="text-xl md:text-2xl font-bold uppercase tracking-wider text-ink-900 font-sans mb-2">
              {documentType === "NDA"
                ? "Mutual Non-Disclosure Agreement"
                : "Master Services Agreement"}
            </h1>
            <p className="text-xs uppercase tracking-widest text-ink-500 font-sans font-bold">
              Tech4Biz Technology Integration Portal
            </p>
          </div>

          {/* Legal Body */}
          {documentType === "NDA" ? (
            <div className="space-y-6 text-justify">
              <p>
                This <strong>MUTUAL NON-DISCLOSURE AGREEMENT</strong> (the
                "Agreement") is made and entered into as of the date of final
                execution below (the "Effective Date"), by and between:
              </p>

              <div className="space-y-3 pl-6 border-l-2 border-ink-200 py-1 font-sans text-xs text-ink-700">
                <p>
                  <strong>TECH4BIZ SOLUTIONS INC.</strong>, a corporation
                  organized and existing under the laws of Delaware, with its
                  principal executive office located at 100 Innovation Way,
                  Suite 400 (hereinafter referred to as{" "}
                  <strong>"Tech4Biz"</strong> or the{" "}
                  <strong>"Disclosing Party"</strong>); and
                </p>
                <p>
                  <strong>{companyName || "[COMPANY NAME PENDING]"}</strong>, a
                  business entity registered and operating under the laws of its
                  jurisdiction of incorporation (hereinafter referred to as the{" "}
                  <strong>"Company"</strong> or the{" "}
                  <strong>"Receiving Party"</strong>).
                </p>
              </div>

              <p className="italic text-xs border-y border-ink-200 py-2">
                WHEREAS, Tech4Biz and the Company (collectively referred to as
                the "Parties" and individually as a "Party") desire to share
                proprietary information to evaluate a potential business
                relationship concerning technology integrations, hardware IP
                licensing (including RISC-V cores, FPGA modules), and developer
                frameworks (the "Purpose").
              </p>

              <p>
                NOW, THEREFORE, in consideration of the mutual covenants and
                promises contained herein, the Parties agree as follows:
              </p>

              <div>
                <h3 className="font-sans font-bold text-ink-900 text-xs tracking-wider uppercase mb-1">
                  1. Definition of Confidential Information
                </h3>
                <p>
                  "Confidential Information" shall mean all information or
                  material disclosed by one Party to the other Party that has
                  value in such Party's business, including but not limited to
                  technical data, hardware designs, silicon blueprints, compiler
                  architecture, source code, product plans, marketing
                  strategies, or business metrics, whether designated as
                  confidential or which under the circumstances of disclosure
                  should reasonably be understood to be confidential.
                </p>
              </div>

              <div>
                <h3 className="font-sans font-bold text-ink-900 text-xs tracking-wider uppercase mb-1">
                  2. Obligations of Confidentiality and Non-Use
                </h3>
                <p>
                  The Receiving Party agrees: (a) to hold the Disclosing Party's
                  Confidential Information in strict confidence using the same
                  degree of care it uses to protect its own confidential
                  information, but in no event less than a reasonable degree of
                  care; (b) not to disclose such Confidential Information to any
                  third party without prior written consent; and (c) to use the
                  Confidential Information solely for the evaluation and
                  execution of the Purpose.
                </p>
              </div>

              <div>
                <h3 className="font-sans font-bold text-ink-900 text-xs tracking-wider uppercase mb-1">
                  3. Permitted Disclosures
                </h3>
                <p>
                  The Receiving Party may disclose Confidential Information only
                  to those of its employees, contractors, and advisors who have
                  a verifiable "need to know" in connection with the Purpose and
                  who are bound by confidentiality obligations at least as
                  restrictive as those contained in this Agreement.
                </p>
              </div>

              <div>
                <h3 className="font-sans font-bold text-ink-900 text-xs tracking-wider uppercase mb-1">
                  4. Term and Survival
                </h3>
                <p>
                  This Agreement shall govern disclosures made within three (3)
                  years from the Effective Date. The obligations of
                  confidentiality, non-disclosure, and non-use shall survive for
                  five (5) years following the termination of this Agreement, or
                  indefinitely with respect to trade secrets.
                </p>
              </div>

              <div>
                <h3 className="font-sans font-bold text-ink-900 text-xs tracking-wider uppercase mb-1">
                  5. Governing Law and Jurisdiction
                </h3>
                <p>
                  This Agreement shall be governed by, construed, and enforced
                  in accordance with the laws of the State of Delaware, without
                  regard to its conflict of laws principles. Any legal action
                  arising hereunder shall be brought exclusively in the state or
                  federal courts located in Delaware.
                </p>
              </div>
            </div>
          ) : (
            <div className="space-y-6 text-justify">
              <p>
                This <strong>MASTER SERVICES AGREEMENT</strong> (the "MSA" or
                "Agreement") defines the commercial framework for service
                delivery, digital asset provisioning, and technology licensing,
                by and between:
              </p>

              <div className="space-y-3 pl-6 border-l-2 border-ink-200 py-1 font-sans text-xs text-ink-700">
                <p>
                  <strong>TECH4BIZ SOLUTIONS INC.</strong>, a Delaware
                  corporation, with its principal office at 100 Innovation Way,
                  Suite 400 (hereinafter referred to as{" "}
                  <strong>"Tech4Biz"</strong>); and
                </p>
                <p>
                  <strong>{companyName || "[COMPANY NAME PENDING]"}</strong>, a
                  business entity registered and operating under the laws of its
                  jurisdiction of incorporation (hereinafter referred to as the{" "}
                  <strong>"Client"</strong>).
                </p>
              </div>

              <p className="italic text-xs border-y border-ink-200 py-2">
                WHEREAS, Tech4Biz provides high-fidelity silicon designs, custom
                compilation systems, and software engineering consulting; and
                the Client wishes to engage Tech4Biz to access such tools and
                services under the terms and conditions set forth herein.
              </p>

              <p>
                NOW, THEREFORE, in consideration of the mutual covenants and
                promises contained herein, the Parties agree as follows:
              </p>

              <div>
                <h3 className="font-sans font-bold text-ink-900 text-xs tracking-wider uppercase mb-1">
                  1. Scope of Work and Deliverables
                </h3>
                <p>
                  All services, deliverables, and digital asset repositories
                  (including synthesized silicon architectures, software
                  libraries, and proprietary compiler tools) provided by
                  Tech4Biz shall be set forth in individually executed
                  Statements of Work ("SOWs") signed by authorized
                  representatives of both Parties. Each SOW shall reference and
                  be governed by the terms of this MSA.
                </p>
              </div>

              <div>
                <h3 className="font-sans font-bold text-ink-900 text-xs tracking-wider uppercase mb-1">
                  2. Intellectual Property and Licensing
                </h3>
                <p>
                  Except as explicitly outlined in an SOW, all background
                  Intellectual Property owned by Tech4Biz (including hardware
                  designs, compilers, and the CodeNuk framework) remains the
                  exclusive property of Tech4Biz. Client is granted a limited,
                  non-exclusive, non-transferable, revocable license to utilize
                  downloaded assets solely for internal testing and development
                  purposes.
                </p>
              </div>

              <div>
                <h3 className="font-sans font-bold text-ink-900 text-xs tracking-wider uppercase mb-1">
                  3. Payment Terms and Financial Covenants
                </h3>
                <p>
                  Client shall pay Tech4Biz the fees specified in each SOW.
                  Unless otherwise stated in an SOW, all payments are due Net 30
                  days from the invoice date. Late payments shall accumulate
                  interest at the rate of 1.5% per month, or the maximum rate
                  permitted by law, whichever is lower.
                </p>
              </div>

              <div>
                <h3 className="font-sans font-bold text-ink-900 text-xs tracking-wider uppercase mb-1">
                  4. Limitation of Liability
                </h3>
                <p>
                  IN NO EVENT SHALL EITHER PARTY BE LIABLE FOR ANY INDIRECT,
                  INCIDENTAL, SPECIAL, OR CONSEQUENTIAL DAMAGES. TECH4BIZ TOTAL
                  AGGREGATE LIABILITY UNDER THIS AGREEMENT AND ANY SOW SHALL NOT
                  EXCEED THE TOTAL FEES PAID BY CLIENT TO TECH4BIZ UNDER THE
                  APPLICABLE SOW IN THE SIX (6) MONTHS PRECEDING THE CLAIM.
                </p>
              </div>

              <div>
                <h3 className="font-sans font-bold text-ink-900 text-xs tracking-wider uppercase mb-1">
                  5. Confidentiality
                </h3>
                <p>
                  The Parties agree that the existence, terms, and performance
                  of this Agreement, as well as all proprietary information
                  shared hereunder, shall be treated as confidential and
                  governed by the active Mutual Non-Disclosure Agreement (NDA)
                  executed by the Parties.
                </p>
              </div>
            </div>
          )}

          {/* Signatures Section */}
          <div className="mt-14 pt-8 border-t border-ink-300">
            <p className="text-xs uppercase text-ink-500 font-sans font-bold mb-6 text-center tracking-widest">
              IN WITNESS WHEREOF, the Parties have executed this Agreement as of
              the dates indicated below.
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 text-left font-sans text-xs">
              <div className="space-y-4">
                <p className="font-bold text-ink-900 border-b border-ink-200 pb-1 uppercase tracking-wider">
                  For: Tech4Biz Solutions Inc.
                </p>
                <div className="h-16 flex items-end pb-1 border-b border-ink-300 relative">
                  <span className="font-serif italic text-base text-ink-900 select-none pb-1">
                    Yasha Khandelwal{" "}
                  </span>
                </div>
                <div className="space-y-1 text-ink-600 text-[11px]">
                  <p>
                    <strong>Name:</strong> Yasha Khandelwal
                  </p>
                  <p>
                    <strong>Title:</strong> CEO
                  </p>
                  <p>
                    <strong>Date:</strong> January 1, 2026
                  </p>
                </div>
              </div>

              <div className="space-y-4">
                <p className="font-bold text-ink-900 border-b border-ink-200 pb-1 uppercase tracking-wider">
                  For: {companyName.toUpperCase()}
                </p>
                <div className="h-16 flex items-end justify-center pb-1 border-b border-ink-300 relative overflow-hidden">
                  {signatureDataUrl ? (
                    <img
                      src={signatureDataUrl}
                      alt="Client Signature"
                      className="max-h-14 object-contain mix-blend-multiply pb-1"
                    />
                  ) : (
                    <span className="text-[11px] italic text-ink-400 pb-2">
                      [Awaiting Signature]
                    </span>
                  )}
                </div>
                <div className="space-y-1 text-ink-600 text-[11px]">
                  <p>
                    <strong>Name:</strong> Authorized Representative
                  </p>
                  <p>
                    <strong>Title:</strong> Corporate Designee
                  </p>
                  <p>
                    <strong>Date:</strong> {formattedDate}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default DocumentPreview;
