"use client";

import React, { useEffect, useState, useCallback } from "react";
import { Container, Row, Col, Card, Form, FloatingLabel, Badge, Button, Stack, Spinner, ListGroup } from "react-bootstrap";
import { useForm, Controller } from "react-hook-form";
import { useToast } from "@/context/ToastContext";
import { excerptFromHtml,unixToDateTime,findValue } from "@/lib/function";
import LoadingCMS from "@/components/LoadingCMS";
import HtmlEditor from "@/components/HtmlEditor";
import { useRecaptcha } from "@/hooks/useRecaptcha";

type VacancyData = {
  sv_id: number;
  sv_svc_id: number;
  sv_svt_id: number;
  sv_sl_id: number;
  sv_name: string;
  sv_details: string;
  sv_status: number;
  sv_date: number;
};
type CategoryData = {
    svc_id: number;
    svc_name: string;
};
type JobTypeData = {
    svt_id: number;
    svt_name: string;
};
type LocationData = {
    sl_id: number;
    sl_city: string;
};

export default function Vacancies() {
  const { showToast } = useToast();
  const { getToken } = useRecaptcha();

  const [vacancies, setVacancies] = useState<VacancyData[]>([]);
  const [categories, setCategories] = useState<CategoryData[]>([]);
  const [jobTypes, setJobTypes] = useState<JobTypeData[]>([]);
  const [locations, setLocations] = useState<LocationData[]>([]);
  const [isLoading, setLoading] = useState(true);
  const [searchVacancy, setVacancySearch] = useState("");
  const [selectedVacancy, setSelectedVacancy] = useState<VacancyData | null>(null);

  const { register, handleSubmit, reset, control, formState: { errors, isSubmitting } } = useForm<VacancyData>({    
    defaultValues: {
        sv_id: 0,
      sv_svc_id: 0,
      sv_svt_id: 0,
      sv_sl_id: 0,
      sv_name: "",
      sv_details: "",
      sv_status: 0,
    }
  });

  const fetchCategory = useCallback(async () => {
    try {
      const res = await fetch("/api/career/vacancy/category", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
      });
      const json = await res.json();
      if (res.ok && Array.isArray(json.categories)) {
        setCategories(json.categories);
      }
    } catch {
      showToast("Category List: Getting failed..", "danger");
    } finally {
      setLoading(false);
    }
  }, [showToast]);

  const fetchJobType = useCallback(async () => {
    try {
      const res = await fetch("/api/career/vacancy/job-type", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
      });
      const json = await res.json();
      if (res.ok && Array.isArray(json.jobTypes)) {
        setJobTypes(json.jobTypes);
      }
    } catch {
      showToast("JobTypes List: Getting failed..", "danger");
    } finally {
      setLoading(false);
    }
  }, [showToast]);

  const fetchLocations = useCallback(async () => {
    try {
      const res = await fetch("/api/locations", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
      });
      const json = await res.json();
      if (res.ok && Array.isArray(json.locations)) {
        setLocations(json.locations);
      }
    } catch {
      showToast("Locations List: Getting failed..", "danger");
    } finally {
      setLoading(false);
    }
  }, [showToast]);

  const fetchVacancy = useCallback(async () => {
    try {
      const res = await fetch("/api/career/vacancy/list", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
      });
      const json = await res.json();
      if (res.ok && Array.isArray(json.vacanciesData)) {
        setVacancies(json.vacanciesData);
      }
    } catch {
      showToast("Vacancy List: Getting failed..", "danger");
    } finally {
      setLoading(false);
    }
  }, [showToast]);
  

  useEffect(() => {    
    fetchCategory();
    fetchJobType();
    fetchLocations();
    fetchVacancy();
  }, [fetchCategory,fetchJobType,fetchLocations,fetchVacancy]);

  useEffect(() => {
    if (selectedVacancy) {
        reset({
        sv_id: selectedVacancy.sv_id,
        sv_svc_id: selectedVacancy.sv_svc_id,
        sv_svt_id: selectedVacancy.sv_svt_id,
        sv_sl_id: selectedVacancy.sv_sl_id,
        sv_name: selectedVacancy.sv_name,
        sv_details: selectedVacancy.sv_details,
        sv_status: selectedVacancy.sv_status,
        });
    }
    }, [selectedVacancy, reset]);

  const filteredVacancies = vacancies.filter((vacancy) => {
    const matchesSearch =
      vacancy.sv_name?.toLowerCase().includes(searchVacancy.toLowerCase());
    return matchesSearch;
  });

  const onSubmit = async (data: VacancyData) => {
    try {
      const recaptchaToken = await getToken("events_save_form");
      const res = await fetch("/api/career/vacancy/save", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({...data, recaptchaToken}),
      });
      const result = await res.json();
      if (res.ok) {
        showToast(result.message, "success");
        reset({
            sv_id: 0,
          sv_svc_id: 0,
          sv_svt_id: 0,
          sv_sl_id: 0,
          sv_name: "",
          sv_details: "",
          sv_status: 0,
        });
        setSelectedVacancy(null);
        fetchVacancy();
      }
      else {
        showToast(result.error, "danger");
      }
    } catch {
      showToast("Vacancy creation failed.", "danger");
    }
  };

  if (isLoading) return <LoadingCMS />;

  return (
    <Container fluid className="py-3">
      <Row>        
        <Col md={8}>
          <Row xs={1} md={2} className="g-3">
            <Col md={4} className="align-self-center">
              <h1 className="fs-3">Vacancies <small className="text-body-secondary">({filteredVacancies.length})</small></h1>
            </Col>
            <Col md={8}>
              <FloatingLabel label="Search by name">
                <Form.Control value={searchVacancy} onChange={(e) => setVacancySearch(e.target.value)} />
              </FloatingLabel>
            </Col>
            {filteredVacancies.map((vacancy, index) => (
              <Col key={index}>
                <Card className={`h-100 rounded-4 overflow-hidden ${selectedVacancy && selectedVacancy.sv_id === vacancy.sv_id ? 'text-bg-success' : null}`}>
                  <Card.Body>
                    <Card.Title className="d-flex align-items-start">
                        <span className="flex-fill me-3">{vacancy.sv_name}</span>
                        {vacancy.sv_status === 1 ? <Badge bg="primary">Open</Badge> : <Badge bg="secondary">Close</Badge>}
                    </Card.Title>
                    <Card.Text>{excerptFromHtml(vacancy.sv_details, 50)}</Card.Text>
                  </Card.Body>
                  <ListGroup variant="flush">
                    <ListGroup.Item className="d-flex align-items-center justify-content-between">
                      Category <span className="ms-3">{findValue(categories,"svc_id",vacancy.sv_svc_id,"svc_name","N/A")}</span>
                    </ListGroup.Item>
                    <ListGroup.Item className="d-flex align-items-center justify-content-between">
                      Job Type <span className="ms-3">{findValue(jobTypes,"svt_id",vacancy.sv_svt_id,"svt_name","N/A")}</span>
                    </ListGroup.Item>
                    <ListGroup.Item className="d-flex align-items-center justify-content-between">
                      Location <span className="ms-3">{findValue(locations,"sl_id",vacancy.sv_sl_id,"sl_city","N/A")}</span>
                    </ListGroup.Item>
                    <ListGroup.Item className="d-flex align-items-center justify-content-between">
                      Date <span className="ms-3">{unixToDateTime(vacancy.sv_date,'date')}</span>
                    </ListGroup.Item>
                  </ListGroup>
                  <Card.Footer className="d-flex align-items-center justify-content-between">                    
                    <Button variant="outline-danger" className="w-100 rounded-pill" onClick={() => setSelectedVacancy(vacancy)}>
                        Edit
                    </Button>
                  </Card.Footer>
                </Card>
              </Col>
            ))}
          </Row>
        </Col>
        <Col md={4} className="position-sticky vh-100 overflow-y-auto" style={{ top: "1rem" }}>
          <Card className="rounded-4 bg-light">
            <Card.Body>
              <h2 className="fs-3 mb-4">Create New Vacancy</h2>
              <Form noValidate onSubmit={handleSubmit(onSubmit)}>
                <Row className="g-3">
                    <Col md={12}>
                        <FloatingLabel label="Category">
                            <Form.Select {...register("sv_svc_id", { required: "Category is required", valueAsNumber: true, validate: (value) => value > 0 || "Please select a valid category" })} isInvalid={!!errors.sv_svc_id}>
                            <option value="0">Please Select</option>
                            {categories.map((category) => (
                                <option key={category.svc_id} value={category.svc_id}>
                                    {category.svc_name}
                                </option>
                            ))}
                            </Form.Select>
                            <Form.Control.Feedback type="invalid">{errors.sv_svc_id?.message}</Form.Control.Feedback>
                        </FloatingLabel>
                    </Col>
                    <Col md={12}>
                        <FloatingLabel label="Type">
                            <Form.Select {...register("sv_svt_id", { required: "Job Type is required", valueAsNumber: true, validate: (value) => value > 0 || "Please select a valid Job Type" })} isInvalid={!!errors.sv_svt_id} >
                            <option value="0">Please Select</option>
                            {jobTypes.map((jobType) => (
                                <option key={jobType.svt_id} value={jobType.svt_id}>
                                    {jobType.svt_name}
                                </option>
                            ))}
                            </Form.Select>
                            <Form.Control.Feedback type="invalid">{errors.sv_svt_id?.message}</Form.Control.Feedback>
                        </FloatingLabel>
                    </Col>
                    <Col md={12}>
                        <FloatingLabel label="Location">
                            <Form.Select {...register("sv_sl_id", { required: "Location is required", valueAsNumber: true, validate: (value) => value > 0 || "Please select a valid Location" })} isInvalid={!!errors.sv_sl_id} >
                            <option value="0">Please Select</option>
                            {locations.map((location) => (
                                <option key={location.sl_id} value={location.sl_id}>
                                    {location.sl_city}
                                </option>
                            ))}
                            </Form.Select>
                            <Form.Control.Feedback type="invalid">{errors.sv_sl_id?.message}</Form.Control.Feedback>
                        </FloatingLabel>
                    </Col>
                  <Col md={12}>
                    <FloatingLabel label="Name">
                      <Form.Control type="text" {...register("sv_name", { required: "Name is required" })} isInvalid={!!errors.sv_name} />
                      <Form.Control.Feedback type="invalid">{errors.sv_name?.message}</Form.Control.Feedback>
                    </FloatingLabel>
                  </Col>
                  <Col md={12}>
                    <Controller name="sv_details" control={control} 
                      rules={{
                        validate: (value) => {
                          const cleaned = (value || "").trim();
                          const div = document.createElement("div");
                          div.innerHTML = cleaned;
                          const text = div.textContent?.trim() || "";
                          if (!text) { return "Details is required"; }
                          return true;
                        },
                      }} 
                      render={({ field }) => (
                        <HtmlEditor value={field.value || ""} onChange={field.onChange} />
                      )}
                    />
                    {errors.sv_details && (<div className="invalid-feedback d-block">{errors.sv_details.message}</div>)}                    
                  </Col>
                  <Col md={12}>
                        <Controller name="sv_status" control={control} defaultValue={0} render={({ field }) => (
                            <Form.Check type="switch" id="sv_status" label="Vacancy Status" checked={field.value === 1} onChange={(e) => field.onChange(e.target.checked ? 1 : 0)} />
                        )} />
                  </Col>
                  <Col md={12}>
                    <Stack direction="horizontal" gap={3}>
                        <Button type="submit" variant="danger" className="w-100 rounded-pill" disabled={isSubmitting}>
                        {isSubmitting ? (
                            <Stack gap={2} direction="horizontal">
                            <Spinner animation="grow" size="sm" variant="danger" />
                            <Spinner animation="grow" size="sm" variant="primary" />
                            <Spinner animation="grow" size="sm" variant="success" />
                            <span>{selectedVacancy ? "Updating..." : "Creating..."}</span>
                            </Stack>
                        ) : selectedVacancy ? "Update Vacancy" : "Create Vacancy"}
                        </Button>
                        {selectedVacancy && (
                        <Button variant="outline-secondary" className="w-100 rounded-pill" onClick={() => { reset({
      sv_id: 0,
      sv_svc_id: 0,
      sv_svt_id: 0,
      sv_sl_id: 0,
      sv_name: "",
      sv_details: "",
      sv_status: 0,
    }); setSelectedVacancy(null); }} >
                            Cancel Edit
                        </Button>
                        )}
                    </Stack>
                  </Col>
                </Row>
              </Form>
            </Card.Body>
          </Card>
        </Col>
      </Row>
    </Container>
  );
}