import { Avatar, AvatarFallback, AvatarImage } from '@/shared/ui/avatar';
import { Badge } from '@/shared/ui/badge';
import { Button } from '@/shared/ui/button';
import { Card, CardContent } from '@/shared/ui/card';
import { Input } from '@/shared/ui/input';
import { Label } from '@/shared/ui/label';
import { Switch } from '@/shared/ui/switch';
import {
  Bell,
  Camera,
  ChevronDown,
  ChevronRight,
  CreditCard,
  Edit3,
  Globe,
  Moon,
  Plus,
  Settings,
  Shield,
  User,
} from 'lucide-react';
import { user } from '../lib/data';

const Setting = () => {
  return (
    <div>
      <h2 className="text-xl md:text-2xl font-bold text-foreground mb-4 md:mb-6">
        Sozlamalar
      </h2>

      <Card className="border-0 shadow-sm mb-4 md:mb-6">
        <CardContent className="p-4 md:p-6">
          <h3 className="font-semibold text-foreground mb-4 flex items-center gap-2 text-sm md:text-base">
            <User className="w-4 h-4 md:w-5 md:h-5" />
            {"Shaxsiy ma'lumotlar"}
          </h3>
          <div className="flex flex-col md:flex-row items-center gap-4 md:gap-6 mb-4 md:mb-6">
            <div className="relative">
              <Avatar className="w-16 h-16 md:w-20 md:h-20">
                <AvatarImage
                  src={user.avatar || '/placeholder.svg'}
                  alt={user.phone}
                />
                <AvatarFallback className="bg-emerald-500 text-white text-lg md:text-xl">
                  U
                </AvatarFallback>
              </Avatar>
              <Button
                size="icon"
                className="absolute -bottom-1 -right-1 w-7 h-7 md:w-8 md:h-8 rounded-full bg-emerald-500 hover:bg-emerald-600"
              >
                <Camera className="w-3 h-3 md:w-4 md:h-4 text-white" />
              </Button>
            </div>
            <div className="text-center md:text-left">
              <p className="text-xs md:text-sm text-muted-foreground">
                {"A'zo"}: {user.memberSince}
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
            <div className="space-y-1.5 md:space-y-2">
              <Label htmlFor="phone" className="text-xs md:text-sm">
                Telefon raqam
              </Label>
              <Input
                id="phone"
                defaultValue={user.phone}
                className="bg-slate-50 h-9 md:h-10 text-sm"
              />
            </div>
            <div className="space-y-1.5 md:space-y-2">
              <Label htmlFor="email" className="text-xs md:text-sm">
                Email
              </Label>
              <Input
                id="email"
                defaultValue={user.email}
                className="bg-slate-50 h-9 md:h-10 text-sm"
              />
            </div>
            <div className="space-y-1.5 md:space-y-2">
              <Label htmlFor="birthdate" className="text-xs md:text-sm">
                {"Tug'ilgan sana"}
              </Label>
              <Input
                id="birthdate"
                type="date"
                defaultValue={user.birthDate}
                className="bg-slate-50 h-9 md:h-10 text-sm"
              />
            </div>
          </div>

          <Button className="mt-4 bg-emerald-500 hover:bg-emerald-600 h-9 md:h-10 text-sm w-full md:w-auto">
            <Edit3 className="w-4 h-4 mr-2" />
            Saqlash
          </Button>
        </CardContent>
      </Card>

      <Card className="border-0 shadow-sm mb-4 md:mb-6">
        <CardContent className="p-4 md:p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="font-semibold text-foreground flex items-center gap-2 text-sm md:text-base">
              <CreditCard className="w-4 h-4 md:w-5 md:h-5" />
              {"To'lov usullari"}
            </h3>
            <Button
              variant="outline"
              size="sm"
              className="bg-transparent gap-1 md:gap-2 h-8 text-xs md:text-sm"
            >
              <Plus className="w-3 h-3 md:w-4 md:h-4" />
              {"Qo'shish"}
            </Button>
          </div>
          <div className="flex items-center justify-between p-3 md:p-4 rounded-xl bg-gradient-to-r from-slate-800 to-slate-900 text-white">
            <div className="flex items-center gap-2 md:gap-3">
              <div className="w-10 h-6 md:w-12 md:h-8 bg-amber-400 rounded flex items-center justify-center text-slate-900 font-bold text-[10px] md:text-xs">
                VISA
              </div>
              <div>
                <p className="font-medium text-xs md:text-sm">
                  •••• •••• •••• 4532
                </p>
                <p className="text-[10px] md:text-sm text-slate-400">12/26</p>
              </div>
            </div>
            <Badge className="bg-emerald-500/20 text-emerald-400 border-0 text-[10px] md:text-xs">
              Asosiy
            </Badge>
          </div>
        </CardContent>
      </Card>

      <Card className="border-0 shadow-sm mb-4 md:mb-6">
        <CardContent className="p-4 md:p-6">
          <h3 className="font-semibold text-foreground mb-4 flex items-center gap-2 text-sm md:text-base">
            <Settings className="w-4 h-4 md:w-5 md:h-5" />
            Ilova sozlamalari
          </h3>
          <div className="space-y-3 md:space-y-4">
            <div className="flex items-center justify-between py-2 md:py-3 border-b border-slate-100">
              <div className="flex items-center gap-2 md:gap-3">
                <Bell className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
                <div>
                  <p className="font-medium text-foreground text-sm">
                    Bildirishnomalar
                  </p>
                  <p className="text-xs text-muted-foreground">Push xabarlar</p>
                </div>
              </div>
              <Switch defaultChecked />
            </div>
            <div className="flex items-center justify-between py-2 md:py-3 border-b border-slate-100">
              <div className="flex items-center gap-2 md:gap-3">
                <Moon className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
                <div>
                  <p className="font-medium text-foreground text-sm">
                    {"Qorong'u rejim"}
                  </p>
                  <p className="text-xs text-muted-foreground">Tungi rejim</p>
                </div>
              </div>
              <Switch />
            </div>
            <div className="flex items-center justify-between py-2 md:py-3 border-b border-slate-100">
              <div className="flex items-center gap-2 md:gap-3">
                <Globe className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
                <div>
                  <p className="font-medium text-foreground text-sm">Til</p>
                  <p className="text-xs text-muted-foreground">Ilova tili</p>
                </div>
              </div>
              <Button
                variant="outline"
                size="sm"
                className="bg-transparent gap-1 h-8 text-xs"
              >
                {"O'zbek"} <ChevronDown className="w-3 h-3" />
              </Button>
            </div>
            <div className="flex items-center justify-between py-2 md:py-3">
              <div className="flex items-center gap-2 md:gap-3">
                <Shield className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
                <div>
                  <p className="font-medium text-foreground text-sm">
                    Xavfsizlik
                  </p>
                  <p className="text-xs text-muted-foreground">
                    {"Parolni o'zgartirish"}
                  </p>
                </div>
              </div>
              <ChevronRight className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Danger Zone */}
      <Card className="border-0 shadow-sm border-red-100">
        <CardContent className="p-4 md:p-6">
          <h3 className="font-semibold text-red-600 mb-3 md:mb-4 text-sm md:text-base">
            Xavfli zona
          </h3>
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
            <div>
              <p className="font-medium text-foreground text-sm">
                {"Hisobni o'chirish"}
              </p>
              <p className="text-xs text-muted-foreground">
                {"Barcha ma'lumotlar o'chiriladi"}
              </p>
            </div>
            <Button
              variant="outline"
              className="border-red-200 text-red-600 hover:bg-red-50 hover:text-red-700 bg-transparent h-9 text-sm w-full md:w-auto"
            >
              {"O'chirish"}
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default Setting;
