/**
 * ConfigureView.tsx
 * 
 * This component displays configuration options for deployment.
 * It includes settings for deployment URL, environment variables, and other options.
 * 
 * Implementation:
 * 1. Display form sections for various configuration options
 * 2. Include input fields for deployment URL
 * 3. Add environment variables section
 * 4. Include deployment options (number of instances, etc.)
 * 5. Add navigation controls
 */

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { ArrowLeft, ArrowRight, Plus, Settings } from 'lucide-react';
import React, { useState } from 'react';
import useNavigationStore, { OnboardingStep } from '../store/navigationStore';

const ConfigureView: React.FC = () => {
  const [deploymentUrl, setDeploymentUrl] = useState('');
  const [maxDeployments, setMaxDeployments] = useState('');
  const [environmentTypes, setEnvironmentTypes] = useState({
    production: true,
    preview: true,
    development: false,
  });
  
  const { markStepCompleted, goToNextStep, goToPreviousStep } = useNavigationStore();

  const handleNext = () => {
    // In a real app, would validate inputs
    markStepCompleted(OnboardingStep.CONFIGURE);
    goToNextStep();
  };

  const toggleEnvironmentType = (type: 'production' | 'preview' | 'development') => {
    setEnvironmentTypes({
      ...environmentTypes,
      [type]: !environmentTypes[type],
    });
  };

  return (
    <div className="flex flex-col max-w-4xl mx-auto space-y-8">
      {/* Header */}
      <div className="text-center mb-6">
        <h1 className="text-3xl font-bold mb-2">Configure</h1>
        <p className="text-lg text-muted-foreground">
          Set the deployment URL for a single deployment or by creating a separate section for multiple deployments
        </p>
      </div>

      <div className="flex flex-col items-center">
        <div className="w-16 h-16 flex items-center justify-center rounded-full bg-primary/10 mb-4">
          <Settings size={32} className="text-primary" />
        </div>
        <h2 className="text-2xl font-semibold mb-4">Configure</h2>
      </div>

      {/* Configuration Form */}
      <Card>
        <CardHeader>
          <CardTitle>Deployment Settings</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Deployment URL */}
          <div className="space-y-2">
            <Label htmlFor="deployment-url">Deployment URL</Label>
            <Input 
              id="deployment-url" 
              placeholder="my-app.example.com" 
              value={deploymentUrl}
              onChange={(e) => setDeploymentUrl(e.target.value)}
            />
          </div>

          {/* Number of Deployments */}
          <div className="space-y-2">
            <Label htmlFor="max-deployments">Number of Deployments</Label>
            <Select value={maxDeployments} onValueChange={setMaxDeployments}>
              <SelectTrigger id="max-deployments">
                <SelectValue placeholder="Select" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1">1</SelectItem>
                <SelectItem value="2">2</SelectItem>
                <SelectItem value="3">3</SelectItem>
                <SelectItem value="4">4</SelectItem>
                <SelectItem value="5">5</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* Environment Variables */}
          <div className="space-y-2">
            <div className="flex justify-between items-center">
              <Label>Environment Variables</Label>
              <Button variant="ghost" size="sm">
                <Plus className="h-4 w-4 mr-1" />
                Add Variable
              </Button>
            </div>
            {/* Environment variables would be implemented here */}
          </div>

          {/* Environment Types */}
          <div className="space-y-2">
            <Label>Environment Types</Label>
            <div className="space-y-2">
              <div className="flex items-center space-x-2">
                <Checkbox 
                  id="production" 
                  checked={environmentTypes.production}
                  onCheckedChange={() => toggleEnvironmentType('production')}
                />
                <Label htmlFor="production" className="cursor-pointer">Production</Label>
              </div>
              
              <div className="flex items-center space-x-2">
                <Checkbox 
                  id="preview" 
                  checked={environmentTypes.preview}
                  onCheckedChange={() => toggleEnvironmentType('preview')}
                />
                <Label htmlFor="preview" className="cursor-pointer">Preview</Label>
              </div>
              
              <div className="flex items-center space-x-2">
                <Checkbox 
                  id="development" 
                  checked={environmentTypes.development}
                  onCheckedChange={() => toggleEnvironmentType('development')}
                />
                <Label htmlFor="development" className="cursor-pointer">Development</Label>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Navigation Buttons */}
      <div className="flex justify-between">
        <Button variant="outline" onClick={goToPreviousStep}>
          <ArrowLeft className="mr-2 h-4 w-4" />
          Previous
        </Button>
        
        <Button onClick={handleNext}>
          Next
          <ArrowRight className="ml-2 h-4 w-4" />
        </Button>
      </div>
    </div>
  );
};

export default ConfigureView;