'use client';

import { useState } from 'react';
import TableLayout from '../../../table-layout';
import PrimaryButton from '@/components/common/primary-button';
import { Input, Textarea } from 'rizzui';
import { routes } from '@/config/routes';
import { PiUpload, PiX } from 'react-icons/pi';
import * as Yup from 'yup';
import Image from 'next/image';

const pageHeader = {
  title: 'General Settings',
  breadcrumb: [
    { href: routes.dashboard, name: 'Home' },
    { name: 'General Settings' },
  ],
};

const schema = Yup.object().shape({
  title: Yup.string().required('Title is required'),
  website: Yup.string().url('Invalid URL').required('Website is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
  mobile: Yup.string()
    .matches(/^[0-9]{10}$/, 'Mobile must be 10 digits')
    .required('Mobile is required'),
  altMobile: Yup.string().matches(/^[0-9]{10}$/, 'Must be 10 digits'),
  phone: Yup.string().matches(/^[0-9]{10}$/, 'Must be 10 digits'),
  dateFormat: Yup.string().required('Date format is required'),
  registeredName: Yup.string().required('Registered name is required'),
  gst: Yup.string().required('GST is required'),
  country: Yup.string().required('Country is required'),
  state: Yup.string().required('State is required'),
  city: Yup.string().required('City is required'),
  address: Yup.string().required('Address is required'),
  pincode: Yup.string()
    .matches(/^[0-9]{6}$/, 'Pincode must be 6 digits')
    .required('Pincode is required'),
  bankName: Yup.string().required('Bank name is required'),
  branchName: Yup.string().required('Branch name is required'),
  accountHolderName: Yup.string().required('Account holder name is required'),
  accountNumber: Yup.string()
    .matches(/^[0-9]{9,18}$/, 'Invalid account number')
    .required('Account number is required'),
  ifscCode: Yup.string()
    .matches(/^[A-Z]{4}0[A-Z0-9]{6}$/, 'Invalid IFSC code')
    .required('IFSC code is required'),
});



export default function Page() {
  // DEFAULT IMAGES
  const defaultLogo = '/logo.png';
  const defaultFav = '/logo_small.png';
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [form, setForm] = useState({
    title: 'Siddhanam Real Estate Private Limited',
    website: 'https://siddhanamrealtypvtltd.net/',
    email: 'tps.srpl@gmail.com',
    mobile: '9876543210',
    altMobile: '9876543210',
    phone: '9876543210',
    dateFormat: 'dd-mm-yyyy',
    registeredName: 'Siddhanam Realty Private Limited',
    gst: '33AAJCG1234F1ZV',
    country: 'India',
    state: 'Gujarat',
    city: 'Bharuch',
    address: 'Office No. 2, Third Floor',
    pincode: '392001',

    bankName: 'State Union Bank',
    branchName: '',
    accountHolderName: '',
    accountNumber: '',
    ifscCode: '',

    twitter: '',
    facebook: '',
    linkedin: '',
  });

  const [logo, setLogo] = useState<string>(defaultLogo);
  const [fav, setFav] = useState<string>(defaultFav);

  const handleChange = (key: string, value: any) => {
    setForm((prev) => ({ ...prev, [key]: value }));
  };

  const handleSubmit = async () => {
    const isValid = await validateForm();

    if (!isValid) return;

    console.log('Form Data:', form);
    // API call here
  };

  // IMAGE UPLOAD HANDLER
  const handleImageUpload = (
    e: React.ChangeEvent<HTMLInputElement>,
    type: 'logo' | 'fav'
  ) => {
    const file = e.target.files?.[0];
    if (!file) return;

    const url = URL.createObjectURL(file);

    if (type === 'logo') setLogo(url);
    else setFav(url);
  };

  // RESET IMAGE
  const handleRemove = (type: 'logo' | 'fav') => {
    if (type === 'logo') setLogo(defaultLogo);
    else setFav(defaultFav);
  };

  const validateForm = async () => {
    try {
      await schema.validate(form, { abortEarly: false });
      setErrors({});
      return true;
    } catch (err: any) {
      const formattedErrors: Record<string, string> = {};

      err.inner.forEach((e: any) => {
        if (e.path) formattedErrors[e.path] = e.message;
      });

      setErrors(formattedErrors);
      return false;
    }
  };

  return (
    <TableLayout
      title={pageHeader.title}
      breadcrumb={pageHeader.breadcrumb}
      data={[]}
      fileName="general_settings"
      header="Settings"
      showExport={false}
      showImport={false}
    >
      <div className="p-6 space-y-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <Input label="Title" value={form.title} onChange={(e) => handleChange('title', e.target.value)} error={errors.title}/>
          <Input label="Website" value={form.website} onChange={(e) => handleChange('website', e.target.value)} error={errors.website}/>
          <Input label="Email ID" value={form.email} onChange={(e) => handleChange('email', e.target.value)} error={errors.email}/>
          <Input label="Mobile No" value={form.mobile} onChange={(e) => handleChange('mobile', e.target.value)} error={errors.mobile}/>
          <Input label="Alt Mobile" value={form.altMobile} onChange={(e) => handleChange('altMobile', e.target.value)} error={errors.altMobile} />
          <Input label="Phone No" value={form.phone} onChange={(e) => handleChange('phone', e.target.value)} error={errors.phone}/>
          <Input label="Date Format" value={form.dateFormat} onChange={(e) => handleChange('dateFormat', e.target.value)} error={errors.dateFormat}/>
          <Input label="Registered Name" value={form.registeredName} onChange={(e) => handleChange('registeredName', e.target.value)} error={errors.registeredName}/>
          <Input label="GST No" value={form.gst} onChange={(e) => handleChange('gst', e.target.value)} error={errors.gst}/>
          <Input label="Country" value={form.country} onChange={(e) => handleChange('country', e.target.value)} error={errors.country}/>
          <Input label="State" value={form.state} onChange={(e) => handleChange('state', e.target.value)} error={errors.state}/>
          <Input label="City" value={form.city} onChange={(e) => handleChange('city', e.target.value)} error={errors.city}/>
          <Textarea
            label="Address"
            rows={1}
            value={form.address}
            onChange={(e) => handleChange('address', e.target.value)}
            error={errors.address}
          />
          <Input label="Pincode" value={form.pincode} onChange={(e) => handleChange('pincode', e.target.value)} error={errors.pincode} />
        </div>
        <div className="w-full py-0">
          <h3 className="text-lg font-semibold mb-4">Bank Details</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Input
              label="Bank Name"
              value={form.bankName}
              onChange={(e) => handleChange('bankName', e.target.value)}
              error={errors.bankName}
            />
            <Input
              label="Branch Name"
              value={form.branchName}
              onChange={(e) => handleChange('branchName', e.target.value)}
              error={errors.branchName}
            />
            <Input
              label="Account Holder Name"
              value={form.accountHolderName}
              onChange={(e) => handleChange('accountHolderName', e.target.value)}
              error={errors.accountHolderName}
            />
            <Input
              label="Account Number"
              value={form.accountNumber}
              onChange={(e) => handleChange('accountNumber', e.target.value)}
              error={errors.accountNumber}
            />
            <Input
              label="IFSC Code"
              value={form.ifscCode}
              onChange={(e) => handleChange('ifscCode', e.target.value.toUpperCase())}
              error={errors.ifscCode}
            />
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="">
            <span className="font-medium mb-3">Logo</span>
            <Image
              src={logo}
              alt="Logo"
              width={40}
              height={40}
              className="rounded-full border"
            />
            <div className="flex gap-2 mt-3">
              <label className="px-3 py-1 bg-blue-600 text-white rounded cursor-pointer">
                <PiUpload/>
                <input
                  type="file"
                  className="hidden"
                  accept="image/*"
                  onChange={(e) => handleImageUpload(e, 'logo')}
                />
              </label>
              <button
                onClick={() => handleRemove('logo')}
                className="px-3 py-1 bg-red-100 text-red-600 rounded"
              >
                <PiX/>
              </button>
            </div>
            <span className="text-xs text-gray-500 mt-2">
              Allowed JPG, PNG. Max size 800KB
            </span>
          </div>
          <div className="">
            <span className="font-medium mb-3">Fav Icon</span>
            <Image
              src={fav}
              alt="Logo"
              width={40}
              height={40}
              className="rounded-full border"
            />
            <div className="flex gap-2 mt-3">
              <label className="px-3 py-1 bg-blue-600 text-white rounded cursor-pointer">
                <PiUpload/>
                <input
                  type="file"
                  className="hidden"
                  accept="image/*"
                  onChange={(e) => handleImageUpload(e, 'fav')}
                />
              </label>
              <button
                onClick={() => handleRemove('fav')}
                className="px-3 py-1 bg-red-100 text-red-600 rounded"
              >
                <PiX/>
              </button>
            </div>
            <span className="text-xs text-gray-500 mt-2">
              Allowed JPG, PNG. Max size 800KB
            </span>
          </div>
        </div>
        <div className="fixed bottom-6 right-6">
          <PrimaryButton onClick={handleSubmit}>
            Update
          </PrimaryButton>
        </div>

      </div>
    </TableLayout>
  );
}