"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { motion } from "framer-motion"
import { Ruler, Info } from "lucide-react"

export default function SizeGuidePage() {
  const [gender, setGender] = useState("women")
  const [measurementSystem, setMeasurementSystem] = useState("cm")
  const [height, setHeight] = useState("")
  const [weight, setWeight] = useState("")
  const [bust, setBust] = useState("")
  const [waist, setWaist] = useState("")
  const [hips, setHips] = useState("")
  const [recommendedSize, setRecommendedSize] = useState("")

  const calculateSize = () => {
    // This is a simplified example of size calculation
    // In a real application, you would have a more complex algorithm
    if (!bust || !waist || !hips) {
      alert("Пожалуйста, заполните все необходимые поля")
      return
    }

    const bustValue = Number.parseFloat(bust)
    const waistValue = Number.parseFloat(waist)
    const hipsValue = Number.parseFloat(hips)

    if (gender === "women") {
      if (bustValue <= 84 && waistValue <= 66 && hipsValue <= 90) {
        setRecommendedSize("XS")
      } else if (bustValue <= 88 && waistValue <= 70 && hipsValue <= 94) {
        setRecommendedSize("S")
      } else if (bustValue <= 92 && waistValue <= 74 && hipsValue <= 98) {
        setRecommendedSize("M")
      } else if (bustValue <= 96 && waistValue <= 78 && hipsValue <= 102) {
        setRecommendedSize("L")
      } else {
        setRecommendedSize("XL")
      }
    } else {
      // Men's size calculation would go here
      if (bustValue <= 90 && waistValue <= 78) {
        setRecommendedSize("XS")
      } else if (bustValue <= 94 && waistValue <= 82) {
        setRecommendedSize("S")
      } else if (bustValue <= 98 && waistValue <= 86) {
        setRecommendedSize("M")
      } else if (bustValue <= 102 && waistValue <= 90) {
        setRecommendedSize("L")
      } else {
        setRecommendedSize("XL")
      }
    }
  }

  const resetForm = () => {
    setHeight("")
    setWeight("")
    setBust("")
    setWaist("")
    setHips("")
    setRecommendedSize("")
  }

  return (
    <div className="bg-white">
      {/* Hero Section */}
      <section className="relative h-[40vh] min-h-[300px] bg-gray-100">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{ backgroundImage: "url('/placeholder.svg?height=800&width=1920')" }}
        >
          <div className="absolute inset-0 bg-gradient-to-r from-primary/80 to-primary/40"></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-4xl md:text-5xl font-bold mb-4">Таблица размеров</h1>
            <p className="text-xl opacity-90">Подберите идеальный размер для вашей фигуры</p>
          </motion.div>
        </div>
      </section>

      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-primary mb-4">Как правильно снять мерки</h2>
              <p className="text-gray-700 max-w-2xl mx-auto">
                Чтобы подобрать идеальный размер, важно правильно снять мерки. Следуйте нашим рекомендациям для
                получения точных измерений.
              </p>
            </div>

            <div className="grid md:grid-cols-2 gap-12 mb-16">
              <div>
                <h3 className="text-xl font-bold text-primary mb-4">Советы по измерению</h3>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="bg-tertiary p-2 rounded-full mr-3 mt-0.5">
                      <Ruler className="h-4 w-4 text-primary" />
                    </div>
                    <div>
                      <p className="font-medium">Используйте мягкую измерительную ленту</p>
                      <p className="text-gray-600 text-sm">
                        Для точных измерений используйте мягкую портновскую ленту.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="bg-tertiary p-2 rounded-full mr-3 mt-0.5">
                      <Ruler className="h-4 w-4 text-primary" />
                    </div>
                    <div>
                      <p className="font-medium">Измеряйте в нижнем белье</p>
                      <p className="text-gray-600 text-sm">
                        Для получения точных измерений снимайте мерки в облегающем нижнем белье.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="bg-tertiary p-2 rounded-full mr-3 mt-0.5">
                      <Ruler className="h-4 w-4 text-primary" />
                    </div>
                    <div>
                      <p className="font-medium">Держите ленту параллельно полу</p>
                      <p className="text-gray-600 text-sm">
                        При измерении обхватов следите, чтобы лента была параллельна полу.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="bg-tertiary p-2 rounded-full mr-3 mt-0.5">
                      <Ruler className="h-4 w-4 text-primary" />
                    </div>
                    <div>
                      <p className="font-medium">Не затягивайте ленту слишком туго</p>
                      <p className="text-gray-600 text-sm">Лента должна прилегать к телу, но не стягивать его.</p>
                    </div>
                  </li>
                </ul>
              </div>

              <div>
                <h3 className="text-xl font-bold text-primary mb-4">Что измерять</h3>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="bg-tertiary p-2 rounded-full mr-3 mt-0.5">
                      <span className="text-primary font-bold text-sm">1</span>
                    </div>
                    <div>
                      <p className="font-medium">Обхват груди</p>
                      <p className="text-gray-600 text-sm">
                        Измерьте по наиболее выступающим точкам груди, лента должна проходить через лопатки.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="bg-tertiary p-2 rounded-full mr-3 mt-0.5">
                      <span className="text-primary font-bold text-sm">2</span>
                    </div>
                    <div>
                      <p className="font-medium">Обхват талии</p>
                      <p className="text-gray-600 text-sm">
                        Измерьте по самой узкой части талии, обычно на 2-3 см выше пупка.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="bg-tertiary p-2 rounded-full mr-3 mt-0.5">
                      <span className="text-primary font-bold text-sm">3</span>
                    </div>
                    <div>
                      <p className="font-medium">Обхват бедер</p>
                      <p className="text-gray-600 text-sm">Измерьте по самым выступающим точкам ягодиц.</p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="bg-tertiary p-2 rounded-full mr-3 mt-0.5">
                      <span className="text-primary font-bold text-sm">4</span>
                    </div>
                    <div>
                      <p className="font-medium">Рост</p>
                      <p className="text-gray-600 text-sm">
                        Измерьте расстояние от макушки до пола, стоя прямо без обуви.
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>

            <div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 mb-16">
              <h3 className="text-2xl font-bold text-primary mb-6">Подберите свой размер</h3>

              <div className="space-y-6">
                <div className="flex flex-col sm:flex-row gap-6">
                  <div className="flex-1">
                    <Label className="mb-2 block">Выберите пол</Label>
                    <RadioGroup value={gender} onValueChange={setGender} className="flex gap-4">
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="women" id="women" />
                        <Label htmlFor="women">Женщины</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="men" id="men" />
                        <Label htmlFor="men">Мужчины</Label>
                      </div>
                    </RadioGroup>
                  </div>

                  <div className="flex-1">
                    <Label className="mb-2 block">Единицы измерения</Label>
                    <RadioGroup value={measurementSystem} onValueChange={setMeasurementSystem} className="flex gap-4">
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="cm" id="cm" />
                        <Label htmlFor="cm">Сантиметры</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="inch" id="inch" />
                        <Label htmlFor="inch">Дюймы</Label>
                      </div>
                    </RadioGroup>
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                  <div>
                    <Label htmlFor="height">Рост</Label>
                    <div className="relative">
                      <Input
                        id="height"
                        type="number"
                        placeholder={measurementSystem === "cm" ? "170" : "67"}
                        value={height}
                        onChange={(e) => setHeight(e.target.value)}
                      />
                      <div className="absolute inset-y-0 right-3 flex items-center text-gray-500">
                        {measurementSystem === "cm" ? "см" : "in"}
                      </div>
                    </div>
                  </div>

                  <div>
                    <Label htmlFor="weight">Вес</Label>
                    <div className="relative">
                      <Input
                        id="weight"
                        type="number"
                        placeholder={measurementSystem === "cm" ? "60" : "132"}
                        value={weight}
                        onChange={(e) => setWeight(e.target.value)}
                      />
                      <div className="absolute inset-y-0 right-3 flex items-center text-gray-500">
                        {measurementSystem === "cm" ? "кг" : "lb"}
                      </div>
                    </div>
                  </div>

                  <div>
                    <Label htmlFor="bust">Обхват груди</Label>
                    <div className="relative">
                      <Input
                        id="bust"
                        type="number"
                        placeholder={measurementSystem === "cm" ? "90" : "35"}
                        value={bust}
                        onChange={(e) => setBust(e.target.value)}
                      />
                      <div className="absolute inset-y-0 right-3 flex items-center text-gray-500">
                        {measurementSystem === "cm" ? "см" : "in"}
                      </div>
                    </div>
                  </div>

                  <div>
                    <Label htmlFor="waist">Обхват талии</Label>
                    <div className="relative">
                      <Input
                        id="waist"
                        type="number"
                        placeholder={measurementSystem === "cm" ? "70" : "28"}
                        value={waist}
                        onChange={(e) => setWaist(e.target.value)}
                      />
                      <div className="absolute inset-y-0 right-3 flex items-center text-gray-500">
                        {measurementSystem === "cm" ? "см" : "in"}
                      </div>
                    </div>
                  </div>

                  <div>
                    <Label htmlFor="hips">Обхват бедер</Label>
                    <div className="relative">
                      <Input
                        id="hips"
                        type="number"
                        placeholder={measurementSystem === "cm" ? "95" : "37"}
                        value={hips}
                        onChange={(e) => setHips(e.target.value)}
                      />
                      <div className="absolute inset-y-0 right-3 flex items-center text-gray-500">
                        {measurementSystem === "cm" ? "см" : "in"}
                      </div>
                    </div>
                  </div>
                </div>

                <div className="flex flex-col sm:flex-row gap-4">
                  <Button className="bg-primary hover:bg-secondary rounded-full" onClick={calculateSize}>
                    Рассчитать мой размер
                  </Button>
                  <Button
                    variant="outline"
                    className="border-primary text-primary hover:bg-primary hover:text-white rounded-full"
                    onClick={resetForm}
                  >
                    Сбросить
                  </Button>
                </div>

                {recommendedSize && (
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    className="bg-tertiary/50 p-6 rounded-xl flex items-start"
                  >
                    <Info className="h-6 w-6 mr-3 mt-0.5 text-primary" />
                    <div>
                      <h3 className="font-bold text-lg mb-1">Ваш рекомендуемый размер: {recommendedSize}</h3>
                      <p className="text-gray-700">
                        Это приблизительный размер, основанный на ваших измерениях. Размеры могут отличаться в
                        зависимости от модели и фасона.
                      </p>
                    </div>
                  </motion.div>
                )}
              </div>
            </div>

            <div>
              <h3 className="text-2xl font-bold text-primary mb-6">Таблицы размеров</h3>

              <Tabs defaultValue="women" className="w-full">
                <TabsList className="w-full grid grid-cols-2 mb-6">
                  <TabsTrigger value="women">Женская одежда</TabsTrigger>
                  <TabsTrigger value="men">Мужская одежда</TabsTrigger>
                </TabsList>

                <TabsContent value="women" className="pt-4">
                  <div className="overflow-x-auto">
                    <table className="w-full border-collapse">
                      <thead>
                        <tr className="bg-tertiary/50">
                          <th className="border border-gray-200 p-3 text-left">Российский размер</th>
                          <th className="border border-gray-200 p-3 text-left">Международный размер</th>
                          <th className="border border-gray-200 p-3 text-left">Обхват груди (см)</th>
                          <th className="border border-gray-200 p-3 text-left">Обхват талии (см)</th>
                          <th className="border border-gray-200 p-3 text-left">Обхват бедер (см)</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td className="border border-gray-200 p-3">40-42</td>
                          <td className="border border-gray-200 p-3">XS</td>
                          <td className="border border-gray-200 p-3">80-84</td>
                          <td className="border border-gray-200 p-3">62-66</td>
                          <td className="border border-gray-200 p-3">86-90</td>
                        </tr>
                        <tr className="bg-gray-50">
                          <td className="border border-gray-200 p-3">42-44</td>
                          <td className="border border-gray-200 p-3">S</td>
                          <td className="border border-gray-200 p-3">84-88</td>
                          <td className="border border-gray-200 p-3">66-70</td>
                          <td className="border border-gray-200 p-3">90-94</td>
                        </tr>
                        <tr>
                          <td className="border border-gray-200 p-3">44-46</td>
                          <td className="border border-gray-200 p-3">M</td>
                          <td className="border border-gray-200 p-3">88-92</td>
                          <td className="border border-gray-200 p-3">70-74</td>
                          <td className="border border-gray-200 p-3">94-98</td>
                        </tr>
                        <tr className="bg-gray-50">
                          <td className="border border-gray-200 p-3">46-48</td>
                          <td className="border border-gray-200 p-3">L</td>
                          <td className="border border-gray-200 p-3">92-96</td>
                          <td className="border border-gray-200 p-3">74-78</td>
                          <td className="border border-gray-200 p-3">98-102</td>
                        </tr>
                        <tr>
                          <td className="border border-gray-200 p-3">48-50</td>
                          <td className="border border-gray-200 p-3">XL</td>
                          <td className="border border-gray-200 p-3">96-100</td>
                          <td className="border border-gray-200 p-3">78-82</td>
                          <td className="border border-gray-200 p-3">102-106</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </TabsContent>

                <TabsContent value="men" className="pt-4">
                  <div className="overflow-x-auto">
                    <table className="w-full border-collapse">
                      <thead>
                        <tr className="bg-tertiary/50">
                          <th className="border border-gray-200 p-3 text-left">Российский размер</th>
                          <th className="border border-gray-200 p-3 text-left">Международный размер</th>
                          <th className="border border-gray-200 p-3 text-left">Обхват груди (см)</th>
                          <th className="border border-gray-200 p-3 text-left">Обхват талии (см)</th>
                          <th className="border border-gray-200 p-3 text-left">Обхват шеи (см)</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td className="border border-gray-200 p-3">44-46</td>
                          <td className="border border-gray-200 p-3">XS</td>
                          <td className="border border-gray-200 p-3">86-90</td>
                          <td className="border border-gray-200 p-3">74-78</td>
                          <td className="border border-gray-200 p-3">36-37</td>
                        </tr>
                        <tr className="bg-gray-50">
                          <td className="border border-gray-200 p-3">46-48</td>
                          <td className="border border-gray-200 p-3">S</td>
                          <td className="border border-gray-200 p-3">90-94</td>
                          <td className="border border-gray-200 p-3">78-82</td>
                          <td className="border border-gray-200 p-3">37-38</td>
                        </tr>
                        <tr>
                          <td className="border border-gray-200 p-3">48-50</td>
                          <td className="border border-gray-200 p-3">M</td>
                          <td className="border border-gray-200 p-3">94-98</td>
                          <td className="border border-gray-200 p-3">82-86</td>
                          <td className="border border-gray-200 p-3">38-39</td>
                        </tr>
                        <tr className="bg-gray-50">
                          <td className="border border-gray-200 p-3">50-52</td>
                          <td className="border border-gray-200 p-3">L</td>
                          <td className="border border-gray-200 p-3">98-102</td>
                          <td className="border border-gray-200 p-3">86-90</td>
                          <td className="border border-gray-200 p-3">39-40</td>
                        </tr>
                        <tr>
                          <td className="border border-gray-200 p-3">52-54</td>
                          <td className="border border-gray-200 p-3">XL</td>
                          <td className="border border-gray-200 p-3">102-106</td>
                          <td className="border border-gray-200 p-3">90-94</td>
                          <td className="border border-gray-200 p-3">40-41</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </TabsContent>
              </Tabs>
            </div>
          </div>
        </div>
      </section>

      <section className="py-12 bg-tertiary/30">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-2xl font-bold text-primary mb-4">Нужна помощь с выбором размера?</h2>
          <p className="text-gray-700 mb-8 max-w-2xl mx-auto">
            Если у вас остались вопросы или вам нужна дополнительная помощь с выбором размера, наши консультанты всегда
            готовы помочь.
          </p>
          <Button asChild className="bg-primary hover:bg-secondary rounded-full px-8">
            <a href="/contact">Связаться с нами</a>
          </Button>
        </div>
      </section>
    </div>
  )
}

