"use client"

import { useEffect, useState } from "react";
import { Textarea } from "../ui/textarea";
import { toast } from "../ui/use-toast";
import { SafetyNotes, fetchSafetyNote, updateSafetyNote } from "@/lib/db";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../ui/card";
import { useSession } from "next-auth/react";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);

export default function SafetyNotesCard({ objectId, type, title }: {
  objectId: string,
  type: SafetyNotes["_id"]["type"],
  title?: string
}) {
  const session = useSession();
  const [draft, setDraft] = useState("");
  const [value, setValue] = useState<SafetyNotes | null>(null);
  const [ready, setReady] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchSafetyNote(objectId, type)
      .then((note) => {
        setDraft(note?.text || "");
        setValue(note);
        setReady(true);
      })
      .catch((e) => {
        setError(String(e));
      });
  }, [objectId, type]);

  return (
    <Card>
      <CardHeader>
        <CardTitle>{title ?? type.charAt(0).toUpperCase() + type.slice(1) + " notes"}</CardTitle>
      </CardHeader>
      <CardContent>
        <Textarea
          placeholder={
            error
              ? error
              : ready
                ? "Enter notes here... (save on unfocus)"
                : "Fetching notes..."
          }
          className="!min-h-[80px] max-h-[50vh]"
          disabled={!ready || error != null}
          value={ready ? draft : undefined} // not defaulting to undefined causes next to complain
          onChange={(e) => setDraft(e.currentTarget.value)}
          onBlur={async () => {
            if (draft === value?.text ?? "") return;
          
            try {
              await updateSafetyNote(objectId, type, draft);
              setValue({
                _id: { id: objectId, type: type },
                edited_at: new Date(Date.now()),
                edited_by: session.data?.user?.email || "",
                text: draft,
              });
              toast({
                title: "Updated notes",
              });
            } catch (err) {
              toast({
                title: "Failed to update notes",
                description: String(err),
                variant: "destructive",
              });
            }
          }}
        />
      </CardContent>
      <CardFooter className="-my-2">
      <CardDescription>
      {
        value
          ? <>Last edited {dayjs(value.edited_at).fromNow()} by {value.edited_by}</>
          : <>No object note set</>
      }
      </CardDescription>
      </CardFooter>
    </Card>
  )
}