/**
 * Shipment Tracking Form Settings Tab
 */

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 { TrackingSettings } from "../../types"
import { Layout, Palette, Code } from "lucide-react"

interface FormTabProps {
  settings: TrackingSettings
  updateSetting: <K extends keyof TrackingSettings>(key: K, value: TrackingSettings[K]) => void
}

export function FormTab({ settings, updateSetting }: FormTabProps) {
  return (
    <div className="grid gap-6 lg:grid-cols-2">
      {/* Left Column: Form Content + Form Styling */}
      <div className="space-y-6">
        {/* Form Content */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Layout className="h-5 w-5" />
              Form Content
            </CardTitle>
            <CardDescription>
              Customize the tracking form text and labels
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="form_title">Form Title</Label>
              <Input
                id="form_title"
                value={settings.form_title}
                onChange={(e) => updateSetting('form_title', e.target.value)}
                placeholder="Track Your Order"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="form_description">Form Description</Label>
              <Textarea
                id="form_description"
                value={settings.form_description}
                onChange={(e) => updateSetting('form_description', e.target.value)}
                placeholder="Enter your tracking number below..."
                rows={3}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="button_text">Button Text</Label>
              <Input
                id="button_text"
                value={settings.button_text}
                onChange={(e) => updateSetting('button_text', e.target.value)}
                placeholder="Track Shipment"
              />
            </div>
          </CardContent>
        </Card>

        {/* Form Styling */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Palette className="h-5 w-5" />
              Form Styling
            </CardTitle>
            <CardDescription>
              Customize colors and appearance
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="primary_color">Primary Color</Label>
              <div className="flex gap-2">
                <Input
                  id="primary_color"
                  type="color"
                  value={settings.primary_color}
                  onChange={(e) => updateSetting('primary_color', e.target.value)}
                  className="w-14 h-10 p-1"
                />
                <Input
                  value={settings.primary_color}
                  onChange={(e) => updateSetting('primary_color', e.target.value)}
                  placeholder="#2563eb"
                  className="flex-1"
                />
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="text_color">Text Color</Label>
              <div className="flex gap-2">
                <Input
                  id="text_color"
                  type="color"
                  value={settings.text_color}
                  onChange={(e) => updateSetting('text_color', e.target.value)}
                  className="w-14 h-10 p-1"
                />
                <Input
                  value={settings.text_color}
                  onChange={(e) => updateSetting('text_color', e.target.value)}
                  placeholder="#1f2937"
                  className="flex-1"
                />
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="background_color">Background Color</Label>
              <div className="flex gap-2">
                <Input
                  id="background_color"
                  type="color"
                  value={settings.background_color}
                  onChange={(e) => updateSetting('background_color', e.target.value)}
                  className="w-14 h-10 p-1"
                />
                <Input
                  value={settings.background_color}
                  onChange={(e) => updateSetting('background_color', e.target.value)}
                  placeholder="#f9fafb"
                  className="flex-1"
                />
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Shortcode */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Code className="h-5 w-5" />
              Shortcode
            </CardTitle>
            <CardDescription>
              Use this shortcode to display the tracking form on any page
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="p-4 bg-muted rounded-lg font-mono text-sm">
                [swift_commerce_tracking_form]
              </div>
              
              <div className="text-sm text-muted-foreground">
                <p className="font-medium text-foreground mb-2">Available attributes:</p>
                <ul className="space-y-1">
                  <li><code className="bg-muted px-1 rounded">show_order_field="yes"</code> - Show/hide order number field (yes/no)</li>
                  <li><code className="bg-muted px-1 rounded">show_email_field="yes"</code> - Show/hide email field (yes/no)</li>
                  <li><code className="bg-muted px-1 rounded">button_text="Track"</code> - Custom button text</li>
                </ul>
              </div>
              
              <div className="p-4 bg-muted rounded-lg font-mono text-sm">
                [swift_commerce_tracking_form show_order_field="no" button_text="Find My Package"]
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Right Column: Form Preview */}
      <div className="lg:sticky lg:top-20 lg:self-start">
        <Card>
          <CardHeader>
            <CardTitle>Form Preview</CardTitle>
            <CardDescription>
              Live preview of how the tracking form will appear
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div 
              className="p-8 rounded-xl"
              style={{ backgroundColor: settings.background_color }}
            >
              <h3 
                className="text-xl font-semibold mb-2 text-center"
                style={{ color: settings.text_color }}
              >
                {settings.form_title || 'Track Your Order'}
              </h3>
              <p className="text-sm text-gray-500 mb-6 text-center">
                {settings.form_description || 'Enter your tracking number below to see the delivery status of your order.'}
              </p>
              
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: settings.text_color }}>
                    Tracking Number
                  </label>
                  <input 
                    type="text" 
                    placeholder="Enter tracking number"
                    className="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm"
                    readOnly
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: settings.text_color }}>
                    Order Number (optional)
                  </label>
                  <input 
                    type="text" 
                    placeholder="Enter order number"
                    className="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm"
                    readOnly
                  />
                </div>
                
                <button 
                  className="w-full py-3 text-white font-semibold rounded-lg transition-colors"
                  style={{ backgroundColor: settings.primary_color }}
                >
                  {settings.button_text || 'Track Shipment'}
                </button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}