import React from 'react';
import { Lock, Users, Globe, X, Eye, UserCheck, Shield } from 'lucide-react';
import { SharingSettings } from '../types';

interface ShareSettingsProps {
  sharing: SharingSettings;
  onSharingChange: (sharing: SharingSettings) => void;
  onClose: () => void;
}

const ShareSettings: React.FC<ShareSettingsProps> = ({ sharing, onSharingChange, onClose }) => {
  const sharingOptions = [
    {
      type: 'private' as const,
      icon: Lock,
      title: 'Private',
      description: 'Only you can see this post',
      detailedDescription: 'This post will be visible only to you. It won\'t appear in any feeds or search results.',
      color: 'text-gray-600 dark:text-gray-400',
      bgColor: 'bg-gray-50 dark:bg-gray-700',
      borderColor: 'border-gray-200 dark:border-gray-600'
    },
    {
      type: 'groups' as const,
      icon: Users,
      title: 'Groups',
      description: 'Share with specific groups',
      detailedDescription: 'This post will be visible to members of the groups you select.',
      color: 'text-gray-600 dark:text-gray-400',
      bgColor: 'bg-gray-50 dark:bg-gray-700',
      borderColor: 'border-gray-200 dark:border-gray-600'
    },
    {
      type: 'public' as const,
      icon: Globe,
      title: 'Public',
      description: 'Anyone can see this post',
      detailedDescription: 'This post will be visible to everyone and may appear in public feeds and search results.',
      color: 'text-gray-600 dark:text-gray-400',
      bgColor: 'bg-gray-50 dark:bg-gray-700',
      borderColor: 'border-gray-200 dark:border-gray-600'
    }
  ];

  const handleOptionSelect = (option: typeof sharingOptions[0]) => {
    onSharingChange({ 
      type: option.type, 
      description: option.description 
    });
  };

  return (
    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-4">
      <div className="flex items-center justify-between mb-4">
        <h4 className="font-semibold text-gray-900 dark:text-white flex items-center space-x-2">
          <Shield size={18} className="text-gray-600 dark:text-gray-400" />
          <span>Post Privacy</span>
        </h4>
        <button
          onClick={onClose}
          className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
        >
          <X size={18} />
        </button>
      </div>

      <div className="space-y-3">
        {sharingOptions.map((option) => {
          const Icon = option.icon;
          const isSelected = sharing.type === option.type;
          
          return (
            <button
              key={option.type}
              onClick={() => handleOptionSelect(option)}
              className={`w-full flex items-start space-x-3 p-4 rounded-lg transition-all border-2 ${
                isSelected
                  ? `${option.bgColor} ${option.borderColor}`
                  : 'hover:bg-gray-50 dark:hover:bg-gray-700 border-transparent hover:border-gray-200 dark:hover:border-gray-600'
              }`}
            >
              <Icon size={20} className={option.color} />
              <div className="flex-1 text-left">
                <div className="font-medium text-gray-900 dark:text-white flex items-center space-x-2">
                  <span>{option.title}</span>
                  {isSelected && (
                    <div className="w-2 h-2 rounded-full bg-gray-600 dark:bg-gray-400"></div>
                  )}
                </div>
                <div className="text-sm text-gray-500 dark:text-gray-400 mt-1">{option.description}</div>
                <div className="text-xs text-gray-400 dark:text-gray-500 mt-2">{option.detailedDescription}</div>
              </div>
              <div className="flex items-center space-x-1 text-xs text-gray-400 dark:text-gray-500">
                <Eye size={14} />
                <span>
                  {option.type === 'private' && 'Only you'}
                  {option.type === 'groups' && 'Group members'}
                  {option.type === 'public' && 'Everyone'}
                </span>
              </div>
            </button>
          );
        })}
      </div>

      {sharing.type === 'groups' && (
        <div className="mt-4 p-4 bg-gray-100 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center space-x-2">
            <UserCheck size={16} className="text-gray-600 dark:text-gray-400" />
            <span>Select Groups</span>
          </label>
          <div className="space-y-2">
            {['Friends', 'Family', 'Work Colleagues', 'Photography Club'].map((group) => (
              <label key={group} className="flex items-center space-x-3 p-2 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors">
                <input
                  type="checkbox"
                  className="rounded border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 focus:ring-gray-500 dark:focus:ring-gray-400"
                />
                <span className="text-sm text-gray-700 dark:text-gray-300">{group}</span>
                <span className="text-xs text-gray-500 dark:text-gray-400 ml-auto">
                  {Math.floor(Math.random() * 50) + 10} members
                </span>
              </label>
            ))}
          </div>
        </div>
      )}

      <div className="mt-4 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
        <div className="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
          <Shield size={14} />
          <span>Your privacy settings can be changed after posting</span>
        </div>
      </div>
    </div>
  );
};

export default ShareSettings;