import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { supabase } from '@/integrations/supabase/client';
import { useToast } from '@/hooks/use-toast';
import { Loader2, Save, LayoutTemplate } from 'lucide-react';

export function PublicFormReportTemplate({ formId, initialSettings = {}, onSave }) {
  const { toast } = useToast();
  const [loading, setLoading] = useState(false);
  const [settings, setSettings] = useState({
    headerColor: initialSettings.headerColor || '#1e293b',
    showMetadata: initialSettings.showMetadata !== false,
    customFooterText: initialSettings.customFooterText || '',
    compactMode: initialSettings.compactMode || false
  });

  const handleSave = async () => {
    setLoading(true);
    try {
      const { error } = await supabase
        .from('public_form_templates')
        .update({ report_styling: settings })
        .eq('id', formId);

      if (error) throw error;

      toast({ title: "Settings Saved", description: "Report template updated." });
      if (onSave) onSave(settings);
    } catch (err) {
      console.error(err);
      toast({ variant: "destructive", title: "Error", description: "Failed to save settings." });
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-lg flex items-center gap-2">
          <LayoutTemplate className="w-5 h-5 text-primary" />
          Report Configuration
        </CardTitle>
        <CardDescription>Customize how the submission report looks for this form.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>Header Color</Label>
              <div className="flex gap-2 items-center">
                <Input
                  type="color"
                  value={settings.headerColor}
                  onChange={e => setSettings({ ...settings, headerColor: e.target.value })}
                  className="w-12 h-12 p-1"
                />
                <Input
                  value={settings.headerColor}
                  onChange={e => setSettings({ ...settings, headerColor: e.target.value })}
                  className="font-mono"
                />
              </div>
            </div>

            <div className="space-y-2">
              <Label>Custom Footer Text</Label>
              <Input
                placeholder="e.g. Confidential Document"
                value={settings.customFooterText}
                onChange={e => setSettings({ ...settings, customFooterText: e.target.value })}
              />
            </div>
          </div>

          <div className="space-y-4">
            <div className="flex items-center justify-between p-3 bg-muted rounded border">
              <Label>Include Submission Metadata</Label>
              <Switch
                checked={settings.showMetadata}
                onCheckedChange={c => setSettings({ ...settings, showMetadata: c })}
              />
            </div>

            <div className="flex items-center justify-between p-3 bg-muted rounded border">
              <Label>Compact Mode</Label>
              <Switch
                checked={settings.compactMode}
                onCheckedChange={c => setSettings({ ...settings, compactMode: c })}
              />
            </div>
          </div>
        </div>

        <div className="flex justify-end pt-4 border-t">
          <Button onClick={handleSave} disabled={loading}>
            {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Save className="w-4 h-4 mr-2" />}
            Save Configuration
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}

export default PublicFormReportTemplate;
