import React, { useEffect, useState } from "react";
import { Badge } from "@/shared/common/ui/badge";
import { Card, CardContent } from "@/shared/common/ui/card";
import { Separator } from "@/shared/common/ui/separator";
import { RecordVerificationDto } from "../dto/userRecords/recordVerificationDto";
import { verifyRecordById } from "../services/api/userRecordService";

interface RecordVerificationProps {
  recordId: string;
}

const Section = ({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) => (
  <div className="mb-6">
    <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">
      {title}
    </h3>
    <div className="flex flex-wrap gap-2">{children}</div>
  </div>
);

const RecordVerification: React.FC<RecordVerificationProps> = ({
  recordId,
}) => {
  const [record, setRecord] = useState<RecordVerificationDto>();

  useEffect(() => {
    const load = async () => {
      const response = await verifyRecordById(recordId);
      setRecord(response);

      // 🧠 Receivers
    };

    void load();
  }, [recordId]);

  if (!record) return null;

  return (
    <div className="max-w-4xl mx-auto px-6 py-10">
      <Card className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 shadow-lg rounded-2xl">
        <CardContent className="p-6">
          <h2 className="text-2xl font-bold text-primary mb-6">
            📄 Record Verification
          </h2>

          <Section title="Reference Number">
            <Badge variant="outline" className="text-base px-3 py-1">
              {record.referenceNumber || "N/A"}
            </Badge>
          </Section>

          <Section title="Subject">
            <p className="text-gray-700 dark:text-gray-300 font-medium text-base">
              {record?.content?.[0]?.subject}
            </p>
          </Section>

          <Section title="Sent Date">
            <Badge className="bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200 px-3 py-1">
              {record.dispatchedDate
                ? new Date(record.dispatchedDate).toLocaleDateString()
                : "Not Sent"}
            </Badge>
          </Section>

          {/* <Section title="Initiator">
            <Badge className="bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-3 py-1">
              {record.initiator?.employee?.name?.am ||
                record.initiator?.employee?.name?.en}
            </Badge>
          </Section> */}
        </CardContent>
      </Card>
    </div>
  );
};

export default RecordVerification;
