"use client";
import React, { useState } from "react";
import {
  Bell,
  Shield,
  CreditCard,
  MapPin,
  Globe,
  Moon,
  ChevronRight,
  ToggleRight,
  ToggleLeft,
} from "lucide-react";

interface ToggleRowProps {
  label: string;
  description?: string;
  value: boolean;
  onChange: (v: boolean) => void;
}

function ToggleRow({ label, description, value, onChange }: ToggleRowProps) {
  return (
    <div className="flex items-center justify-between py-3 px-4">
      <div>
        <p
          className="text-sm font-medium"
          style={{ color: "var(--text-primary)" }}
        >
          {label}
        </p>
        {description && (
          <p className="text-xs mt-0.5" style={{ color: "var(--text-muted)" }}>
            {description}
          </p>
        )}
      </div>
      <button onClick={() => onChange(!value)}>
        {value ? (
          <ToggleRight size={24} style={{ color: "var(--accent)" }} />
        ) : (
          <ToggleLeft size={24} style={{ color: "var(--text-muted)" }} />
        )}
      </button>
    </div>
  );
}

interface LinkRowProps {
  label: string;
  href?: string;
  icon: React.ElementType;
}

function LinkRow({ label, icon: Icon }: LinkRowProps) {
  return (
    <button className="w-full flex items-center gap-3 py-3 px-4 hover:opacity-80 transition-opacity">
      <Icon size={16} style={{ color: "var(--text-muted)" }} />
      <span
        className="flex-1 text-left text-sm"
        style={{ color: "var(--text-primary)" }}
      >
        {label}
      </span>
      <ChevronRight size={14} style={{ color: "var(--text-muted)" }} />
    </button>
  );
}

export function MarketplaceSettings() {
  const [notifications, setNotifications] = useState({
    orders: true,
    messages: true,
    promotions: false,
    priceDrops: true,
  });

  const [privacy, setPrivacy] = useState({
    showProfile: true,
    showReviews: true,
  });

  const sectionStyle: React.CSSProperties = {
    background: "var(--card)",
    border: "1px solid var(--border)",
    borderRadius: "1rem",
    overflow: "hidden",
    marginBottom: "1rem",
  };

  const dividerStyle: React.CSSProperties = {
    borderTop: "1px solid var(--border)",
  };

  return (
    <div className="p-4 md:p-6 max-w-6xl mx-auto">
      <div className="mb-6">
        <h1
          className="text-xl font-bold"
          style={{ color: "var(--text-primary)" }}
        >
          Settings
        </h1>
      </div>

      {/* Notifications */}
      <p
        className="text-xs font-semibold uppercase tracking-wider mb-2 px-1"
        style={{ color: "var(--text-muted)" }}
      >
        Notifications
      </p>
      <div style={sectionStyle}>
        <ToggleRow
          label="Order Updates"
          value={notifications.orders}
          onChange={(v) => setNotifications((p) => ({ ...p, orders: v }))}
        />
        <div style={dividerStyle}>
          <ToggleRow
            label="New Messages"
            value={notifications.messages}
            onChange={(v) => setNotifications((p) => ({ ...p, messages: v }))}
          />
        </div>
        <div style={dividerStyle}>
          <ToggleRow
            label="Price Drop Alerts"
            description="Get notified when wishlisted items drop in price"
            value={notifications.priceDrops}
            onChange={(v) => setNotifications((p) => ({ ...p, priceDrops: v }))}
          />
        </div>
        <div style={dividerStyle}>
          <ToggleRow
            label="Promotions & Offers"
            value={notifications.promotions}
            onChange={(v) => setNotifications((p) => ({ ...p, promotions: v }))}
          />
        </div>
      </div>

      {/* Privacy */}
      <p
        className="text-xs font-semibold uppercase tracking-wider mb-2 px-1"
        style={{ color: "var(--text-muted)" }}
      >
        Privacy
      </p>
      <div style={sectionStyle}>
        <ToggleRow
          label="Show Profile Publicly"
          value={privacy.showProfile}
          onChange={(v) => setPrivacy((p) => ({ ...p, showProfile: v }))}
        />
        <div style={dividerStyle}>
          <ToggleRow
            label="Show Reviews Publicly"
            value={privacy.showReviews}
            onChange={(v) => setPrivacy((p) => ({ ...p, showReviews: v }))}
          />
        </div>
      </div>

      {/* Account */}
      {/* <p className="text-xs font-semibold uppercase tracking-wider mb-2 px-1" style={{ color: "var(--text-muted)" }}>
        Account
      </p>
      <div style={sectionStyle}>
        <LinkRow label="Payment Methods" icon={CreditCard} />
        <div style={dividerStyle}>
          <LinkRow label="Saved Addresses" icon={MapPin} />
        </div>
        <div style={dividerStyle}>
          <LinkRow label="Language & Region" icon={Globe} />
        </div>
        <div style={dividerStyle}>
          <LinkRow label="Security & Privacy" icon={Shield} />
        </div>
      </div> */}

      {/* Danger zone */}
      {/* <button
        className="w-full mt-2 py-3 rounded-2xl text-sm font-medium"
        style={{
          color: "#ef4444",
          background: "#ef444410",
          border: "1px solid #ef444430",
        }}
      >
        Delete Account
      </button> */}
    </div>
  );
}