balikci/frontend/src/pages/Templates.jsx

import { useState, useEffect } from 'react';
import {
  Box,
  Button,
  Paper,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Chip,
  CircularProgress,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  Switch,
  FormControlLabel,
  Tabs,
  Tab,
} from '@mui/material';
import {
  Add,
  Edit,
  Delete,
  Preview,
  ContentCopy,
} from '@mui/icons-material';
import { templateService } from '../services/templateService';
import { format } from 'date-fns';

const defaultForm = {
  name: '',
  template_type: '',
  subject_template: '',
  body_html: '',
  description: '',
  active: true,
};

function Templates() {
  const [templates, setTemplates] = useState([]);
  const [loading, setLoading] = useState(true);
  const [form, setForm] = useState(defaultForm);
  const [activeTab, setActiveTab] = useState('form');
  const [dialogOpen, setDialogOpen] = useState(false);
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewHtml, setPreviewHtml] = useState('');
  const [previewUrl, setPreviewUrl] = useState('');
  const [previewLoading, setPreviewLoading] = useState(false);
  const [selectedTemplate, setSelectedTemplate] = useState(null);
  const [companyPlaceholder, setCompanyPlaceholder] = useState('Örnek Şirket');
  const [employeePlaceholder, setEmployeePlaceholder] = useState('Ahmet Yılmaz');

  useEffect(() => {
    loadTemplates();
  }, []);

  const loadTemplates = async () => {
    try {
      setLoading(true);
      const response = await templateService.getAll();
      setTemplates(response.data);
    } catch (error) {
      console.error('Failed to load templates:', error);
      alert('Şablonlar yüklenemedi');
    } finally {
      setLoading(false);
    }
  };

  const handleOpenCreate = () => {
    setSelectedTemplate(null);
    setForm(defaultForm);
    setActiveTab('form');
    setDialogOpen(true);
  };

  const handleOpenEdit = async (template) => {
    setSelectedTemplate(template);
    setForm({
      name: template.name,
      template_type: template.template_type,
      subject_template: template.subject_template || '',
      body_html: template.body_html,
      description: template.description || '',
      active: Boolean(template.active),
    });
    setActiveTab('form');
    setDialogOpen(true);
  };

  const handleCloseDialog = () => {
    setDialogOpen(false);
    setSelectedTemplate(null);
    if (previewUrl) {
      URL.revokeObjectURL(previewUrl);
      setPreviewUrl('');
    }
    setPreviewHtml('');
    setActiveTab('form');
  };

  const handleSave = async () => {
    try {
      if (selectedTemplate) {
        await templateService.update(selectedTemplate.id, form);
        alert('Şablon güncellendi');
      } else {
        await templateService.create(form);
        alert('Şablon oluşturuldu');
      }
      handleCloseDialog();
      loadTemplates();
    } catch (error) {
      const message = error.response?.data?.error || 'Şablon kaydedilemedi';
      alert(message);
      console.error('Failed to save template:', error);
    }
  };

  const handleDelete = async (template) => {
    if (!window.confirm(`${template.name} şablonunu silmek istediğinizden emin misiniz?`)) {
      return;
    }
    try {
      await templateService.delete(template.id);
      alert('Şablon silindi');
      loadTemplates();
    } catch (error) {
      const message = error.response?.data?.error || 'Şablon silinemedi';
      alert(message);
      console.error('Failed to delete template:', error);
    }
  };

  const handlePreview = async (htmlOverride, options = { openModal: false }) => {
    try {
      setPreviewLoading(true);
      const htmlContent = htmlOverride ?? form.body_html;
      if (!htmlContent) {
        alert('Önizleme için HTML içeriği gerekli');
        return;
      }
      const response = await templateService.preview({
        template_html: htmlContent,
        company_name: companyPlaceholder,
        employee_name: employeePlaceholder,
      });
      const renderedHtml = response.data.data.rendered_html;
      setPreviewHtml(renderedHtml);
      if (previewUrl) {
        URL.revokeObjectURL(previewUrl);
      }
      const blobUrl = URL.createObjectURL(new Blob([renderedHtml], { type: 'text/html' }));
      setPreviewUrl(blobUrl);
      setActiveTab('preview');
      if (options.openModal) {
        setPreviewOpen(true);
      }
    } catch (error) {
      const message = error.response?.data?.error || 'Önizleme oluşturulamadı';
      alert(message);
      console.error('Failed to preview template:', error);
    } finally {
      setPreviewLoading(false);
    }
  };

  const copyTemplateType = (value) => {
    navigator.clipboard.writeText(value);
    alert(`Template Type panoya kopyalandı: ${value}`);
  };

  useEffect(() => {
    return () => {
      if (previewUrl) {
        URL.revokeObjectURL(previewUrl);
      }
    };
  }, [previewUrl]);

  if (loading) {
    return (
      <Box display="flex" justifyContent="center" alignItems="center" minHeight="400px">
        <CircularProgress />
      </Box>
    );
  }

  return (
    <Box>
      <Box display="flex" justifyContent="space-between" alignItems="center" mb={3}>
        <Typography variant="h4">Mail Şablonları</Typography>
        <Button variant="contained" startIcon={<Add />} onClick={handleOpenCreate}>
          Yeni Şablon
        </Button>
      </Box>

      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Şablon Adı</TableCell>
              <TableCell>Template Type</TableCell>
              <TableCell>Durum</TableCell>
              <TableCell>Güncelleme</TableCell>
              <TableCell align="right">İşlemler</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {templates.map((template) => (
              <TableRow key={template.id} hover>
                <TableCell>
                  <Typography fontWeight={600}>{template.name}</Typography>
                  {template.description && (
                    <Typography variant="body2" color="textSecondary">
                      {template.description}
                    </Typography>
                  )}
                </TableCell>
                <TableCell>
                  <Box display="flex" alignItems="center" gap={1}>
                    <Chip
                      label={template.template_type}
                      color="primary"
                      size="small"
                    />
                    <Button
                      size="small"
                      variant="outlined"
                      startIcon={<ContentCopy fontSize="small" />}
                      onClick={() => copyTemplateType(template.template_type)}
                    >
                      Kopyala
                    </Button>
                  </Box>
                </TableCell>
                <TableCell>
                  <Chip
                    label={template.active ? 'Aktif' : 'Pasif'}
                    color={template.active ? 'success' : 'default'}
                    size="small"
                  />
                </TableCell>
                <TableCell>
                  {format(new Date(template.updated_at), 'dd/MM/yyyy HH:mm')}
                </TableCell>
                <TableCell align="right">
                  <Button
                    size="small"
                    startIcon={<Preview />}
                    onClick={() => {
                      setSelectedTemplate(template);
                      setForm({
                        name: template.name,
                        template_type: template.template_type,
                        subject_template: template.subject_template || '',
                        body_html: template.body_html,
                        description: template.description || '',
                        active: Boolean(template.active),
                      });
                      setCompanyPlaceholder('Örnek Şirket');
                      setEmployeePlaceholder('Ahmet Yılmaz');
                      setActiveTab('preview');
                      handlePreview(template.body_html, { openModal: true });
                    }}
                    sx={{ mr: 1 }}
                  >
                    Önizleme
                  </Button>
                  <Button
                    size="small"
                    startIcon={<Edit />}
                    onClick={() => handleOpenEdit(template)}
                    sx={{ mr: 1 }}
                  >
                    Düzenle
                  </Button>
                  <Button
                    size="small"
                    color="error"
                    startIcon={<Delete />}
                    onClick={() => handleDelete(template)}
                  >
                    Sil
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>

      <Dialog
        open={dialogOpen}
        onClose={handleCloseDialog}
        maxWidth="md"
        fullWidth
      >
        <DialogTitle>
          {selectedTemplate ? 'Şablonu Düzenle' : 'Yeni Şablon Oluştur'}
        </DialogTitle>
        <DialogContent dividers>
          <Tabs
            value={activeTab}
            onChange={(_, value) => setActiveTab(value)}
            sx={{ mb: 2 }}
          >
            <Tab label="Form" value="form" />
            <Tab label="Önizleme" value="preview" />
          </Tabs>

          {activeTab === 'form' && (
            <Box display="flex" flexDirection="column" gap={2}>
              <TextField
                label="Şablon Adı"
                fullWidth
                required
                value={form.name}
                onChange={(e) => setForm({ ...form, name: e.target.value })}
              />
              <TextField
                label="Template Type"
                fullWidth
                required
                helperText="Örn: bank, government, internal"
                value={form.template_type}
                onChange={(e) => setForm({ ...form, template_type: e.target.value.trim().toLowerCase() })}
              />
              <TextField
                label="Mail Konusu"
                fullWidth
                value={form.subject_template}
                onChange={(e) => setForm({ ...form, subject_template: e.target.value })}
              />
              <TextField
                label="Açıklama"
                fullWidth
                multiline
                minRows={2}
                value={form.description}
                onChange={(e) => setForm({ ...form, description: e.target.value })}
              />
              <TextField
                label="HTML İçeriği"
                fullWidth
                multiline
                minRows={10}
                value={form.body_html}
                onChange={(e) => setForm({ ...form, body_html: e.target.value })}
                helperText="Handlebars değişkenleri: {{company_name}}, {{employee_name}}, {{tracking_url}}"
              />
              <FormControlLabel
                control={
                  <Switch
                    checked={form.active}
                    onChange={(e) => setForm({ ...form, active: e.target.checked })}
                  />
                }
                label="Aktif"
              />
            </Box>
          )}

          {activeTab === 'preview' && (
            <Box display="flex" flexDirection="column" gap={2}>
              <Box display="flex" gap={2}>
                <TextField
                  label="Şirket Adı"
                  fullWidth
                  value={companyPlaceholder}
                  onChange={(e) => setCompanyPlaceholder(e.target.value)}
                />
                <TextField
                  label="Çalışan Adı"
                  fullWidth
                  value={employeePlaceholder}
                  onChange={(e) => setEmployeePlaceholder(e.target.value)}
                />
              </Box>
              <Button
                variant="outlined"
                startIcon={<Preview />}
                onClick={handlePreview}
                disabled={previewLoading || !form.body_html}
              >
                {previewLoading ? 'Önizleme Oluşturuluyor...' : 'Önizleme Oluştur'}
              </Button>
              <Paper variant="outlined" sx={{ minHeight: 400 }}>
                {previewHtml ? (
                  <iframe
                    title="template-preview"
                    src={previewUrl}
                    style={{ border: 'none', width: '100%', height: '600px' }}
                  />
                ) : (
                  <Box
                    display="flex"
                    justifyContent="center"
                    alignItems="center"
                    minHeight="200px"
                    color="text.secondary"
                  >
                    Önizleme için HTML içeriği girin ve \"Önizleme Oluştur\" butonuna basın
                  </Box>
                )}
              </Paper>
            </Box>
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCloseDialog}>İptal</Button>
          <Button onClick={handleSave} variant="contained" disabled={!form.name || !form.template_type || !form.body_html}>
            Kaydet
          </Button>
        </DialogActions>
      </Dialog>

      <Dialog
        open={previewOpen}
        onClose={() => setPreviewOpen(false)}
        maxWidth="lg"
        fullWidth
      >
        <DialogTitle>Önizleme</DialogTitle>
        <DialogContent dividers>
          <iframe
            title="template-preview-full"
            src={previewUrl}
            style={{ border: 'none', width: '100%', minHeight: '600px' }}
          />
        </DialogContent>
        <DialogActions>
          <Button
            onClick={() => {
              setPreviewOpen(false);
            }}
          >
            Kapat
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}

export default Templates;