
import React from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Copy, Tag, Ban, AlertTriangle, ListChecks } from 'lucide-react';

const TEMPLATES = [
  {
    id: 1, name: 'Auto-Categorize Home Depot',
    description: 'Automatically assigns transactions containing "Home Depot" to the Maintenance Expense category.',
    rule_type: 'transaction', icon: <Tag className="w-5 h-5 text-primary" />,
    mockRule: { name: 'Auto-Categorize Home Depot', description: 'Automatically assigns transactions containing "Home Depot" to the Maintenance Expense category.', rule_type: 'transaction', priority: 10, status: 'active', rule_conditions: [{ field: 'description', operator: 'contains', value: 'Home Depot', logical_operator: 'AND' }], rule_actions: [{ action_type: 'set_field', field: 'category', value: 'Maintenance' }] }
  },
  {
    id: 2, name: 'Block Large Unexpected Charges',
    description: 'Prevents saving any manual charge over $5000 to catch typos.',
    rule_type: 'charge', icon: <Ban className="w-5 h-5 text-destructive" />,
    mockRule: { name: 'Block Large Unexpected Charges', description: 'Prevents saving any manual charge over $5000 to catch typos.', rule_type: 'charge', priority: 100, status: 'active', rule_conditions: [{ field: 'amount', operator: 'greater_than', value: '5000', logical_operator: 'AND' }], rule_actions: [{ action_type: 'prevent_save', field: '', value: 'Amount exceeds $5000 threshold limit.' }] }
  },
  {
    id: 3, name: 'Flag Voided Checks',
    description: 'Flags any journal entry with "VOID" in description for manual review.',
    rule_type: 'journal_entry', icon: <AlertTriangle className="w-5 h-5 text-amber-500" />,
    mockRule: { name: 'Flag Voided Checks', description: 'Flags any journal entry with "VOID" in description for manual review.', rule_type: 'journal_entry', priority: 50, status: 'active', rule_conditions: [{ field: 'description', operator: 'contains', value: 'VOID', logical_operator: 'AND' }], rule_actions: [{ action_type: 'flag_review', field: '', value: '' }] }
  },
  {
    id: 4, name: 'Standardize Late Fee Descriptions',
    description: 'Appends "[SYSTEM GENERATED]" to descriptions of automatically created late fees.',
    rule_type: 'charge', icon: <ListChecks className="w-5 h-5 text-emerald-500" />,
    mockRule: { name: 'Standardize Late Fee Descriptions', description: 'Appends "[SYSTEM GENERATED]" to descriptions of automatically created late fees.', rule_type: 'charge', priority: 20, status: 'active', rule_conditions: [{ field: 'description', operator: 'contains', value: 'Late Fee', logical_operator: 'AND' }], rule_actions: [{ action_type: 'append_description', field: '', value: '[SYSTEM GENERATED]' }] }
  },
  {
    id: 5, name: 'Default Cash Account for Checks',
    description: 'Sets the Account ID to your primary checking when payment method is check.',
    rule_type: 'payment', icon: <Tag className="w-5 h-5 text-indigo-500" />,
    mockRule: { name: 'Default Cash Account for Checks', description: 'Sets the Account ID to your primary checking when payment method is check.', rule_type: 'payment', priority: 10, status: 'active', rule_conditions: [{ field: 'payment_method', operator: 'equals', value: 'Check', logical_operator: 'AND' }], rule_actions: [{ action_type: 'set_field', field: 'account_id', value: 'YOUR_CASH_ACCOUNT_ID_HERE' }] }
  }
];

export default function RuleTemplateDialog({ open, onOpenChange, onSelectTemplate }) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Accounting Rule Templates</DialogTitle>
          <DialogDescription>Clone a pre-built rule template to quickly set up automation.</DialogDescription>
        </DialogHeader>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
          {TEMPLATES.map(t => (
            <Card key={t.id} className="hover:border-primary/30 transition-colors">
              <CardHeader className="pb-2">
                <div className="flex items-center gap-2">
                  <div className="bg-muted p-2 rounded-lg">{t.icon}</div>
                  <CardTitle className="text-base">{t.name}</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4 h-10">{t.description}</p>
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium bg-muted px-2 py-1 rounded uppercase tracking-wider">{t.rule_type.replace('_', ' ')}</span>
                  <Button variant="outline" size="sm" onClick={() => onSelectTemplate(t.mockRule)} className="bg-primary/5 text-primary hover:bg-primary/10 border-primary/20">
                    <Copy className="w-4 h-4 mr-2" /> Use Template
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </DialogContent>
    </Dialog>
  );
}
