import { fetchContractById, signContract } from "@/lib/supabase/contract-actions";
import { notFound } from "next/navigation";
import SignatureCanvas from "./SignatureCanvas";

export default async function SignContractPage({
  params,
}: {
  params: Promise<{ contractId: string }>;
}) {
  const { contractId } = await params;
  const contract = await fetchContractById(contractId);

  if (!contract) {
    notFound();
  }

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
      <div className="w-full max-w-2xl">
        {/* Header */}
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center w-14 h-14 bg-[#1D9E75]/10 rounded-full mb-4">
            <svg className="w-7 h-7 text-[#1D9E75]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
          </div>
          <h1 className="text-2xl font-serif font-bold text-gray-900">Sign Contract</h1>
          <p className="text-gray-500 mt-1">{contract.org?.name || "Organisation"}</p>
        </div>

        {/* Contract Info */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
          <h2 className="text-lg font-semibold text-gray-900">{contract.title}</h2>
          <p className="text-sm text-gray-500 mt-1">
            Prepared for <strong>{contract.employee?.first_name} {contract.employee?.last_name}</strong>
          </p>
          {contract.template_url && (
            <div className="mt-4 rounded-lg overflow-hidden border border-gray-200">
              <iframe
                src={contract.template_url}
                className="w-full h-96"
                title="Contract preview"
              />
            </div>
          )}
        </div>

        {/* Signature */}
        <SignatureCanvas contractId={contractId} contractTitle={contract.title} />
      </div>
    </div>
  );
}