import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { ArrowLeft, Globe, FileUp, DatabaseIcon, Plus, Trash2, BrainCircuit } from "lucide-react"
import Link from "next/link"
import PageHeader from "@/components/page-header"
import { Badge } from "@/components/ui/badge"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Switch } from "@/components/ui/switch"

export default function CreatePipelinePage() {
  return (
    <div className="container mx-auto p-6">
      <PageHeader
        title="Create Data Pipeline"
        description="Set up a new automated data collection pipeline"
        breadcrumb={[
          { title: "Home", href: "/" },
          { title: "Data Pipeline", href: "/data-pipeline" },
          { title: "Create", href: "/data-pipeline/create" },
        ]}
      />

      <div className="mt-6">
        <Link href="/data-pipeline">
          <Button variant="outline" className="mb-6">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Pipelines
          </Button>
        </Link>

        <div className="grid gap-6 md:grid-cols-2">
          <div>
            <Card className="border-2 hover:border-highlight-border transition-all duration-200">
              <CardHeader>
                <CardTitle>Pipeline Details</CardTitle>
                <CardDescription>Basic information about your data pipeline</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="name">Pipeline Name</Label>
                    <Input id="name" placeholder="e.g., Property Listings Pipeline" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="description">Description</Label>
                    <Textarea
                      id="description"
                      placeholder="Describe what this pipeline collects and how it will be used"
                      rows={4}
                    />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="tags">Tags (optional)</Label>
                    <Input id="tags" placeholder="e.g., real-estate, properties, listings" />
                    <p className="text-xs text-muted-foreground mt-1">Separate tags with commas</p>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="mt-6 border-2 hover:border-highlight-border transition-all duration-200">
              <CardHeader>
                <div>
                  <CardTitle className="text-lg flex items-center">
                    <BrainCircuit className="mr-2 h-5 w-5 text-primary" />
                    AI Assistant
                  </CardTitle>
                  <CardDescription>Customize how AI processes your data</CardDescription>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="ai-prompt">Additional Instructions for AI</Label>
                    <Textarea
                      id="ai-prompt"
                      placeholder="E.g., Focus on extracting pricing trends, ignore promotional content, prioritize property features..."
                      rows={4}
                      className="border-primary/20"
                    />
                    <p className="text-xs text-muted-foreground mt-1">
                      Provide specific instructions to guide the AI in processing your data sources
                    </p>
                  </div>

                  <div className="space-y-3 pt-2">
                    <div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label htmlFor="detect-fields">Auto-detect common fields</Label>
                        <p className="text-xs text-muted-foreground">Automatically identify price, location, etc.</p>
                      </div>
                      <Switch id="detect-fields" defaultChecked />
                    </div>

                    <div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label htmlFor="suggest-mappings">Suggest field mappings</Label>
                        <p className="text-xs text-muted-foreground">
                          Get AI suggestions for matching fields across sources
                        </p>
                      </div>
                      <Switch id="suggest-mappings" defaultChecked />
                    </div>

                    <div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label htmlFor="deduplicate">Deduplicate records</Label>
                        <p className="text-xs text-muted-foreground">Remove duplicate entries automatically</p>
                      </div>
                      <Switch id="deduplicate" defaultChecked />
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          <div>
            <Card className="border-2 hover:border-highlight-border transition-all duration-200">
              <CardHeader>
                <CardTitle>Data Sources</CardTitle>
                <CardDescription>Add one or more data sources to your pipeline</CardDescription>
              </CardHeader>
              <CardContent>
                <Accordion type="single" collapsible className="w-full" defaultValue="source-1">
                  <AccordionItem value="source-1" className="border rounded-md mb-4 data-source-card active">
                    <AccordionTrigger className="px-4">
                      <div className="flex items-center">
                        <Globe className="mr-2 h-5 w-5 text-primary" />
                        <span>Website Source #1</span>
                      </div>
                    </AccordionTrigger>
                    <AccordionContent className="px-4 pb-4">
                      <div className="space-y-4">
                        <div className="space-y-2">
                          <Label htmlFor="url-1">Website URL</Label>
                          <Input id="url-1" placeholder="https://example.com/listings" />
                        </div>

                        <div className="space-y-2">
                          <div className="flex items-center justify-between">
                            <Label htmlFor="additional-urls-1">Additional URLs (optional)</Label>
                            <Badge variant="outline" className="text-xs">
                              Pattern Detection
                            </Badge>
                          </div>
                          <Textarea
                            id="additional-urls-1"
                            placeholder="https://example.com/listings/page2&#10;https://example.com/listings/page3"
                            rows={3}
                          />
                          <p className="text-xs text-muted-foreground mt-1">
                            Add multiple URLs from the same website (one per line)
                          </p>
                        </div>

                        <div className="flex justify-end">
                          <Button variant="outline" size="sm" className="text-destructive">
                            <Trash2 className="mr-2 h-4 w-4" />
                            Remove Source
                          </Button>
                        </div>
                      </div>
                    </AccordionContent>
                  </AccordionItem>

                  <AccordionItem value="source-2" className="border rounded-md mb-4 data-source-card">
                    <AccordionTrigger className="px-4">
                      <div className="flex items-center">
                        <FileUp className="mr-2 h-5 w-5 text-primary" />
                        <span>File Upload Source #1</span>
                      </div>
                    </AccordionTrigger>
                    <AccordionContent className="px-4 pb-4">
                      <div className="space-y-4">
                        <div className="space-y-2">
                          <Label htmlFor="file-upload-1">Upload File</Label>
                          <div className="flex items-center justify-center p-6 border-2 border-dashed rounded-lg">
                            <div className="text-center">
                              <p className="text-sm text-muted-foreground">
                                Drag and drop your file here, or click to browse
                              </p>
                              <Button variant="outline" className="mt-2">
                                Select File
                              </Button>
                            </div>
                          </div>
                          <p className="text-xs text-muted-foreground mt-1">
                            Supported formats: CSV, JSON, Excel, XML (up to 50MB)
                          </p>
                        </div>

                        <div className="flex justify-end">
                          <Button variant="outline" size="sm" className="text-destructive">
                            <Trash2 className="mr-2 h-4 w-4" />
                            Remove Source
                          </Button>
                        </div>
                      </div>
                    </AccordionContent>
                  </AccordionItem>

                  <AccordionItem value="source-3" className="border rounded-md mb-4 data-source-card">
                    <AccordionTrigger className="px-4">
                      <div className="flex items-center">
                        <DatabaseIcon className="mr-2 h-5 w-5 text-primary" />
                        <span>API Source #1</span>
                      </div>
                    </AccordionTrigger>
                    <AccordionContent className="px-4 pb-4">
                      <div className="space-y-4">
                        <div className="space-y-2">
                          <Label htmlFor="api-url-1">API Endpoint URL</Label>
                          <Input id="api-url-1" placeholder="https://api.example.com/data" />
                        </div>

                        <div className="space-y-2">
                          <Label htmlFor="auth-type-1">Authentication Type</Label>
                          <select
                            id="auth-type-1"
                            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                          >
                            <option value="none">None</option>
                            <option value="basic">Basic Auth</option>
                            <option value="bearer">Bearer Token</option>
                            <option value="api-key">API Key</option>
                          </select>
                        </div>

                        <div className="flex justify-end">
                          <Button variant="outline" size="sm" className="text-destructive">
                            <Trash2 className="mr-2 h-4 w-4" />
                            Remove Source
                          </Button>
                        </div>
                      </div>
                    </AccordionContent>
                  </AccordionItem>
                </Accordion>

                <div className="flex flex-col gap-2 mt-4">
                  <Button variant="outline" className="w-full justify-start gap-2">
                    <Plus className="h-4 w-4" />
                    Add Website Source
                  </Button>
                  <Button variant="outline" className="w-full justify-start gap-2">
                    <Plus className="h-4 w-4" />
                    Add File Upload Source
                  </Button>
                  <Button variant="outline" className="w-full justify-start gap-2">
                    <Plus className="h-4 w-4" />
                    Add API Source
                  </Button>
                </div>
              </CardContent>
            </Card>

            <Card className="mt-6 border-2 hover:border-highlight-border transition-all duration-200">
              <CardHeader>
                <CardTitle>Schedule & Automation</CardTitle>
                <CardDescription>Configure when and how your pipeline should run</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid gap-6 md:grid-cols-2">
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="frequency">Run Frequency</Label>
                      <select
                        id="frequency"
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                      >
                        <option value="manual">Manual (Run on demand)</option>
                        <option value="hourly">Hourly</option>
                        <option value="daily">Daily</option>
                        <option value="weekly">Weekly</option>
                        <option value="monthly">Monthly</option>
                        <option value="custom">Custom Schedule</option>
                      </select>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="timezone">Timezone</Label>
                      <select
                        id="timezone"
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                      >
                        <option value="utc">UTC</option>
                        <option value="est">Eastern Time (ET)</option>
                        <option value="cst">Central Time (CT)</option>
                        <option value="mst">Mountain Time (MT)</option>
                        <option value="pst">Pacific Time (PT)</option>
                      </select>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="max-records">Collection Limits</Label>
                      <div className="space-y-3">
                        <div className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            id="limit-records"
                            className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
                          />
                          <div className="flex-1">
                            <Label htmlFor="limit-records" className="text-sm font-normal">
                              Limit total records
                            </Label>
                            <Input id="max-records" type="number" placeholder="e.g., 1000" className="mt-1" />
                          </div>
                        </div>

                        <div className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            id="stop-no-new"
                            className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
                          />
                          <Label htmlFor="stop-no-new" className="text-sm font-normal">
                            Stop when no new records found
                          </Label>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="notifications">Notifications</Label>
                      <div className="space-y-2">
                        <div className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            id="notify-complete"
                            className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
                            defaultChecked
                          />
                          <Label htmlFor="notify-complete" className="text-sm font-normal">
                            Notify when pipeline completes
                          </Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            id="notify-error"
                            className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
                            defaultChecked
                          />
                          <Label htmlFor="notify-error" className="text-sm font-normal">
                            Notify on errors
                          </Label>
                        </div>
                        <div className="mt-2">
                          <Input id="email" type="email" placeholder="Email for notifications" />
                        </div>
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="retry-settings">Retry Settings</Label>
                      <div className="space-y-3">
                        <div className="flex items-center justify-between">
                          <Label htmlFor="retry-attempts" className="text-sm font-normal">
                            Retry Attempts
                          </Label>
                          <Input
                            id="retry-attempts"
                            type="number"
                            placeholder="e.g., 3"
                            defaultValue="3"
                            className="w-24"
                          />
                        </div>
                        <div className="flex items-center justify-between">
                          <Label htmlFor="retry-delay" className="text-sm font-normal">
                            Delay Between Retries (minutes)
                          </Label>
                          <Input
                            id="retry-delay"
                            type="number"
                            placeholder="e.g., 5"
                            defaultValue="5"
                            className="w-24"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>

        <div className="mt-6 flex justify-end space-x-4">
          <Button variant="outline">Save as Draft</Button>
          <Button>Create Pipeline</Button>
        </div>
      </div>
    </div>
  )
}