"use client";

import { useEffect, useState } from "react";
import api from "@/lib/api";
import toast from "react-hot-toast";
import {
  Store,
  Phone,
  MapPin,
  FileText,
  Save,
} from "lucide-react";

export default function VendorProfilePage() {
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  const [form, setForm] = useState({
    shop_name: "",
    phone: "",
    address: "",
    description: "",

    meta_title: "",
    meta_description: "",
    meta_keywords: "",
  });

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

  const loadProfile = async () => {
    try {
      const token = localStorage.getItem("auth_token");

      const res = await api.get("/vendor/profile", {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });

      const vendor = res.data.data;

      setForm({
        shop_name: vendor.shop_name || "",
        phone: vendor.phone || "",
        address: vendor.address || "",
        description: vendor.description || "",

        meta_title: vendor.meta_title || "",
        meta_description: vendor.meta_description || "",
        meta_keywords: vendor.meta_keywords || "",
      });
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  const updateProfile = async () => {
    try {
      setSaving(true);

      const token = localStorage.getItem("auth_token");

      await api.put("/vendor/profile", form, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });

      toast.success("Profile updated successfully");
    } catch (error: any) {
      console.log(error);

      if (error.response?.data?.message) {
        toast.error(error.response.data.message);
      } else {
        toast.error("Update failed");
      }
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <div className="bg-white rounded-[2rem] p-10">
        Loading...
      </div>
    );
  }

  return (
    <div className="space-y-6">

      <div className="bg-white rounded-[2rem] border border-green-100 shadow-sm p-8">
        <h1 className="text-3xl font-black flex items-center gap-3">
          <Store className="text-green-600" />
          Shop Profile
        </h1>

        <p className="text-slate-500 mt-2">
          Manage your vendor shop information
        </p>
      </div>

      <div className="bg-white rounded-[2rem] border border-green-100 shadow-sm p-8">

        <div className="grid md:grid-cols-2 gap-5">

          <Input
            icon={<Store size={18} />}
            label="Shop Name"
            value={form.shop_name}
            onChange={(v) =>
              setForm({ ...form, shop_name: v })
            }
          />

          <Input
            icon={<Phone size={18} />}
            label="Phone"
            value={form.phone}
            onChange={(v) =>
              setForm({ ...form, phone: v })
            }
          />

        </div>

        <div className="mt-5">
          <label className="font-bold flex items-center gap-2 mb-2">
            <MapPin size={18} />
            Address
          </label>

          <textarea
            value={form.address}
            onChange={(e) =>
              setForm({
                ...form,
                address: e.target.value,
              })
            }
            className="w-full border border-slate-200 rounded-2xl p-4 outline-none focus:border-green-500"
            rows={3}
          />
        </div>

        <div className="mt-5">
          <label className="font-bold flex items-center gap-2 mb-2">
            <FileText size={18} />
            Description
          </label>

          <textarea
            value={form.description}
            onChange={(e) =>
              setForm({
                ...form,
                description: e.target.value,
              })
            }
            className="w-full border border-slate-200 rounded-2xl p-4 outline-none focus:border-green-500"
            rows={5}
          />
        </div>
      </div>

      <div className="bg-white rounded-[2rem] border border-green-100 shadow-sm p-8">

        <h2 className="text-2xl font-black mb-5">
          SEO Settings
        </h2>

        <div className="space-y-4">

          <Input
            label="Meta Title"
            value={form.meta_title}
            onChange={(v) =>
              setForm({
                ...form,
                meta_title: v,
              })
            }
          />

          <Input
            label="Meta Keywords"
            value={form.meta_keywords}
            onChange={(v) =>
              setForm({
                ...form,
                meta_keywords: v,
              })
            }
          />

          <textarea
            placeholder="Meta Description"
            value={form.meta_description}
            onChange={(e) =>
              setForm({
                ...form,
                meta_description: e.target.value,
              })
            }
            className="w-full border border-slate-200 rounded-2xl p-4 outline-none focus:border-green-500"
            rows={4}
          />
        </div>

        <button
          onClick={updateProfile}
          disabled={saving}
          className="cursor-pointer mt-6 bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-2xl flex items-center gap-2"
        >
          <Save size={18} />

          {saving ? "Saving..." : "Save Changes"}
        </button>
      </div>
    </div>
  );
}

function Input({
  icon,
  label,
  value,
  onChange,
}: {
  icon?: React.ReactNode;
  label: string;
  value: string;
  onChange: (v: string) => void;
}) {
  return (
    <div>
      <label className="font-bold mb-2 flex items-center gap-2">
        {icon}
        {label}
      </label>

      <input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="w-full border border-slate-200 rounded-2xl p-4 outline-none focus:border-green-500"
      />
    </div>
  );
}