"use client";
import SectionTitle from "@/components/SectionTitle";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Form, FormikProps, ErrorMessage } from "formik";
import { Headset, Instagram, Linkedin, Mail, Map, MapPin } from "lucide-react";
import React, { useRef, useState } from "react";
import {
  UpdateDefaultFormProps,
  UpdateDefaultFormValues,
} from "./UpdateDefaultsForm";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import RichTextEditor, { RichTextEditorHandle } from "@/components/TextEditor";
import Loader from "@/components/Loader";

export default function InnerUpdateDefaultForm(
  props: FormikProps<UpdateDefaultFormValues> & UpdateDefaultFormProps,
) {
  const { values, setFieldValue } = props;
  const aboutUsTextRef = useRef<RichTextEditorHandle>(null);
  const [aboutUsTextRefs] = useState(
    props.languages.map(() => JSON.parse(JSON.stringify(aboutUsTextRef))),
  );

  const patiensRightsRef = useRef<RichTextEditorHandle>(null);
  const [patientsRightsRefs] = useState(
    props.languages.map(() => JSON.parse(JSON.stringify(patiensRightsRef))),
  );
  const handleSave = () => {
    aboutUsTextRefs.forEach((r, i) => {
      setFieldValue(`translations.${i}.aboutUsText`, r.current.getContent());
    });
    patientsRightsRefs.forEach((r, i) => {
      setFieldValue(`translations.${i}.patientsRights`, r.current.getContent());
    });
    props.handleSubmit();
  };
  return (
    <Form className="space-y-6">
      {/* ---------- Static fields ---------- */}
      <div className="border p-4 rounded-md space-y-4 bg-white">
        <SectionTitle label="اطلاعات پایه" />

        <Field>
          <FieldLabel>
            <Mail /> ایمیل
          </FieldLabel>
          <Input
            value={values.email}
            onChange={(e) => setFieldValue("email", e.target.value)}
          />
          <ErrorMessage
            name="email"
            component="div"
            className="text-xs text-red-500"
          />
        </Field>

        <Field>
          <FieldLabel>
            <Instagram /> اینستاگرام
          </FieldLabel>
          <Input
            value={values.instagramLink}
            onChange={(e) => setFieldValue("instagramLink", e.target.value)}
          />
        </Field>

        <Field>
          <FieldLabel>
            <Linkedin /> لینکدین
          </FieldLabel>
          <Input
            value={values.linkedinLink}
            onChange={(e) => setFieldValue("linkedinLink", e.target.value)}
          />
        </Field>

        <Field>
          <FieldLabel>
            <Map /> گوگل مپ
          </FieldLabel>
          <Input
            value={values.mapAddress}
            onChange={(e) => setFieldValue("mapAddress", e.target.value)}
          />
        </Field>

        <Field>
          <FieldLabel>
            <Headset /> تلفن
          </FieldLabel>
          <Input
            value={values.hospitalPhone}
            onChange={(e) => setFieldValue("hospitalPhone", e.target.value)}
          />
        </Field>
      </div>

      {/* ---------- Translations ---------- */}
      {values.translations?.map((tr, index) => {
        const lang = props.languages.find((l) => l.id === tr.languageId);

        return (
          <div
            key={tr.languageId}
            className="border p-4 rounded-md space-y-4 bg-white"
          >
            <h4 className="font-semibold text-lg">
              محتوای {lang?.title} ({lang?.slug})
            </h4>

            {/* Address */}
            <Field>
              <FieldLabel>
                <MapPin /> آدرس
              </FieldLabel>
              <Input
                value={tr.address}
                onChange={(e) =>
                  setFieldValue(`translations.${index}.address`, e.target.value)
                }
              />
              <ErrorMessage
                name={`translations.${index}.address`}
                component="div"
                className="text-xs text-red-500"
              />
            </Field>

            {/* Under logo text */}
            <Field>
              <FieldLabel>متن زیر لوگو</FieldLabel>
              <Textarea
                value={tr.underLogoText}
                onChange={(e) =>
                  setFieldValue(
                    `translations.${index}.underLogoText`,
                    e.target.value,
                  )
                }
              />
              <ErrorMessage
                name={`translations.${index}.underLogoText`}
                component="div"
                className="text-xs text-red-500"
              />
            </Field>
            <Field>
              <FieldLabel htmlFor={`translations.${index}.aboutUsText`}>
                متن معرفی دپارتمان در صفحه ی درباره ما
              </FieldLabel>
              <RichTextEditor
                value={tr.aboutUsText ?? ""}
                ref={aboutUsTextRefs[index]}
              />
              <ErrorMessage
                className="text-xs text-red-500"
                component={"div"}
                name={`translations.${index}.aboutUsText`}
              />
            </Field>
            <Field>
              <FieldLabel htmlFor={`translations.${index}.patientsRights`}>
                منشور حقوق بیماران
              </FieldLabel>
              <RichTextEditor
                value={tr.patientsRights ?? ""}
                ref={patientsRightsRefs[index]}
              />
              <ErrorMessage
                className="text-xs text-red-500"
                component={"div"}
                name={`translations.${index}.patientsRights`}
              />
            </Field>
          </div>
        );
      })}

      <Button type="button" onClick={handleSave} className="w-full">
        {props.updatePending ? <Loader size="4" /> : "        ثبت اطلاعات"}
      </Button>
    </Form>
  );
}
