import { View, Text, StyleSheet, Link } from "@react-pdf/renderer";
import { Link2 } from "lucide-react";

const tableStyles = StyleSheet.create({
  table: {
    width: '100%',
    borderWidth: 1,
    borderColor: '#ccc',
    borderTop:0,
    marginBottom: 10,
  },
  centeredTable: {
    width: '60%',
    marginLeft: 'auto',
    marginRight: 'auto',
    borderWidth: 1,
    borderColor: '#ccc',
    borderTop:1,
    marginBottom: 10,
  },
  tableRow: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    minHeight: 25,
    alignItems: 'center',
  },
  tableRowLast: {
    flexDirection: 'row',
    minHeight: 25,
    alignItems: 'center',
  },
  tableColLabel: {
    width: '35%',
    padding: 5,
    backgroundColor: '#f3f4f6',
     fontWeight: 'semibold',
    fontSize: 9,
    // borderRightWidth: 1,
    // borderRightColor: '#555',
  },
  tableColValue: {
    width: '65%',
    padding: 5,
    fontSize: 9,
  },
  centeredTableColLabel: {
    width: '50%',
    padding: 5,
    fontSize: 10,
    textAlign: 'center',
  },
  centeredTableColValue: {
    width: '50%',
    padding: 5,
    fontSize: 10,
    textAlign: 'center',
  },
  tableColFull: {
    width: '100%',
    padding: 5,
    fontSize: 10,
  },
  tableRowHightlight: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    minHeight: 25,
    alignItems: 'center',
    backgroundColor: 'red',
  },
});

interface TableRowProps {
  label: string;
  value: string | number;
  isLast?: boolean;
  hightlight?: boolean;
}

export const PDFTableRow = ({ label, value, isLast = false , hightlight = false }: TableRowProps) => (
  <View style={isLast ? tableStyles.tableRowLast : hightlight ? tableStyles.tableRowHightlight  : tableStyles.tableRow}>
    <Text style={tableStyles.tableColLabel}>{label}</Text>
    <Text style={tableStyles.tableColValue}>{value || 'N/A'}</Text>
  </View>
);

interface TableProps {
  children: React.ReactNode;
}

export const PDFTable = ({ children }: TableProps) => (
  <View style={tableStyles.table}>
    {children}
  </View>
);

interface ConditionalTableRowProps {
  condition: boolean;
  label: string;
  value: string | number;
  isLast?: boolean;
}

export const ConditionalPDFTableRow = ({ condition, label, value, isLast = false }: ConditionalTableRowProps) => {
  if (!condition) return null;
  return <PDFTableRow label={label} value={value} isLast={isLast} />;
};

interface EmptyRowProps {
  message: string;
}

export const EmptyTableRow = ({ message }: EmptyRowProps) => (
  <View style={tableStyles.tableRowLast}>
    <Text style={tableStyles.tableColFull}>{message}</Text>
  </View>
);

interface TableRowLinkProps {
  label: string;
  linkText: string;
  linkUrl: string;
  isLast?: boolean;
}

export const PDFTableRowLink = ({ label, linkText, linkUrl, isLast = false }: TableRowLinkProps) => (
  <View style={isLast ? tableStyles.tableRowLast : tableStyles.tableRow}>
    <Text style={tableStyles.tableColLabel}>{label}</Text>
    <View style={tableStyles.tableColValue}>
      <Link  src={linkUrl} style={{ color: '#0066cc', textDecoration: 'underline', fontSize: 9 }}>
           Attached
      </Link>
    </View>
  </View>
);

interface CenteredTableRowProps {
  label: string;
  value: string | number;
  isLast?: boolean;
}

export const PDFCenteredTableRow = ({ label, value, isLast = false }: CenteredTableRowProps) => (
  <View style={isLast ? tableStyles.tableRowLast : tableStyles.tableRow}>
    <Text style={tableStyles.centeredTableColLabel}>{label}</Text>
    <Text style={tableStyles.centeredTableColValue}>{value || 'N/A'}</Text>
  </View>
);

interface CenteredTableProps {
  children: React.ReactNode;
}

export const PDFCenteredTable = ({ children }: CenteredTableProps) => (
  <View style={tableStyles.centeredTable}>
    {children}
  </View>
);
