import { zodResolver } from "@hookform/resolvers/zod";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { ExpenseSchema } from "./ExpenseSchema";
import { formatFileSize } from "../../utils/appUtils";

const CreateExpense = () => {
  const {
    register,
    handleSubmit,
    watch,
    setValue,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(ExpenseSchema),
    defaultValues: {
      projectId: "",
      expensesTypeId: "",
      paymentModeId: "",
      paidById: "",
      transactionDate: "",
      transactionId: "",
      description: "",
      location: "",
      supplerName: "",
      amount: "",
      noOfPersons: "",
      statusId: "",
      billAttachments: [],
    },
  });

  const files = watch("billAttachments");
const onFileChange = async (e) => {
  const newFiles = Array.from(e.target.files);
  if (newFiles.length === 0) return;

  const existingFiles = watch("billAttachments") || [];

  const parsedFiles = await Promise.all(
    newFiles.map(async (file) => {
      const base64Data = await toBase64(file);
      return {
        fileName: file.name,
        base64Data,
        contentType: file.type,
        fileSize: file.size,
        description: "",
      };
    })
  );

  // Avoid duplicates based on file name + size
  const combinedFiles = [
    ...existingFiles,
    ...parsedFiles.filter(
      (newFile) =>
        !existingFiles.some(
          (f) => f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
        )
    ),
  ];

  setValue("billAttachments", combinedFiles, { shouldDirty: true, shouldValidate: true });
};


  const toBase64 = (file) =>
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result.split(",")[1]); // base64 only, no prefix
      reader.onerror = (error) => reject(error);
    });
const removeFile = (index) => {
  const newFiles = files.filter((_, i) => i !== index);
  setValue("billAttachments", newFiles, { shouldValidate: true });
};
  const onSubmit = (data) => {
    console.log("Form Data:", data);
  };
  return (
    <div class="container p-3">
      <p class="fw-bold m-0">Create New Expense</p>
      <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
        <div class="row my-2">
          <div class="col-md-6">
            <label for="projectId" className="form-label ">
              Select Project
            </label>
            <select class="form-select form-select-sm" id="projectId" required>
              <option value="">-- Select Project --</option>
              <option value="project1">Project A</option>
              <option value="project2">Project B</option>
            </select>
          </div>

          <div class="col-md-6">
            <label for="expensesTypeId" className="form-label ">
              Expense Type
            </label>
            <select
              class="form-select form-select-sm"
              id="expensesTypeId"
              required
            >
              <option value="">-- Select Type --</option>
              <option value="type1">Travel</option>
              <option value="type2">Meal</option>
            </select>
          </div>
        </div>

        <div class="row my-2">
          <div class="col-md-6">
            <label for="paymentModeId" className="form-label ">
              Payment Mode
            </label>
            <select
              class="form-select form-select-sm"
              id="paymentModeId"
              required
            >
              <option value="">-- Select Payment Mode --</option>
              <option value="cash">Cash</option>
              <option value="card">Card</option>
            </select>
          </div>

          <div class="col-md-6">
            <label for="paidById" className="form-label ">
              Paid By
            </label>
            <input
              type="text"
              id="paidById"
              class="form-control form-control-sm"
              required
            />
          </div>
        </div>

        <div class="row my-2">
          <div class="col-md-6">
            <label for="transactionDate" className="form-label ">
              Transaction Date
            </label>
            <input
              type="date"
              id="transactionDate"
              class="form-control form-control-sm"
              placeholder="DD-MM-YYYY"
              required
            />
          </div>

          <div class="col-md-6">
            <label for="amount" className="form-label ">
              Amount
            </label>
            <input
              type="number"
              id="amount"
              class="form-control form-control-sm"
              min="1"
              required
            />
          </div>
        </div>

        <div class="row my-2">
          <div class="col-md-6">
            <label for="noOfPersons" className="form-label ">
              No. of Persons
            </label>
            <input
              type="number"
              id="noOfPersons"
              class="form-control form-control-sm"
              min="1"
              required
            />
          </div>

          <div class="col-md-6">
            <label for="statusId" className="form-label ">
              Status
            </label>
            <select class="form-select form-select-sm" id="statusId" required>
              <option value="">-- Select Status --</option>
              <option value="approved">Approved</option>
              <option value="pending">Pending</option>
            </select>
          </div>
        </div>

        <div class="row my-2">
          <div class="col-md-6">
            <label for="location" className="form-label ">
              Location
            </label>
            <input
              type="text"
              id="location"
              class="form-control form-control-sm"
              required
            />
          </div>

          <div class="col-md-6">
            <label for="supplerName" className="form-label ">
              Supplier Name
            </label>
            <input
              type="text"
              id="supplerName"
              class="form-control form-control-sm"
              required
            />
          </div>
        </div>

        <div class="row my-2">
          <div class="col-md-12" className="form-label ">
            <label for="description">Description</label>
            <textarea
              id="description"
              class="form-control form-control-sm"
              rows="2"
              required
            ></textarea>
          </div>
        </div>

        <div className="row my-2">
          <div className="col-md-12">
            <label className="form-label ">
              Upload Bill{" "}
              <small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
            </label>

            <div
              className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
              style={{ cursor: "pointer" }}
              onClick={() => document.getElementById("billAttachments").click()}
            >
              <i className="bx bx-cloud-upload d-block"></i>
              <span className="text-muted d-block">
                Click to select or click here to browse
              </span>

              <input
                type="file"
                id="billAttachments"
                accept=".pdf,.jpg,.jpeg,.png"
                multiple
                style={{ display: "none" }}
                {...register("billAttachments")}
                  onChange={(e) => {
    onFileChange(e);
    e.target.value = ""; // ← this line resets the file input
  }}
              />
            </div>

            {files.length > 0 && (
              <div className="d-block">
                {files.map((file, idx) => (
                  <a
                    key={idx}
                    class="d-flex justify-content-between text-start p-1"
                  >
                    <div >
                        <span className="mb-0 text-secondary small d-block">{file.fileName}</span>
                        <span className="text-body-secondary small d-block">
                          {formatFileSize(file.fileSize
)}
                        </span>
                    </div>
                    <i className='bx bx-trash bx-sm cursor-pointer text-danger' onClick={()=>removeFile(idx)}></i>
                  </a>
                ))}
              </div>
            )}
{Array.isArray(errors.billAttachments) &&
  errors.billAttachments.map((fileError, index) => (
    <div key={index} className="danger-text small mt-1">
      {fileError?.fileSize?.message || fileError?.contentType?.message}
    </div>
  ))}
          </div>
        </div>

        <div className="d-flex justify-content-center gap-2">
          {" "}
          <button type="submit" class="btn btn-primary btn-sm mt-3">
            Submit
          </button>
          <button type="reset" class="btn btn-secondary btn-sm mt-3">
            Cancel
          </button>
        </div>
      </form>
    </div>
  );
};

export default CreateExpense;