"use client"

import * as React from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
// import { PenIcon, InfoIcon } from "lucide-react" // 필요하다면

import type { ContractDetailParsed } from "@/db/schema/contract"

/**
 * E-sign Status Dialog Props
 */
interface EsignStatusDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  po: ContractDetailParsed | null;  // 실제로 표시할 계약 데이터
}

export function EsignStatusDialog({
  open,
  onOpenChange,
  po,
}: EsignStatusDialogProps) {
    console.log(open)
    console.log(po)
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Electronic Signature Status</DialogTitle>
          <DialogDescription>
            {po
              ? `Check the e-sign envelopes and signers for contract #${po.contractNo}.`
              : "No contract selected."
            }
          </DialogDescription>
        </DialogHeader>

        {/* 본문 영역 */}
        {po ? (
          po.envelopes.length === 0 ? (
            <div className="text-sm text-muted-foreground">
              No e-sign envelopes found for this contract.
            </div>
          ) : (
            <ScrollArea className="h-64 pr-2">
              {po.envelopes.map((envelope, idx) => {
                return (
                  <div key={envelope.id} className="mb-4">
                    {/* Envelope Header */}
                    <div className="flex items-center justify-between mb-1">
                      <span className="font-semibold text-sm">
                        Envelope #{envelope.id} 
                      </span>
                      <Badge variant="outline">
                        {envelope.envelopeStatus}
                      </Badge>
                    </div>
                    <div className="text-xs text-muted-foreground">
                      Updated at: {envelope.updatedAt}
                    </div>

                    {/* Signers */}
                    <Separator className="my-2" />
                    {envelope.signers && envelope.signers.length > 0 ? (
                      <div className="space-y-2">
                        {envelope.signers.map((signer) => (
                          <div key={signer.id} className="px-2 py-1 bg-muted rounded">
                            <div className="flex justify-between">
                              <span className="font-medium text-sm">
                                {signer.signerName} ({signer.signerEmail})
                              </span>
                              <Badge variant="secondary">
                                {signer.signerStatus}
                              </Badge>
                            </div>
                            {signer.signedAt && (
                              <div className="text-xs text-muted-foreground">
                                Signed at: {signer.signedAt}
                              </div>
                            )}
                          </div>
                        ))}
                      </div>
                    ) : (
                      <div className="text-sm text-muted-foreground">
                        No signers found.
                      </div>
                    )}
                  </div>
                )
              })}
            </ScrollArea>
          )
        ) : (
          <div className="text-sm text-muted-foreground">
            Please select a contract to see its e-sign status.
          </div>
        )}

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Close
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}