"use client";

import React, { useEffect, useState, useCallback } from "react";
import { Container, Row, Col, Card, Form, FloatingLabel, ListGroup } from "react-bootstrap";
import { useToast } from "@/context/ToastContext";
import { unixToDateTime } from "@/lib/function";
import LoadingCMS from "@/components/LoadingCMS";
import Link from "next/link";

type CareerData = {
  sc_id: number;
  sc_fname: string;
  sc_lname: string;
  sc_email: string;
  sc_mobile: string;
  sc_qualification: string;
  sc_experience: string;
  sc_message: string;
  sc_date: number;
  sc_file: string;
};

export default function Careers() {
  const { showToast } = useToast();
  const [careers, setCareers] = useState<CareerData[]>([]);
  const [isLoading, setLoading] = useState(true);
  const [searchCareer, setCareerSearch] = useState("");

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

  useEffect(() => {
    fetchCareers();
  }, [fetchCareers]);

  const filteredCareers = careers.filter((contact) => {
    const matchesSearch =
      contact.sc_fname?.toLowerCase().includes(searchCareer.toLowerCase()) || 
      contact.sc_lname?.toLowerCase().includes(searchCareer.toLowerCase()) || 
      contact.sc_qualification?.toLowerCase().includes(searchCareer.toLowerCase()) || 
      contact.sc_experience?.toLowerCase().includes(searchCareer.toLowerCase()) || 
      contact.sc_message?.toLowerCase().includes(searchCareer.toLowerCase()) || 
      contact.sc_email?.toLowerCase().includes(searchCareer.toLowerCase()) ||
      contact.sc_mobile?.toLowerCase().includes(searchCareer.toLowerCase());
    return matchesSearch;
  });

  if (isLoading) return <LoadingCMS />;

  return (
    <Container fluid className="py-3">
      <Row xs={1} md={3} className="g-3">
        <Col md={3} className="align-self-center">
          <h1 className="fs-3">Careers <small className="text-body-secondary">({filteredCareers.length})</small></h1>
        </Col>
        <Col md={6}>
          <FloatingLabel label="Search by keyword..">
            <Form.Control value={searchCareer} onChange={(e) => setCareerSearch(e.target.value)} />
          </FloatingLabel>
        </Col>
        <Col md={3} className="align-self-center">
          <Link href="/cms/careers/vacancy" className="btn btn-lg btn-primary rounded-pill w-100">Manage Vacancy</Link>
        </Col>
        {filteredCareers.map((contact, index) => (
        <Col key={index}>
          <Card className="h-100 rounded-4 overflow-hidden">
            <Card.Body>
              <Card.Title>{contact.sc_fname} {contact.sc_lname}</Card.Title>
              <Card.Text>{contact.sc_message}</Card.Text>
            </Card.Body>
            <ListGroup variant="flush">
              <ListGroup.Item className="d-flex align-items-center justify-content-between">
                Qualification <span className="ms-3">{contact.sc_qualification}</span>
              </ListGroup.Item>
              <ListGroup.Item className="d-flex align-items-center justify-content-between">
                Experiance <span className="ms-3">{contact.sc_experience}</span>
              </ListGroup.Item>
              <ListGroup.Item className="d-flex align-items-center justify-content-between">
                Email <span className="ms-3">{contact.sc_email}</span>
              </ListGroup.Item>
              <ListGroup.Item className="d-flex align-items-center justify-content-between">
                Mobile <span className="ms-3">{contact.sc_mobile}</span>
              </ListGroup.Item>
              <ListGroup.Item className="d-flex align-items-center justify-content-between">
                Date <span className="ms-3">{unixToDateTime(contact.sc_date,'date')}</span>
              </ListGroup.Item>
            </ListGroup>
            <Card.Footer className="d-flex align-items-center justify-content-between">                    
              <Link href={contact.sc_file} className="btn btn-outline-danger rounded-pill" target="_blank" rel="noopener noreferrer">
                See Resume
              </Link>
            </Card.Footer>
          </Card>
        </Col>
        ))}
      </Row>
    </Container>
  );
}