"use client"

import type React from "react"

import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { motion } from "framer-motion"
import { User, Package, Heart, CreditCard, LogOut, Edit, Check, ChevronRight, MapPin, Phone, Mail } from "lucide-react"

export default function AccountPage() {
  const [activeTab, setActiveTab] = useState("dashboard")
  const [isEditing, setIsEditing] = useState(false)

  // Mock user data
  const userData = {
    name: "АННА СМИРНОВА",
    email: "anna.smirnova@example.com",
    phone: "+7 (999) 123-45-67",
    address: "ул. Ленина, 123, кв. 45, Москва, 123456",
    avatar: "/placeholder.svg?height=200&width=200",
    orders: [
      {
        id: "ORD-12345",
        date: "15.03.2025",
        status: "ДОСТАВЛЕН",
        statusCode: "delivered",
        total: 16470,
        items: 3,
      },
      {
        id: "ORD-12346",
        date: "02.02.2025",
        status: "ДОСТАВЛЕН",
        statusCode: "delivered",
        total: 8990,
        items: 1,
      },
      {
        id: "ORD-12347",
        date: "20.03.2025",
        status: "В ПУТИ",
        statusCode: "in_transit",
        total: 12480,
        items: 2,
      },
    ],
    wishlist: [
      {
        id: 1,
        name: "ПЛАТЬЕ С ЦВЕТОЧНЫМ ПРИНТОМ",
        price: 5990,
        image: "/placeholder.svg?height=600&width=400",
      },
      {
        id: 2,
        name: "БЛУЗА ИЗ НАТУРАЛЬНОГО ШЕЛКА",
        price: 4990,
        image: "/placeholder.svg?height=600&width=400",
      },
      {
        id: 3,
        name: "БРЮКИ С ВЫСОКОЙ ПОСАДКОЙ",
        price: 3990,
        image: "/placeholder.svg?height=600&width=400",
      },
    ],
    paymentMethods: [
      {
        id: 1,
        type: "card",
        name: "VISA ****1234",
        isDefault: true,
      },
      {
        id: 2,
        type: "card",
        name: "MASTERCARD ****5678",
        isDefault: false,
      },
    ],
    bonusPoints: 1250,
  }

  const [formData, setFormData] = useState({
    name: userData.name,
    email: userData.email,
    phone: userData.phone,
    address: userData.address,
  })

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const handleSaveProfile = () => {
    // Here you would normally send the updated profile data to your backend
    console.log("Updated profile:", formData)
    setIsEditing(false)
  }

  const getStatusColor = (statusCode: string) => {
    switch (statusCode) {
      case "processing":
        return "bg-blue-100 text-blue-800"
      case "in_transit":
        return "bg-yellow-100 text-yellow-800"
      case "delivered":
        return "bg-green-100 text-green-800"
      case "cancelled":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

  return (
    <div className="bg-white">
      {/* Hero Section */}
      <section className="relative h-[30vh] min-h-[200px] bg-gray-900">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{ backgroundImage: "url('/placeholder.svg?height=600&width=1920')" }}
        >
          <div className="absolute inset-0 bg-black/70"></div>
        </div>

        <div className="relative h-full container mx-auto px-4 flex flex-col justify-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="max-w-2xl text-white"
          >
            <h1 className="text-3xl md:text-4xl font-arimo font-bold mb-2 uppercase tracking-tight">ЛИЧНЫЙ КАБИНЕТ</h1>
            <p className="text-lg opacity-90 font-arimo">Управляйте заказами, избранным и личными данными</p>
          </motion.div>
        </div>
      </section>

      <section className="py-12">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row gap-8">
            {/* Sidebar */}
            <div className="md:w-1/4">
              <div className="bg-white p-6 border border-gray-200 sticky top-24">
                <div className="flex items-center gap-4 mb-8">
                  <div className="relative w-16 h-16 overflow-hidden">
                    <Image
                      src={userData.avatar || "/placeholder.svg"}
                      alt={userData.name}
                      fill
                      className="object-cover"
                    />
                  </div>
                  <div>
                    <h2 className="font-arimo font-bold text-lg text-black">{userData.name}</h2>
                    <p className="text-gray-600 text-sm font-arimo">{userData.email}</p>
                  </div>
                </div>

                <nav className="space-y-1">
                  {[
                    { id: "dashboard", label: "ОБЗОР", icon: <User className="h-5 w-5" /> },
                    { id: "orders", label: "МОИ ЗАКАЗЫ", icon: <Package className="h-5 w-5" /> },
                    { id: "wishlist", label: "ИЗБРАННОЕ", icon: <Heart className="h-5 w-5" /> },
                    { id: "payment", label: "СПОСОБЫ ОПЛАТЫ", icon: <CreditCard className="h-5 w-5" /> },
                  ].map((item) => (
                    <button
                      key={item.id}
                      className={`flex items-center gap-3 w-full p-3 transition-colors font-arimo ${
                        activeTab === item.id ? "bg-black text-white" : "text-gray-700 hover:bg-gray-100"
                      }`}
                      onClick={() => setActiveTab(item.id)}
                    >
                      {item.icon}
                      <span>{item.label}</span>
                    </button>
                  ))}
                  <button className="flex items-center gap-3 w-full p-3 text-gray-700 hover:bg-gray-100 transition-colors font-arimo">
                    <LogOut className="h-5 w-5" />
                    <span>ВЫЙТИ</span>
                  </button>
                </nav>

                <div className="mt-8 p-4 bg-gray-100">
                  <div className="flex justify-between items-center mb-2">
                    <h3 className="font-arimo font-bold text-black uppercase tracking-tight">БОНУСНЫЕ БАЛЛЫ</h3>
                    <span className="font-arimo font-bold text-lg text-black">{userData.bonusPoints}</span>
                  </div>
                  <p className="text-sm text-gray-700 font-arimo">
                    Используйте баллы для оплаты заказов. 1 балл = 1 рубль.
                  </p>
                </div>
              </div>
            </div>

            {/* Main Content */}
            <div className="md:w-3/4">
              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
                <TabsList className="w-full grid grid-cols-4 mb-8 bg-transparent">
                  <TabsTrigger
                    value="dashboard"
                    className="data-[state=active]:bg-black data-[state=active]:text-white uppercase tracking-tight font-arimo"
                  >
                    ОБЗОР
                  </TabsTrigger>
                  <TabsTrigger
                    value="orders"
                    className="data-[state=active]:bg-black data-[state=active]:text-white uppercase tracking-tight font-arimo"
                  >
                    ЗАКАЗЫ
                  </TabsTrigger>
                  <TabsTrigger
                    value="wishlist"
                    className="data-[state=active]:bg-black data-[state=active]:text-white uppercase tracking-tight font-arimo"
                  >
                    ИЗБРАННОЕ
                  </TabsTrigger>
                  <TabsTrigger
                    value="payment"
                    className="data-[state=active]:bg-black data-[state=active]:text-white uppercase tracking-tight font-arimo"
                  >
                    ОПЛАТА
                  </TabsTrigger>
                </TabsList>

                {/* Dashboard Tab */}
                <TabsContent value="dashboard" className="mt-0">
                  <div className="grid md:grid-cols-2 gap-8">
                    {/* Profile Information */}
                    <div className="bg-white p-6 border border-gray-200">
                      <div className="flex justify-between items-center mb-6">
                        <h3 className="text-xl font-arimo font-bold text-black uppercase tracking-tight">
                          ЛИЧНАЯ ИНФОРМАЦИЯ
                        </h3>
                        <button
                          className="text-black hover:text-gray-600 flex items-center font-arimo"
                          onClick={() => setIsEditing(!isEditing)}
                        >
                          {isEditing ? (
                            <>
                              <Check className="h-4 w-4 mr-1" />
                              СОХРАНИТЬ
                            </>
                          ) : (
                            <>
                              <Edit className="h-4 w-4 mr-1" />
                              РЕДАКТИРОВАТЬ
                            </>
                          )}
                        </button>
                      </div>

                      {isEditing ? (
                        <div className="space-y-4">
                          <div>
                            <label htmlFor="name" className="block text-sm font-arimo font-medium text-gray-700 mb-1">
                              ИМЯ
                            </label>
                            <Input
                              id="name"
                              name="name"
                              value={formData.name}
                              onChange={handleChange}
                              className="font-arimo"
                            />
                          </div>
                          <div>
                            <label htmlFor="email" className="block text-sm font-arimo font-medium text-gray-700 mb-1">
                              EMAIL
                            </label>
                            <Input
                              id="email"
                              name="email"
                              type="email"
                              value={formData.email}
                              onChange={handleChange}
                              className="font-arimo"
                            />
                          </div>
                          <div>
                            <label htmlFor="phone" className="block text-sm font-arimo font-medium text-gray-700 mb-1">
                              ТЕЛЕФОН
                            </label>
                            <Input
                              id="phone"
                              name="phone"
                              value={formData.phone}
                              onChange={handleChange}
                              className="font-arimo"
                            />
                          </div>
                          <div>
                            <label
                              htmlFor="address"
                              className="block text-sm font-arimo font-medium text-gray-700 mb-1"
                            >
                              АДРЕС
                            </label>
                            <Input
                              id="address"
                              name="address"
                              value={formData.address}
                              onChange={handleChange}
                              className="font-arimo"
                            />
                          </div>
                          <Button
                            className="bg-black hover:bg-gray-800 text-white w-full mt-2 font-arimo"
                            onClick={handleSaveProfile}
                          >
                            СОХРАНИТЬ ИЗМЕНЕНИЯ
                          </Button>
                        </div>
                      ) : (
                        <div className="space-y-4">
                          <div className="flex items-start">
                            <User className="h-5 w-5 text-black mr-3 mt-0.5" />
                            <div>
                              <p className="text-sm text-gray-500 font-arimo">ИМЯ</p>
                              <p className="font-arimo font-medium">{userData.name}</p>
                            </div>
                          </div>
                          <div className="flex items-start">
                            <Mail className="h-5 w-5 text-black mr-3 mt-0.5" />
                            <div>
                              <p className="text-sm text-gray-500 font-arimo">EMAIL</p>
                              <p className="font-arimo font-medium">{userData.email}</p>
                            </div>
                          </div>
                          <div className="flex items-start">
                            <Phone className="h-5 w-5 text-black mr-3 mt-0.5" />
                            <div>
                              <p className="text-sm text-gray-500 font-arimo">ТЕЛЕФОН</p>
                              <p className="font-arimo font-medium">{userData.phone}</p>
                            </div>
                          </div>
                          <div className="flex items-start">
                            <MapPin className="h-5 w-5 text-black mr-3 mt-0.5" />
                            <div>
                              <p className="text-sm text-gray-500 font-arimo">АДРЕС ДОСТАВКИ</p>
                              <p className="font-arimo font-medium">{userData.address}</p>
                            </div>
                          </div>
                        </div>
                      )}
                    </div>

                    {/* Recent Orders */}
                    <div className="bg-white p-6 border border-gray-200">
                      <div className="flex justify-between items-center mb-6">
                        <h3 className="text-xl font-arimo font-bold text-black uppercase tracking-tight">
                          ПОСЛЕДНИЕ ЗАКАЗЫ
                        </h3>
                        <Button
                          variant="link"
                          className="text-black hover:text-gray-600 p-0 font-arimo"
                          onClick={() => setActiveTab("orders")}
                        >
                          ВСЕ ЗАКАЗЫ
                          <ChevronRight className="h-4 w-4 ml-1" />
                        </Button>
                      </div>

                      <div className="space-y-4">
                        {userData.orders.slice(0, 3).map((order) => (
                          <div key={order.id} className="p-4 border border-gray-200">
                            <div className="flex justify-between items-start mb-2">
                              <div>
                                <p className="font-arimo font-medium">{order.id}</p>
                                <p className="text-sm text-gray-500 font-arimo">{order.date}</p>
                              </div>
                              <div className={`px-3 py-1 text-sm font-arimo ${getStatusColor(order.statusCode)}`}>
                                {order.status}
                              </div>
                            </div>
                            <div className="flex justify-between items-center">
                              <p className="text-sm text-gray-600 font-arimo">{order.items} товаров</p>
                              <p className="font-arimo font-bold text-black">{order.total.toLocaleString()} ₽</p>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* Wishlist Preview */}
                    <div className="bg-white p-6 border border-gray-200">
                      <div className="flex justify-between items-center mb-6">
                        <h3 className="text-xl font-arimo font-bold text-black uppercase tracking-tight">ИЗБРАННОЕ</h3>
                        <Button
                          variant="link"
                          className="text-black hover:text-gray-600 p-0 font-arimo"
                          onClick={() => setActiveTab("wishlist")}
                        >
                          ВСЕ ИЗБРАННОЕ
                          <ChevronRight className="h-4 w-4 ml-1" />
                        </Button>
                      </div>

                      <div className="grid grid-cols-3 gap-4">
                        {userData.wishlist.slice(0, 3).map((item) => (
                          <Link key={item.id} href={`/product/${item.id}`} className="group">
                            <div className="relative aspect-square overflow-hidden mb-2">
                              <Image
                                src={item.image || "/placeholder.svg"}
                                alt={item.name}
                                fill
                                className="object-cover transition-transform duration-300 group-hover:scale-105"
                              />
                            </div>
                            <p className="text-sm font-arimo font-medium truncate group-hover:text-gray-600 transition-colors">
                              {item.name}
                            </p>
                            <p className="text-sm font-arimo font-bold text-black">{item.price.toLocaleString()} ₽</p>
                          </Link>
                        ))}
                      </div>
                    </div>

                    {/* Payment Methods */}
                    <div className="bg-white p-6 border border-gray-200">
                      <div className="flex justify-between items-center mb-6">
                        <h3 className="text-xl font-arimo font-bold text-black uppercase tracking-tight">
                          СПОСОБЫ ОПЛАТЫ
                        </h3>
                        <Button
                          variant="link"
                          className="text-black hover:text-gray-600 p-0 font-arimo"
                          onClick={() => setActiveTab("payment")}
                        >
                          УПРАВЛЕНИЕ
                          <ChevronRight className="h-4 w-4 ml-1" />
                        </Button>
                      </div>

                      <div className="space-y-4">
                        {userData.paymentMethods.map((method) => (
                          <div key={method.id} className="p-6 border border-gray-200 flex justify-between items-center">
                            <div className="flex items-center">
                              <div className="bg-gray-100 p-3 mr-4">
                                <CreditCard className="h-6 w-6 text-black" />
                              </div>
                              <div>
                                <h4 className="font-arimo font-bold text-black mb-1">{method.name}</h4>
                                {method.isDefault && (
                                  <p className="text-sm text-gray-600 font-arimo">Способ оплаты по умолчанию</p>
                                )}
                              </div>
                            </div>

                            <div className="flex gap-2">
                              <Button variant="outline" size="sm" className="font-arimo">
                                <Edit className="h-4 w-4 mr-1" />
                                ИЗМЕНИТЬ
                              </Button>
                              {!method.isDefault && (
                                <Button variant="outline" size="sm" className="font-arimo">
                                  ПО УМОЛЧАНИЮ
                                </Button>
                              )}
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </TabsContent>

                {/* Orders Tab */}
                <TabsContent value="orders" className="mt-0">
                  <div className="bg-white p-6 border border-gray-200">
                    <h3 className="text-xl font-arimo font-bold text-black uppercase tracking-tight mb-6">
                      ИСТОРИЯ ЗАКАЗОВ
                    </h3>

                    <div className="space-y-6">
                      {userData.orders.map((order) => (
                        <div key={order.id} className="p-6 border border-gray-200">
                          <div className="flex flex-wrap justify-between items-start gap-4 mb-4">
                            <div>
                              <h4 className="font-arimo font-bold text-black mb-1">ЗАКАЗ {order.id}</h4>
                              <p className="text-gray-600 font-arimo">от {order.date}</p>
                            </div>
                            <div className={`px-4 py-2 font-arimo ${getStatusColor(order.statusCode)}`}>
                              {order.status}
                            </div>
                          </div>

                          <div className="flex flex-wrap justify-between items-center gap-4 mb-4">
                            <div>
                              <p className="text-gray-600 font-arimo">{order.items} товаров</p>
                              <p className="font-arimo font-bold text-lg text-black">
                                {order.total.toLocaleString()} ₽
                              </p>
                            </div>

                            <div className="flex flex-wrap gap-3">
                              <Button asChild className="bg-black hover:bg-gray-800 text-white font-arimo">
                                <Link href={`/order-tracking?order=${order.id}`}>ОТСЛЕДИТЬ ЗАКАЗ</Link>
                              </Button>
                              <Button
                                variant="outline"
                                className="border-black text-black hover:bg-black hover:text-white font-arimo"
                              >
                                ПОДРОБНЕЕ
                              </Button>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </TabsContent>

                {/* Wishlist Tab */}
                <TabsContent value="wishlist" className="mt-0">
                  <div className="bg-white p-6 border border-gray-200">
                    <h3 className="text-xl font-arimo font-bold text-black uppercase tracking-tight mb-6">
                      ИЗБРАННЫЕ ТОВАРЫ
                    </h3>

                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                      {userData.wishlist.map((item) => (
                        <div key={item.id} className="border border-gray-200 overflow-hidden group">
                          <div className="relative aspect-square">
                            <Image
                              src={item.image || "/placeholder.svg"}
                              alt={item.name}
                              fill
                              className="object-cover transition-transform duration-300 group-hover:scale-105"
                            />
                            <button className="absolute top-3 right-3 bg-white p-2 shadow-sm hover:bg-gray-100 transition-colors">
                              <Heart className="h-4 w-4 text-black fill-current" />
                              <span className="sr-only">Удалить из избранного</span>
                            </button>
                          </div>

                          <div className="p-4">
                            <Link href={`/product/${item.id}`}>
                              <h4 className="font-arimo font-medium text-black mb-2 group-hover:underline uppercase">
                                {item.name}
                              </h4>
                            </Link>
                            <p className="font-arimo font-bold text-black mb-4">{item.price.toLocaleString()} ₽</p>
                            <Button className="w-full bg-black hover:bg-gray-800 text-white font-arimo">
                              В КОРЗИНУ
                            </Button>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </TabsContent>

                {/* Payment Methods Tab */}
                <TabsContent value="payment" className="mt-0">
                  <div className="bg-white p-6 border border-gray-200">
                    <h3 className="text-xl font-arimo font-bold text-black uppercase tracking-tight mb-6">
                      СПОСОБЫ ОПЛАТЫ
                    </h3>

                    <div className="space-y-6">
                      {userData.paymentMethods.map((method) => (
                        <div key={method.id} className="p-6 border border-gray-200 flex justify-between items-center">
                          <div className="flex items-center">
                            <div className="bg-gray-100 p-3 mr-4">
                              <CreditCard className="h-6 w-6 text-black" />
                            </div>
                            <div>
                              <h4 className="font-arimo font-bold text-black mb-1">{method.name}</h4>
                              {method.isDefault && (
                                <p className="text-sm text-gray-600 font-arimo">Способ оплаты по умолчанию</p>
                              )}
                            </div>
                          </div>

                          <div className="flex gap-2">
                            <Button variant="outline" size="sm" className="font-arimo">
                              <Edit className="h-4 w-4 mr-1" />
                              ИЗМЕНИТЬ
                            </Button>
                            {!method.isDefault && (
                              <Button variant="outline" size="sm" className="font-arimo">
                                ПО УМОЛЧАНИЮ
                              </Button>
                            )}
                          </div>
                        </div>
                      ))}

                      <div className="mt-8">
                        <Button className="bg-black hover:bg-gray-800 text-white font-arimo">
                          <CreditCard className="h-4 w-4 mr-2" />
                          ДОБАВИТЬ СПОСОБ ОПЛАТЫ
                        </Button>
                      </div>
                    </div>
                  </div>
                </TabsContent>
              </Tabs>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}

