'use client';

import { useState } from 'react';

interface PrivacySetting {
  id: string;
  label: string;
  description: string;
  value: string;
  options: { value: string; label: string }[];
}

interface PrivacyFormProps {
  onSave?: (data: {
    privacySettings: PrivacySetting[];
    dataSettings: {
      shareAnalytics: boolean;
      personalizedAds: boolean;
      thirdPartySharing: boolean;
    };
  }) => void;
  onDeleteAccount?: () => void;
}

export function PrivacyForm({ onSave, onDeleteAccount }: PrivacyFormProps) {
  const [privacySettings, setPrivacySettings] = useState<PrivacySetting[]>([
    {
      id: 'profile_visibility',
      label: 'Profile Visibility',
      description: 'Control who can see your profile',
      value: 'public',
      options: [
        { value: 'public', label: 'Public' },
        { value: 'connections', label: 'Connections Only' },
        { value: 'private', label: 'Private' },
      ],
    },
    {
      id: 'contact_info',
      label: 'Contact Information',
      description: 'Control who can see your contact details',
      value: 'connections',
      options: [
        { value: 'public', label: 'Public' },
        { value: 'connections', label: 'Connections Only' },
        { value: 'private', label: 'Hidden' },
      ],
    },
    {
      id: 'activity_status',
      label: 'Activity Status',
      description: 'Show when you are active on the platform',
      value: 'public',
      options: [
        { value: 'public', label: 'Everyone' },
        { value: 'connections', label: 'Connections Only' },
        { value: 'private', label: 'No One' },
      ],
    },
  ]);

  const [dataSettings, setDataSettings] = useState({
    shareAnalytics: true,
    personalizedAds: false,
    thirdPartySharing: false,
  });

  const handlePrivacyChange = (id: string, value: string) => {
    setPrivacySettings((prev) =>
      prev.map((item) => (item.id === id ? { ...item, value } : item))
    );
  };

  const handleDataSettingChange = (key: keyof typeof dataSettings) => {
    setDataSettings((prev) => ({ ...prev, [key]: !prev[key] }));
  };

  const handleSave = () => {
    if (onSave) {
      onSave({ privacySettings, dataSettings });
    } else {
      console.log('Saving privacy settings:', { privacySettings, dataSettings });
    }
  };

  const handleDeleteAccount = () => {
    if (confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
      if (onDeleteAccount) {
        onDeleteAccount();
      } else {
        console.log('Deleting account');
      }
    }
  };

  const ToggleSwitch = ({
    enabled,
    onToggle,
  }: {
    enabled: boolean;
    onToggle: () => void;
  }) => (
    <button
      onClick={onToggle}
      className={`relative w-[44px] h-[24px] rounded-full transition-colors cursor-pointer ${
        enabled ? 'bg-[#e58625]' : 'bg-[#00293D]/20'
      }`}
    >
      <div
        className={`absolute top-[2px] w-[20px] h-[20px] rounded-full bg-white shadow transition-transform ${
          enabled ? 'translate-x-[22px]' : 'translate-x-[2px]'
        }`}
      />
    </button>
  );

  return (
    <>
      {/* Privacy Settings */}
      <div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
        <div className="mb-6">
          <h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
            Privacy Settings
          </h2>
          <p className="font-serif text-[12px] text-[#00293D]/60">
            Control your privacy and visibility preferences
          </p>
        </div>

        <div className="space-y-6">
          {privacySettings.map((item) => (
            <div
              key={item.id}
              className="pb-4 border-b border-[#00293d]/10 last:border-0"
            >
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <div>
                  <h3 className="font-serif font-medium text-[14px] text-[#00293D]">
                    {item.label}
                  </h3>
                  <p className="font-serif text-[12px] text-[#00293D]/60">
                    {item.description}
                  </p>
                </div>
                <select
                  value={item.value}
                  onChange={(e) => handlePrivacyChange(item.id, e.target.value)}
                  className="h-[36px] px-4 border border-[#00293D]/20 rounded-[10px] text-[13px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625] bg-white cursor-pointer"
                >
                  {item.options.map((option) => (
                    <option key={option.value} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Data & Personalization */}
      <div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
        <div className="mb-6">
          <h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
            Data & Personalization
          </h2>
          <p className="font-serif text-[12px] text-[#00293D]/60">
            Manage how your data is used
          </p>
        </div>

        <div className="space-y-4">
          <div className="flex items-center justify-between py-3 border-b border-[#00293d]/10">
            <div>
              <h3 className="font-serif font-medium text-[14px] text-[#00293D]">
                Share Analytics
              </h3>
              <p className="font-serif text-[12px] text-[#00293D]/60">
                Help improve our service by sharing usage data
              </p>
            </div>
            <ToggleSwitch
              enabled={dataSettings.shareAnalytics}
              onToggle={() => handleDataSettingChange('shareAnalytics')}
            />
          </div>

          <div className="flex items-center justify-between py-3 border-b border-[#00293d]/10">
            <div>
              <h3 className="font-serif font-medium text-[14px] text-[#00293D]">
                Personalized Ads
              </h3>
              <p className="font-serif text-[12px] text-[#00293D]/60">
                See ads tailored to your interests
              </p>
            </div>
            <ToggleSwitch
              enabled={dataSettings.personalizedAds}
              onToggle={() => handleDataSettingChange('personalizedAds')}
            />
          </div>

          <div className="flex items-center justify-between py-3">
            <div>
              <h3 className="font-serif font-medium text-[14px] text-[#00293D]">
                Third-Party Data Sharing
              </h3>
              <p className="font-serif text-[12px] text-[#00293D]/60">
                Allow sharing data with third-party partners
              </p>
            </div>
            <ToggleSwitch
              enabled={dataSettings.thirdPartySharing}
              onToggle={() => handleDataSettingChange('thirdPartySharing')}
            />
          </div>
        </div>
      </div>

      {/* Danger Zone */}
      <div className="border border-red-200 rounded-[15px] bg-red-50/50 p-6 mb-4">
        <div className="mb-4">
          <h2 className="font-fractul font-bold text-[16px] text-red-600 mb-2">
            Danger Zone
          </h2>
          <p className="font-serif text-[12px] text-red-600/70">
            Irreversible and destructive actions
          </p>
        </div>

        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
          <div>
            <h3 className="font-serif font-medium text-[14px] text-[#00293D]">
              Delete Account
            </h3>
            <p className="font-serif text-[12px] text-[#00293D]/60">
              Permanently delete your account and all data
            </p>
          </div>
          <button
            onClick={handleDeleteAccount}
            className="px-6 py-2 border border-red-500 text-red-500 rounded-[15px] font-serif text-[12px] hover:bg-red-50 transition-colors"
          >
            Delete Account
          </button>
        </div>
      </div>

      {/* Save Button */}
      <div className="flex justify-end">
        <button
          onClick={handleSave}
          className="px-8 py-3 bg-[#e58625] text-white rounded-[15px] font-fractul font-medium text-[14px] hover:bg-[#d47920] transition-colors"
        >
          Save Changes
        </button>
      </div>
    </>
  );
}
