import React, { useEffect, useState } from "react";
import {
  User,
  Mail,
  Phone,
  Briefcase,
  Save,
  MapPin,
  Lock,
  Building,
  UserCheck,
  ReceiptText,
} from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { Button, Col, Form, Input, Row, Tag, Divider, Spin, Select } from "antd";
import { API_Instance } from "@/api/axios.instance";
import API_Constants from "@/constants/api.constants";
import toast from "react-hot-toast";
import { getAxiosErrorMessage } from "@/utils/index.utils";
import ImageCropper from "@/components/shared/ImageCropper";
import CouponCode from "@/components/shared/CouponCode";
import { indianStateOptions } from "@/types";

const Profile: React.FC = () => {
  const { user, updateUser } = useAuth();
  const [activeTab, setActiveTab] = useState<"details" | "security">("details");
  const [isEditing, setIsEditing] = useState(false);
  const [loading, setLoading] = useState(false);
  const [passwordLoading, setPasswordLoading] = useState(false);

  const [form] = Form.useForm();
  const [passwordForm] = Form.useForm();

  const isInstitution = user?.role === "INSTITUTION";
  const isAdmin = user?.role === "ADMIN";

  const userName = isInstitution
    ? user?.institutionName
    : user?.firstName + " " + (user?.lastName || "");

  const handleProfileUpdate = async (values: any) => {
    setLoading(true);
    try {
      const res = await API_Instance.put(API_Constants.users, values);
      updateUser(res.data.data);
      toast.success("Profile updated successfully!");
      setIsEditing(false);
    } catch (error) {
      toast.error(getAxiosErrorMessage(error));
    } finally {
      setLoading(false);
    }
  };

  const handlePasswordUpdate = async (values: any) => {
    setPasswordLoading(true);
    try {
      await API_Instance.post(API_Constants.changePassword, {
        oldPassword: values.currentPassword,
        newPassword: values.newPassword,
      });
      toast.success("Password updated successfully!");
      passwordForm.resetFields();
    } catch (error) {
      toast.error(getAxiosErrorMessage(error));
    } finally {
      setPasswordLoading(false);
    }
  };

  const handleUploadLogo = async (file: File) => {
    setLoading(true);
    const formData = new FormData();
    formData.append("logoPic", file);

    try {
      const res = await API_Instance.post(
        API_Constants.users + "/upload",
        formData,
      );
      const updated = { ...user, logoPic: res.data.data.logoPic };
      updateUser(updated);
      toast.success(res.data.message);
    } catch (error) {
      toast.error(getAxiosErrorMessage(error));
    } finally {
      setLoading(false);
    }
  };

  const handleCloseEdit = () => {
    setIsEditing((pre) => !pre);
    form.setFieldsValue({
      firstName: user?.firstName ?? "",
      lastName: user?.lastName ?? "",
      phone: user?.phone ?? "",
      institutionName: user?.institutionName ?? "",
      institutionAddress: user?.institutionAddress ?? "",
      contactPerson: user?.contactPerson ?? "",
    });
  };

  return (
    <div className="mx-auto py-8 px-4 sm:px-6 lg:px-8 max-w-7xl">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-slate-900">Account Settings</h1>
        <p className="text-slate-500 mt-2">
          Manage your personal information and security preferences.
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
        {/* Left Column - Profile Card */}
        <div className="lg:col-span-4 space-y-6">
          <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden relative">
            <div className="h-24 bg-gradient-to-r from-blue-900 to-brand-blue"></div>
            <div className="px-6 pb-6 relative text-center">
              <div className="relative -mt-12 mb-4 inline-block">
                <div className="h-24 w-24 rounded-full border-4 border-white bg-slate-100 flex items-center justify-center shadow-md">
                  <User size={48} className="text-slate-300" />
                </div>
              </div>

              <div className="mb-4">
                <h2 className="text-xl font-bold text-slate-900 mb-1">
                  {userName}
                </h2>
                <div className="flex justify-center gap-2 mt-2">
                  <Tag
                    color="blue"
                    className="rounded-full px-3 uppercase text-[10px] font-bold"
                  >
                    {user?.role}
                  </Tag>
                  <Tag
                    color="green"
                    className="rounded-full px-3 uppercase text-[10px] font-bold"
                  >
                    Verified
                  </Tag>
                </div>
              </div>

              <Divider className="my-4" />

              <div className="space-y-3 text-left">
                <div className="flex items-center gap-3 text-sm text-slate-600">
                  <Mail size={16} />
                  <span>{user?.email}</span>
                </div>
                {user?.phone && (
                  <div className="flex items-center gap-3 text-sm text-slate-600">
                    <Phone size={16} />
                    <span>{user?.phone}</span>
                  </div>
                )}
                {isInstitution && user?.institutionAddress && (
                  <div className="flex items-center gap-3 text-sm text-slate-600">
                    <MapPin size={16} />
                    <span className="line-clamp-1">
                      {user?.institutionAddress}
                    </span>
                  </div>
                )}
              </div>

              {user?.referralCode && <CouponCode code={user?.referralCode} />}
            </div>
          </div>
        </div>

        {/* Right Column - Tabs & Content */}
        <div className="lg:col-span-8">
          <div className="bg-white rounded-2xl shadow-sm border border-slate-200 min-h-[600px] flex flex-col">
            <div className="flex border-b border-slate-100 px-6 pt-2 overflow-x-auto no-scrollbar">
              <button
                onClick={() => setActiveTab("details")}
                className={`px-4 pb-3 text-sm font-bold border-b-2 transition-all whitespace-nowrap ${activeTab === "details"
                  ? "border-brand-blue text-brand-blue"
                  : "border-transparent text-slate-500 hover:text-slate-700"
                  }`}
              >
                Profile Details
              </button>
              <button
                onClick={() => setActiveTab("security")}
                className={`px-4 pb-3 text-sm font-bold border-b-2 transition-all whitespace-nowrap ${activeTab === "security"
                  ? "border-brand-blue text-brand-blue"
                  : "border-transparent text-slate-500 hover:text-slate-700"
                  }`}
              >
                Security & Password
              </button>
            </div>

            {/* Tab Content */}
            <div className="p-6 md:p-8 flex-1">
              {activeTab === "details" && (
                <div className="animate-fade-in">
                  <div className="flex justify-between items-center mb-8 pb-4 border-b">
                    <div>
                      <h3 className="text-lg font-bold text-slate-900">
                        Personal Information
                      </h3>
                      <p className="text-sm text-slate-500">
                        Update your account info and professional details.
                      </p>
                    </div>
                    {!isEditing ? (
                      <Button type="primary" onClick={handleCloseEdit}>
                        Edit Profile
                      </Button>
                    ) : (
                      <Button onClick={handleCloseEdit}>Cancel</Button>
                    )}
                  </div>

                  <Spin spinning={loading}>
                    <Form
                      form={form}
                      layout="vertical"
                      onFinish={handleProfileUpdate}
                      initialValues={{
                        firstName: user?.firstName ?? "",
                        lastName: user?.lastName ?? "",
                        phone: user?.phone ?? "",
                        institutionName: user?.institutionName ?? "",
                        institutionAddress: user?.institutionAddress ?? "",
                        contactPerson: user?.contactPerson ?? "",
                        gstNumber: user?.gstNumber ?? "",
                        pincode: user?.pincode ?? "",
                        state: user?.state ?? "",
                      }}
                      className="space-y-4"
                    >
                      <Row gutter={24}>
                        {isInstitution || isAdmin ? (
                          <>
                            <Col xs={24} md={24}>
                              <Form.Item
                                label="Institution Name"
                                name="institutionName"
                                rules={[{ required: true }]}
                              >
                                <Input
                                  disabled={!isEditing}
                                  prefix={
                                    <Building
                                      size={18}
                                      className="text-slate-400 mr-2"
                                    />
                                  }
                                />
                              </Form.Item>
                            </Col>
                            <Col xs={24} md={12}>
                              <Form.Item
                                label="Contact Person"
                                name="contactPerson"
                                rules={[{ required: true }]}
                              >
                                <Input
                                  disabled={!isEditing}
                                  prefix={
                                    <UserCheck
                                      size={18}
                                      className="text-slate-400 mr-2"
                                    />
                                  }
                                />
                              </Form.Item>
                            </Col>
                            <Col xs={24} md={12}>
                              <Form.Item
                                label="Phone Number"
                                name="phone"
                                rules={[{ required: true }]}
                              >
                                <Input
                                  type="number"
                                  disabled={!isEditing}
                                  prefix={
                                    <Phone
                                      size={18}
                                      className="text-slate-400 mr-2"
                                    />
                                  }
                                />
                              </Form.Item>
                            </Col>
                            <Col xs={24} md={12}>
                              <Form.Item
                                label="State"
                                name="state"
                                rules={[{ required: true }]}
                              >
                                <Select
                                  disabled={!isEditing}
                                >
                                  {
                                    indianStateOptions.map((s) => {
                                      return (<Select.Option value={s.value}>{s.value}</Select.Option>)
                                    })
                                  }
                                </Select>
                              </Form.Item>
                            </Col>
                            <Col xs={24} md={12}>
                              <Form.Item
                                label="Pincode"
                                name="pincode"
                                rules={[
                                  {
                                    required: true,
                                    message: "Pincode is required",
                                  },
                                  {
                                    pattern: /^[0-9]{6}$/,
                                    message: "Pincode must be 6 digits",
                                  },
                                ]}
                              >
                                <Input
                                  type="text"
                                  inputMode="numeric"
                                  maxLength={6}
                                  disabled={!isEditing}
                                  onChange={(e) => {
                                    e.target.value = e.target.value.replace(/\D/g, "");
                                  }}
                                  prefix={
                                    <MapPin
                                      size={18}
                                      className="text-slate-400 mr-2"
                                    />
                                  }
                                />
                              </Form.Item>
                            </Col>
                            <Col xs={24}>
                              <Form.Item
                                label="Institution Address"
                                name="institutionAddress"
                                rules={[{ required: true }]}
                              >
                                <Input.TextArea
                                  rows={3}
                                  disabled={!isEditing}
                                  placeholder="Enter complete address..."
                                />
                              </Form.Item>
                            </Col>
                            <Col xs={24}>
                              <Form.Item
                                label="GST Number"
                                name="gstNumber"
                              >
                                <Input
                                  disabled={!isEditing}
                                  prefix={
                                    <ReceiptText
                                      size={18}
                                      className="text-slate-400 mr-2"
                                    />
                                  }
                                />
                              </Form.Item>
                            </Col>

                          </>
                        ) : (
                          <>
                            <Col xs={24} md={12}>
                              <Form.Item
                                label="First Name"
                                name="firstName"
                                rules={[{ required: true }]}
                              >
                                <Input
                                  disabled={!isEditing}
                                  prefix={
                                    <User
                                      size={18}
                                      className="text-slate-400 mr-2"
                                    />
                                  }
                                />
                              </Form.Item>
                            </Col>
                            <Col xs={24} md={12}>
                              <Form.Item label="Last Name" name="lastName">
                                <Input
                                  disabled={!isEditing}
                                  prefix={
                                    <User
                                      size={18}
                                      className="text-slate-400 mr-2"
                                    />
                                  }
                                />
                              </Form.Item>
                            </Col>
                            <Col xs={24} md={12}>
                              <Form.Item label="Phone Number" name="phone">
                                <Input
                                  type="number"
                                  disabled={!isEditing}
                                  prefix={
                                    <Phone
                                      size={18}
                                      className="text-slate-400 mr-2"
                                    />
                                  }
                                />
                              </Form.Item>
                            </Col>

                          </>
                        )}

                        <Col xs={24} md={12}>
                          <Form.Item label="Email Address (Login ID)">
                            <Input
                              value={user?.email}
                              disabled
                              prefix={
                                <Mail
                                  size={18}
                                  className="text-slate-400 mr-2"
                                />
                              }
                            />
                            <p className="text-[10px] text-orange-500 mt-1 uppercase font-bold">
                              * Email cannot be changed
                            </p>
                          </Form.Item>
                        </Col>

                      </Row>
                      {isInstitution && (
                        <div className="flex flex-col gap-2">
                          <span className="">Upload Institution Logo</span>
                          <ImageCropper
                            src={user?.logoPic}
                            aspect={1}
                            onChange={(file) => handleUploadLogo(file)}
                            disabled={!isEditing}
                          />
                        </div>
                      )}

                      {isEditing && (
                        <div className="flex justify-end gap-3 pt-6 border-t">
                          <Button onClick={handleCloseEdit}>Cancel</Button>
                          <Button
                            type="primary"
                            htmlType="submit"
                            loading={loading}
                            icon={<Save size={18} />}
                          >
                            Save Changes
                          </Button>
                        </div>
                      )}
                    </Form>
                  </Spin>
                </div>
              )}

              {activeTab === "security" && (
                <div className="space-y-8 animate-fade-in">
                  <div>
                    <h3 className="text-lg font-bold text-slate-900">
                      Security Dashboard
                    </h3>
                    <p className="text-sm text-slate-500">
                      Keep your account secure by rotating your password
                      regularly.
                    </p>
                  </div>

                  <div className="bg-slate-50 p-6 md:p-8 rounded-2xl border border-slate-200 max-w-2xl">
                    <h4 className="font-bold text-slate-800 mb-6 flex items-center gap-2">
                      <div className="p-1.5 bg-orange-100 text-orange-600 rounded-lg">
                        <Lock size={18} />
                      </div>
                      Change Password
                    </h4>

                    <Form
                      form={passwordForm}
                      layout="vertical"
                      onFinish={handlePasswordUpdate}
                      className="space-y-2"
                    >
                      <Form.Item
                        label={
                          <span className="font-semibold text-slate-700">
                            Current Password
                          </span>
                        }
                        name="currentPassword"
                        rules={[{ required: true, message: "Required" }]}
                      >
                        <Input.Password placeholder="••••••••" />
                      </Form.Item>

                      <Form.Item
                        label={
                          <span className="font-semibold text-slate-700">
                            New Password
                          </span>
                        }
                        name="newPassword"
                        rules={[
                          { required: true, message: "Required" },
                          { min: 6, message: "Min 6 chars" },
                        ]}
                      >
                        <Input.Password placeholder="••••••••" />
                      </Form.Item>

                      <Form.Item
                        label={
                          <span className="font-semibold text-slate-700">
                            Confirm Password
                          </span>
                        }
                        name="confirmPassword"
                        dependencies={["newPassword"]}
                        rules={[
                          { required: true, message: "Required" },
                          ({ getFieldValue }) => ({
                            validator(_, value) {
                              if (
                                !value ||
                                getFieldValue("newPassword") === value
                              ) {
                                return Promise.resolve();
                              }
                              return Promise.reject("Passwords do not match");
                            },
                          }),
                        ]}
                      >
                        <Input.Password placeholder="••••••••" />
                      </Form.Item>

                      <div className="pt-4">
                        <Button
                          type="primary"
                          htmlType="submit"
                          loading={passwordLoading}
                        >
                          Update Security Credentials
                        </Button>
                      </div>
                    </Form>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Profile;