gridpilot.gg/apps/website/templates/SponsorSettingsTemplate.tsx

import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Container } from '@/ui/Container';
import { FormField } from '@/ui/FormField';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Input } from '@/ui/Input';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Toggle } from '@/ui/Toggle';
import {
  AlertCircle,
  Bell,
  Building2,
  RefreshCw,
  Save
} from 'lucide-react';
import React from 'react';

export interface SponsorSettingsViewData {
  profile: {
    companyName: string;
    contactName: string;
    contactEmail: string;
    description: string;
    industry: string;
  };
  notifications: {
    emailNewSponsorships: boolean;
    emailWeeklyReport: boolean;
    emailPaymentAlerts: boolean;
  };
  privacy: {
    publicProfile: boolean;
    showStats: boolean;
    showActiveSponsorships: boolean;
    allowDirectContact: boolean;
  };
}

interface SponsorSettingsTemplateProps {
  viewData: SponsorSettingsViewData;
  profile: {
    companyName: string;
    contactName: string;
    contactEmail: string;
    description: string;
    industry: string;
  };
  setProfile: (profile: {
    companyName: string;
    contactName: string;
    contactEmail: string;
    description: string;
    industry: string;
  }) => void;
  notifications: {
    emailNewSponsorships: boolean;
    emailWeeklyReport: boolean;
    emailPaymentAlerts: boolean;
  };
  setNotifications: (notifications: {
    emailNewSponsorships: boolean;
    emailWeeklyReport: boolean;
    emailPaymentAlerts: boolean;
  }) => void;
  onSaveProfile: () => void | Promise<void>;
  onDeleteAccount: () => void | Promise<void>;
  saving: boolean;
  saved: boolean;
}

export function SponsorSettingsTemplate({
  profile,
  setProfile,
  notifications,
  setNotifications,
  onSaveProfile,
  onDeleteAccount,
  saving,
}: SponsorSettingsTemplateProps) {
  return (
    <Container size="md" spacing="md">
      <Stack gap={8}>
        <SponsorDashboardHeader 
          sponsorName={profile.companyName} 
          onRefresh={() => console.log('Refresh')} 
        />

        <Stack gap={6}>
          {/* Company Profile */}
          <Card>
            <Stack gap={6}>
              <Heading level={3} icon={<Icon icon={Building2} size={5} color="text-primary-blue" />}>
                Company Profile
              </Heading>
              
              <Box display="grid" gridCols={{ base: 1, md: 2 }} gap={6}>
                <FormField label="Company Name" required>
                  <Input 
                    value={profile.companyName} 
                    onChange={(e) => setProfile({ ...profile, companyName: e.target.value })}
                  />
                </FormField>
                <FormField label="Industry">
                  <Input 
                    value={profile.industry} 
                    onChange={(e) => setProfile({ ...profile, industry: e.target.value })}
                  />
                </FormField>
                <FormField label="Contact Name" required>
                  <Input 
                    value={profile.contactName} 
                    onChange={(e) => setProfile({ ...profile, contactName: e.target.value })}
                  />
                </FormField>
                <FormField label="Contact Email" required>
                  <Input 
                    value={profile.contactEmail} 
                    onChange={(e) => setProfile({ ...profile, contactEmail: e.target.value })}
                  />
                </FormField>
              </Box>

              <FormField label="Company Description">
                <Box 
                  as="textarea" 
                  rows={4}
                  value={profile.description}
                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setProfile({ ...profile, description: e.target.value })}
                  w="full"
                  p={3}
                  rounded="lg"
                  border
                  borderColor="border-charcoal-outline"
                  bg="bg-iron-gray/50"
                  color="text-white"
                  outline="none"
                  focusBorderColor="border-primary-blue"
                />
              </FormField>

              <Box display="flex" justifyContent="end">
                <Button 
                  variant="primary" 
                  onClick={onSaveProfile} 
                  disabled={saving}
                  icon={<Icon icon={saving ? RefreshCw : Save} size={4} animate={saving ? 'spin' : undefined} />}
                >
                  {saving ? 'Saving...' : 'Save Changes'}
                </Button>
              </Box>
            </Stack>
          </Card>

          {/* Notifications */}
          <Card>
            <Stack gap={6}>
              <Heading level={3} icon={<Icon icon={Bell} size={5} color="text-warning-amber" />}>
                Notifications
              </Heading>
              <Stack gap={4}>
                <Toggle 
                  label="Sponsorship Approvals" 
                  description="Receive confirmation when your sponsorship requests are approved"
                  checked={notifications.emailNewSponsorships}
                  onChange={(checked) => setNotifications({ ...notifications, emailNewSponsorships: checked })}
                />
                <Toggle 
                  label="Weekly Analytics Report" 
                  description="Get a weekly summary of your sponsorship performance"
                  checked={notifications.emailWeeklyReport}
                  onChange={(checked) => setNotifications({ ...notifications, emailWeeklyReport: checked })}
                />
                <Toggle 
                  label="Payment & Invoice Notifications" 
                  description="Receive invoices and payment confirmations"
                  checked={notifications.emailPaymentAlerts}
                  onChange={(checked) => setNotifications({ ...notifications, emailPaymentAlerts: checked })}
                />
              </Stack>
            </Stack>
          </Card>

          {/* Danger Zone */}
          <Card border borderColor="border-racing-red/30">
            <Stack gap={6}>
              <Heading level={3} intent="critical" icon={<Icon icon={AlertCircle} size={5} />}>
                Danger Zone
              </Heading>
              <Box display="flex" alignItems="center" justifyContent="between">
                <Box>
                  <Text weight="medium" color="text-white" block>Delete Sponsor Account</Text>
                  <Text size="sm" color="text-gray-500">Permanently remove your account and all data.</Text>
                </Box>
                <Button variant="danger" onClick={onDeleteAccount}>
                  Delete Account
                </Button>
              </Box>
            </Stack>
          </Card>
        </Stack>
      </Stack>
    </Container>
  );
}