import React, { useEffect, useState } from "react";
import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
} from "@/shared/common/ui/form";
import { Input } from "@/shared/common/ui/input";
import { Button } from "@/shared/common/ui/button";
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "@/shared/common/ui/card";
import { useForm } from "react-hook-form";

type FormValues = {
  refPrefix: string;
  seal: FileList;
};

const FilePreview = ({
  file,
  fallbackUrl,
}: {
  file?: File;
  fallbackUrl?: string;
}) => {
  const [src, setSrc] = useState<string | null>(fallbackUrl ?? null);

  useEffect(() => {
    if (!file) {
      setSrc(fallbackUrl ?? null);
      return;
    }

    const reader = new FileReader();
    reader.onload = () => setSrc(reader.result as string);
    reader.readAsDataURL(file);
  }, [file, fallbackUrl]);

  if (!src) return null;
  return (
    <img
      src={src}
      alt="Preview"
      className="w-full max-h-40 object-contain mt-2 rounded-md border"
    />
  );
};

const RecordOfficerSettings = () => {
  const form = useForm<FormValues>();

  const watchSeal = form.watch("seal")?.[0];
  const defaultSealUrl = "/defaults/seal.png";
  const onSubmit = (data: FormValues) => {};

  return (
    <div className="w-full h-full mx-auto p-6">
      <Card>
        <CardHeader>
          <CardTitle>Configuration</CardTitle>
        </CardHeader>
        <CardContent>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                {/* Reference Prefix */}
                <FormField
                  control={form.control}
                  name="refPrefix"
                  rules={{ required: "Prefix is required" }}
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Reference Number Prefix</FormLabel>
                      <FormControl>
                        <Input placeholder="e.g., REF-" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {/* Seal File */}
                <FormField
                  control={form.control}
                  name="seal"
                  rules={{ required: "Seal image is required" }}
                  render={({ field: { onChange, ref } }) => (
                    <FormItem>
                      <FormLabel>Seal (Image)</FormLabel>
                      <FormControl>
                        <Input
                          type="file"
                          accept="image/*"
                          onChange={(e) => onChange(e.target.files)}
                          ref={ref}
                        />
                      </FormControl>
                      <FilePreview
                        file={watchSeal}
                        fallbackUrl={defaultSealUrl}
                      />

                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              <Button type="submit" className="w-full">
                Submit
              </Button>
            </form>
          </Form>
        </CardContent>
      </Card>
    </div>
  );
};

export default RecordOfficerSettings;
