import { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { Save } from 'lucide-react';
import { SharingPermissions } from './SharingPermissions';
import { SharingOptions } from './SharingOptions';
import { toast } from 'sonner';

interface SharingConfigData {
  spectatorPermission: string;
  linkSharingPermission: string;
  requirePassword: boolean;
  allowExternalSharing: boolean;
}

export function SharingConfig() {
  const [config, setConfig] = useState<SharingConfigData>({
    spectatorPermission: 'Initiator & Approver',
    linkSharingPermission: 'Admin & Initiator',
    requirePassword: true,
    allowExternalSharing: false
  });

  const handleSave = () => {
    // TODO: Implement API call to save sharing configuration
    toast.success('Sharing policy saved successfully');
  };

  const updateConfig = (updates: Partial<SharingConfigData>) => {
    setConfig(prev => ({ ...prev, ...updates }));
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Workflow Sharing Policy</CardTitle>
        <CardDescription>
          Control who can add spectators and share workflow links
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <SharingPermissions
          spectatorPermission={config.spectatorPermission}
          linkSharingPermission={config.linkSharingPermission}
          onSpectatorPermissionChange={(permission) => updateConfig({ spectatorPermission: permission })}
          onLinkSharingPermissionChange={(permission) => updateConfig({ linkSharingPermission: permission })}
        />

        <Separator />

        <SharingOptions
          requirePassword={config.requirePassword}
          allowExternalSharing={config.allowExternalSharing}
          onRequirePasswordChange={(enabled) => updateConfig({ requirePassword: enabled })}
          onAllowExternalSharingChange={(enabled) => updateConfig({ allowExternalSharing: enabled })}
        />

        <Button onClick={handleSave} className="bg-re-green hover:bg-re-green/90">
          <Save className="w-4 h-4 mr-2" />
          Save Sharing Policy
        </Button>
      </CardContent>
    </Card>
  );
}