import { Badge } from "@/components/ui/badge";
import { formatDateLongEST } from "@/lib/timezoneUtils";
import VotingAndComments from "@/components/shared/VotingAndComments";

interface Props {
  application: any;
  onStatusChange?: () => void;
  viewerIsOwner?: boolean;
}

export default function ArcApplicationDetail({ application, onStatusChange, viewerIsOwner = false }: Props) {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 gap-4">
        <div><p className="text-sm text-muted-foreground">Title</p><p className="font-medium">{application.title}</p></div>
        <div><p className="text-sm text-muted-foreground">Status</p><Badge variant="secondary">{application.status || "submitted"}</Badge></div>
        <div><p className="text-sm text-muted-foreground">Submitted</p><p className="font-medium">{application.submitted_date ? formatDateLongEST(application.submitted_date) : application.created_at ? formatDateLongEST(application.created_at) : "N/A"}</p></div>
      </div>
      {application.description && (
        <div>
          <p className="text-sm text-muted-foreground">Description</p>
          <p className="bg-muted p-3 rounded-md mt-1 border whitespace-pre-wrap">{application.description}</p>
        </div>
      )}
      {application.decision_notes && (
        <div>
          <p className="text-sm text-muted-foreground">Decision Notes</p>
          <p className="bg-muted p-3 rounded-md mt-1 border whitespace-pre-wrap">{application.decision_notes}</p>
        </div>
      )}
      <VotingAndComments
        entityType="arc_application"
        entityId={application.id}
        showVoting={!viewerIsOwner}
        restrictToOwnerVisible={viewerIsOwner}
        showOwnerVisibilityToggle={!viewerIsOwner}
      />
    </div>
  );
}
